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

For Gridsome users, the solution is exactly the same!

yarn add jquery bootstrap popper.js

import 'jquery/src/jquery.js';
import 'popper.js/dist/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

You can also import the css here like this import 'bootstrap/dist/css/bootstrap.min.css' however bootstrap provides a SCSS file which can be highly customisable, if you want this kind of customisation, import in the main.js file a new scss file

// Load core styling
import '~/assets/styles/core.scss';

and then import bootstrap like this

@import '~bootstrap/scss/bootstrap';
@import 'theme.scss';

The theme.scss follows this document https://getbootstrap.com/docs/4.0/getting-started/theming/

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 never used Bootsrap with Vue.js, as I'm not a fan. But when I used Bulma's sass, first I did npm install for Bulma. Then I created a folder in src/assets/sass and inside it created a main.scss and inside it I imported bulma by @import '~bulma/bulma';

Answer 3

You don't want to do any kind of adjustment in webpack.config.js like adding jQuery global in plugin array. Once you installed all bootstrap dependencies like jQuery and popper than just import them in app.vue or main.js (you can import separately in each component if you wish)

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

thats it ..

Answer 4

jQuery is not required in current version (Right now: "bootstrap": "^4.4.1", "bootstrap-vue": "^2.5.0")

• install bootstrap
  • npm install bootstrap-vue bootstrap --save
• Then, register BootstrapVue in your app entry point (main.js)
  • import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
  • Vue.use(BootstrapVue)
• And import Bootstrap and BootstrapVue css files in main.js:
  • import 'bootstrap/dist/css/bootstrap.css'
  • import 'bootstrap-vue/dist/bootstrap-vue.css'

Answer 5

With Vue CLI v3.x/v4.x, you can also use the @techiediaries/vue-cli-plugin-bootstrap to quickly add the latest Bootstrap 4 version in your Vue project without manually adding any files or settings.

Head over to a new command-line interface, navigate to your project's folder and run the following command:

$ vue add @techiediaries/bootstrap

The plugin will take care of adding any configuration options and install the dependencies into your project so you can start using Bootstrap classes right away without spending time figuring out what settings or dependencies you need to add.

Answer 6

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 <style> portion to import Bootsrap into your app's root css:

<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. 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.