Proper way to include bootstrap 4 in a vuejs project

Question

I use vue cli and want to use bootstrap 4. I installed the bootstrap npm package and imported the styles with @import '../node_modules/bootstrap/scss/bootstrap.scss'; in App.vue.

But I can't get the javascript for modal and dropdown working. I tried to include these files in the index.html but it doesn't helped:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

I don't want to use vue-bootstrap.

If you don't want to include jQuery Bootstrap-vue is very good. Its a good idea to try and not use jQuery give you are using vue.js.. its sounds hard but you win component out there and building your own is much easier than jQuery. (I know you have indicated you dont want to use bootstrap vue but this advice has served me well..just trying to help) — Mark Redman
– Mark Redman, Commented Aug 27, 2018 at 13:49
You're right it is very easy to write this by myself so that's what I did. — MarcS82
– MarcS82, Commented Aug 28, 2018 at 11:47

Salman Zafar · Accepted Answer · 2019-11-19 13:07:17Z

3

npm install jquery bootstrap popper.js --save

After that, import js and css in your main.js file. Like below. Hope it help

import jQuery from 'jquery'
import bootstrap from 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global .$ = jQuery

edited Nov 19, 2019 at 13:07

Salman Zafar

4,0655 gold badges23 silver badges44 bronze badges

answered Aug 27, 2018 at 13:39

markcc

6433 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Proper way to include bootstrap 4 in a vuejs project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related