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 bootstrap 4 with yarn add [email protected]

In main.js I try 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:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

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

Finally, where and how do I load the Sass such that it's available to the whole app?

This too ~ github.com/AngularClass/angular2-webpack-starter/issues/696 — Phil
– Phil, Commented Mar 9, 2017 at 0:54
Possible duplicate of Error using Bootstrap & jQuery Packages in ES6 with Browserify — Roy J
– Roy J, Commented Mar 9, 2017 at 1:09
(window.$ = $; window.jQuery = $;) do not work for me. Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. — Ashbury
– Ashbury, Commented Mar 9, 2017 at 1:28
"window.jQuery = window.$ = $; does not work" Well, no, because nowhere in your code is $ being set. window.jQuery = window.$ = require('jquery') might work better. — ceejayoz
– ceejayoz, Commented Mar 9, 2017 at 3:26

Zauberbutter · Accepted Answer · 2020-09-08 06:12:48Z

54

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.

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

npm install [email protected] popper.js jquery --save-dev

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

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' // ←

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>

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.

edited Sep 8, 2020 at 6:12

Zauberbutter

1,02211 silver badges32 bronze badges

answered Sep 8, 2017 at 20:07

Culpepper

1,11012 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

willcwf Over a year ago

Looks like you can, instead of importing into the css, in your main.js file just below import 'bootstrap' you can add import '../node_modules/bootstrap/dist/css/bootstrap.css';

Brian McCall Over a year ago

I think that these should be installed as regular dependencies not -dev dependencies

ARUN Madathil · Accepted Answer · 2018-09-24 16:02:47Z

49

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

answered Sep 24, 2018 at 16:02

ARUN Madathil

93611 silver badges17 bronze badges

2 Comments

Zack Over a year ago

This should become the selected answer

Čamo Over a year ago

This is it. What is that webpack haystack as accepted answer?

goose · Accepted Answer · 2019-11-07 13:59:40Z

18

I will try to be as precise as possible

1.Go the the Vue Cli project run :

npm i bootstrap jquery popper.js

2.Go to src/main.js import like:

import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';

answered Nov 7, 2019 at 13:59

goose

7618 silver badges8 bronze badges

Comments

Aswin Blix · Accepted Answer · 2021-09-22 10:20:34Z

11

Only For Bootstrap 5

Follow the below in cmd

vue create project-name
Select Vue version
cd project-name
npm i bootstrap @popperjs/core (just bootstrap means latest available bootstrap version)
```
              (or)
```
i)npm i bootstrap (to install bootstrap)

ii)npm install --save @popperjs/core (to install popper.js)

Note: Try this if only point 4 emits error
Add the below to src/main.js import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';
Done now bootstrap will work on Vue-Cli

edited Sep 22, 2021 at 10:20

answered Sep 16, 2021 at 11:10

Aswin Blix

1591 silver badge6 bronze badges

Comments

Ahmed · Accepted Answer · 2020-08-12 11:51:15Z

8

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.

edited Aug 12, 2020 at 11:51

answered Aug 27, 2018 at 0:32

Ahmed

1,02612 silver badges15 bronze badges

Comments

Dimitrios Filippou · Accepted Answer · 2019-12-13 15:06:13Z

5

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/

answered Dec 13, 2019 at 15:06

Dimitrios Filippou

4655 silver badges12 bronze badges

Comments

fguillen · Accepted Answer · 2022-07-29 08:07:10Z

1

As usual in JS ecosystem the answers get out of date very quick.. this is what is working for my right now:

$ yarn add jquery bootstrap @popperjs/core
├─ @popperjs/[email protected]
├─ [email protected]
└─ [email protected]

// main.js
import '@popperjs/core/dist/umd/popper';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

answered Jul 29, 2022 at 8:07

fguillen

39.5k25 gold badges167 silver badges240 bronze badges

Comments

muescha · Accepted Answer · 2022-09-03 15:54:23Z

Brother, Greetings! Simple way to install and configure Bootstrap in your Vue project is that

First install bootstrap using a command in the terminal of the IDE which is below:

npm i bootstrap
You need to configure this in your main.js file so that it is applied to the whole project. You need to import this from node_modules folder to use it in project.

import "../node_modules/bootstrap/dist/css/bootstrap.css";

import "../node_modules/bootstrap/dist/js/bootstrap.bundle";

Just paste these lines in your main.js file because this is the path where your required bootstrap files will be if not then check the path and edit this path.

If you want to test whether it has worked or not, go to the app component and create a button, provide it a bootstrap class and run the project to see whether it is working or not.

Thanks, take care :)

Screenshot:

Melanie Ryan · Accepted Answer · 2021-12-29 16:49:55Z

0

Depending on what packages you already have installed (such as Vuetify), you may not be able to use boostrap 4 + vue 3. Check your versions to confirm before following the directions in the thread!

answered Dec 29, 2021 at 16:49

Melanie Ryan

11 bronze badge

Comments

Mahantesh. N. Hadimani. · Accepted Answer · 2024-02-29 07:12:38Z

0

It is very simple.

Step 1: Install bootstrap

npm install bootstrap

Now inside the module, the bootstrap folder gets added which confirms that the installation is successful.

Step 2: Import bootstrap into main.js folder

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle";

Hey 🥳 now you can see that Bootstrap is added. And add some bootstrap colors for testing.

answered Feb 29, 2024 at 7:12

Mahantesh. N. Hadimani.

6276 silver badges18 bronze badges

Comments

Pranav Susarla · Accepted Answer · 2024-12-30 15:45:55Z

0

Simple 2 step process:

First install bootstrap

npm install bootstrap

Then include this just above the last line in your App.vue file

@import'~bootstrap/dist/css/bootstrap.css'

Like this: Image showing where to insert the above line

Then use bootstrap classes as usual in your html code!

answered Dec 30, 2024 at 15:45

Pranav Susarla

1

Comments

Qais Abou Jaoudé · Accepted Answer · 2017-09-07 20:26:22Z

-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';

answered Sep 7, 2017 at 20:26

Qais Abou Jaoudé

6271 gold badge8 silver badges17 bronze badges

1 Comment

Brian McCall Over a year ago

This doesn't allow for usage of any of the jQuery functionality. It should be installed the way specified in the accepted answer

user7331530 · Accepted Answer · 2020-02-21 00:43:12Z

-2

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'

answered Feb 21, 2020 at 0:43

user7331530

1,0052 gold badges14 silver badges24 bronze badges

1 Comment

Mishel Tanvir Habib Over a year ago

jQuery is required in bootstrap 4. However, the current bootstrap version 5.0.0.beta3 and future versions will not require jQuery. Your first sentence gave a false impression that jQuery is not a dependency for bootstrap 4.

Collectives™ on Stack Overflow

Adding bootstrap to Vue CLI project

13 Answers 13

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Thanks, take care :)

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Thanks, take care :)

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related