CODEWITHSUNDEEP
vue.jsbootstrap-4
MarcS82
MarcS82

Reputation: 2527

Proper way to include bootstrap 4 in a vuejs project

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.

Upvotes: 0

Views: 2666

Answers (1)

markcc
markcc

Reputation: 643

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

Upvotes: 3

Related Questions