Setup Bootstrap 4 With Vue Cli 3 Webpack

August 24, 2018

Setup vue cli 3.

Install jquery, popper.js and bootstrap.

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save
npm install exports-loader --save-dev

Import packages in main.js. Refer Bootstrap Webpack

// import 'bootstrap/dist/js/bootstrap'
import 'bootstrap';

// import plugins individually - require exports-loader
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/tooltip'

// import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/scss/bootstrap.scss'

// jquery
global.$ = $

Edit vue.config.js.

const path = require('path')
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.js'],
      alias: {
        'jquery': 'jquery/dist/jquery.slim.js',
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
        'Util': "exports-loader?Util!bootstrap/js/dist/util"
      }),
      // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
  }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.