Adding bootstrap to a Vue CLI project

Question

I'm new to Vue and webpack in general, and it's hard for me to figure out how to import things.

I created a new Vue project through vue init I added bootstrap 4 with yarn add bootstrap@4.0.0-alpha.6

In main.js, I am trying to import bootstrap and jquery:

 import Vue from 'vue'; import jQuery from 'jquery'; import bootstrap from 'bootstrap'; import App from './App'; import router from './router'; 

But I get:

Unprepared bug: Bootstrap JavaScript requires jQuery. jQuery must be enabled before JavaScript Bootstrap.

window.jQuery = window.$ = $; does not work

Finally, where and how can I download Sass so that it is available for the entire application?

Answer 1

I had the same problem, and that is exactly what I ended up with, but I did not use Bootstrap alpha, since a beta version was released.

---

• Install Bootstrap along with your dependencies, jQuery and Popper.js:

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

• Edit the file /build/webpack.dev.conf.js to add the plugin for jQuery and Popper.js for working with dependencies (you can learn more about here 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", ... }) ... ]

• Modify /src/main.js to import Bootstrap into the application entry point:

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

• Edit the app.vue <style> part of the file to import Bootsrap into the root directory of the css application:

 <template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } @import'~bootstrap/dist/css/bootstrap.css' </style> 

5. Launch the Vue Application from the CLI

   npm start

---

I had to add the @import rule after the #app selector, otherwise the style will be canceled when Bootstrap boots. I think there is a better way to do this, so I will update my answer when I find out.

Answer 2

use Bootstrap CDN and include it as a in your index.html

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

I have never used Bootsrap with Vue.js since I am not a fan. But when I used Bulma sass, first I did npm install for Bulma. Then I created a folder in src/assets/sass and inside it main.scss was created, and inside I imported bulma to @import '~bulma/bulma';