Loading Twitter Bootstrap in Vue CLI

Posted 9 years ago - updated 9 years ago vuejs bootstrap webpack

Rather than including jquery and bootstrap in every .js file you can install these automatically using the ProvidePlugin plugin!

 Install the vue-cli project as normal

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Install Bootstrap and jQuery

$ npm install jquery --save-dev
$ npm install bootstrap --save-dev

Edit Config

Edit build/webpack.conf.js and add:

plugins: [
    ...
    new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
    ...

And that's it.

The Old way

There is now no longer any need to add these to the top of each file, so you can delete these:

import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'