Setup Bootstrap 4 With Vue Cli 3 Webpack

Install jquery, popper.js and bootstrap.

npm install jquery --savenpm install popper.js --savenpm install bootstrap --savenpm 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-loaderimport 'bootstrap/js/dist/modal'import 'bootstrap/js/dist/tooltip'// import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/scss/bootstrap.scss'// jqueryglobal.$ = $

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$/),    ]  }}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.