Adding bootstrap to Vue CLI project

Question

I\'m new to Vue and webpack in general and I\'m having a hard time figuring out how to import things.

I created a fresh Vue project through vue init I added

Answer 1

I was having the same issue and this is what I ended up with however, I didn't use Bootstrap alpha since the beta has since been released.

---

1. Install Bootstrap along with its dependencies, jQuery and Popper.js:

npm install bootstrap@4.0.0-beta popper.js jquery --save-dev

2. Edit your /build/webpack.dev.conf.js file to add a plugin for jQuery and Popper.js to deal with dependencies (you can read more about that in the Bootstrap docs):

plugins: [
    // ...
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        // In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        // ...
    })
    // ...
]

3. Edit /src/main.js to import Bootstrap into the app's entry point:

import Vue from 'vue'
import App from './App'
import router from './router'
import 'bootstrap' // ←

4. Edit the App.vue' file's
   5. Run your Vue app from the CLI

   npm start
   

   ---

   I had to add the @import rule after the #app selector, otherwise the scoped styling would be canceled out by the Bootstrap import. I think there is a better way to do this so I will update my answer once I figure it out.