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/