package.json

{
  "name": "vue-seed",
  "version": "0.0.1",
  "scripts": {
    "build": "NODE_ENV=production webpack --progress",
    "postinstall": "bower i -F && typings i",
    "server:development": "HOST=$(hostname -I | grep -o '[0-9.]*' | head -1) npm run server:localhost",
    "server:localhost": "webpack-dev-server --progress",
    "start": "npm run server:localhost",
    "update": "ncu -a --packageFile package.json && ncu -a -m bower --packageFile bower.json"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-vue": "^0.14.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "jquery-ui-dist": "^1.12.1",
    "socket.io-client": "^1.7.3",
    "vue": "^2.2.6",
    "vue-resource": "^1.3.1",
    "vue-router": "^2.5.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "debug": "^2.6.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "postcss": "^5.2.17",
    "postcss-cssnext": "^2.10.0",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  }
}

index.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-seed</title>
    <link rel="icon" data-href="favicon.png" type="image/x-icon">
    <base href="/">
</head>
<body>
<div id="app">
    <b-btn @click="$root.$emit('show::modal','modal1')">Launch demo modal</b-btn>

    <!-- Main UI -->
    <div class="mt-3 mb-3">
        Submitted Names:
        <ul>
            <li v-for="n in names">{{n}}</li>
        </ul>
    </div>

    <!-- Modal Component -->
    <b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName">

        <form @submit.stop.prevent="submit">
            <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
        </form>

    </b-modal>
</div>
<!--<router-view id="app"></router-view>-->
</body>
</html>

index.js

Vue.use(BootstrapVue/*, VueResource, VueRouter, Vuex*/);

window.app = new Vue({
    el: '#app',
    data: {
        name: '',
        names: []
    },
    methods: {
        clearName() {
            this.name = '';
        },
        submit() {
            if (!this.name) {
                alert('Please enter your name');
                return e.cancel();
            }

            this.names.push(this.name);
            this.name = '';
        }
    }
});

vendor.js

require('jquery');
require('jquery-ui-dist/jquery-ui');
require('bootstrap');

window.Vue = require('vue');
/*window.VueRouter = require('vue-router/dist/vue-router');
window.VueResource = require('vue-resource');
window.Vuex = require('vuex');*/
window.BootstrapVue = require('bootstrap-vue');

window.requireAll = requireContext => requireContext.keys().map(requireContext);
window.io = require('socket.io-client/dist/socket.io');
window.compose = (...fns) => value => fns.reduce((v, fn) => fn(v), value);

require('./vendor.scss');

vendor.scss

@import '~jquery-ui-dist/jquery-ui.theme.css';
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~font-awesome/css/font-awesome.css';

webpack.config.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
process.env.HOST = process.env.HOST || 'localhost';
process.env.PORT = process.env.PORT || '8001';

const path = require('path');
const rimraf = require('rimraf');

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

const paths = {
    context: path.join(__dirname, 'sources'),
    dist: path.join(__dirname, 'dist'),
    static: path.join(__dirname, 'static')
};

const devHash = process.env.NODE_ENV == 'development' ? '.[hash]' : '';

const webpackConfig = {
    context: paths.context,
    entry: {
        vendor: './vendor',
        app: './app'
    },
    output: {
        path: paths.dist,
        publicPath: '/',
        filename: path.join('assets', `[name]${devHash}.bundle.js`),
        chunkFilename: path.join('assets', `[name]${devHash}.chunk.js`)
    },
    resolve: {
        modules: ['bower_components', 'node_modules'],
        descriptionFiles: ['bower.json', 'package.json'],
        extensions: ['.js', '.json', '.vue'],
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.js$/,
                exclude: /(bower_components|node_modules)/,
                loader: 'babel-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader'
                })
            },
            {
                test: /\.s[ac]ss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!sass-loader'
                })
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)([?]?.*)$/,
                loader: 'url-loader',
                options: {
                    limit: '100000', // > 100kb -> file
                    name: path.join('assets', `[name]${devHash}.[ext]`)
                }
            }
        ]
    },
    plugins: [
        {
            apply: compiler => (rimraf.sync(compiler.options.output.path))
        },
        new CommonsChunkPlugin({
            name: ['app', 'vendor'],
            minChunks: 2
        }),
        new HtmlWebpackPlugin({
            template: path.join(paths.context, 'index.html')
        }),
        new CopyWebpackPlugin([{
            from: paths.static
        }]),
        new ExtractTextPlugin({
            filename: path.join('assets', `[name]${devHash}.bundle.css`),
            allChunks: true
        }),
        new ProvidePlugin({
            jQuery: 'jquery',
            Tether: 'tether'
        }),
        new DefinePlugin({
            'process.env': JSON.stringify(process.env)
        })
    ]
};

if (process.env.NODE_ENV == 'development') {
    webpackConfig.devServer = {
        contentBase: paths.dist,
        host: process.env.HOST,
        port: parseInt(process.env.PORT),
        stats: 'minimal',
        historyApiFallback: true
    };

    webpackConfig.devtool = 'source-map';
    webpackConfig.watch = true;
}

if (process.env.NODE_ENV == 'production') {
    webpackConfig.plugins.push(new UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_console: true
        }
    }));
}

module.exports = webpackConfig;

Uh oh!

Modal window does not work #276

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions