Vue with Bootstrap

posts

Here is how to import boostrap in Vue.

create the app

1
2
3
vue init webpack app
cd app
npm run dev

install jquery, popper and boostrap

1
npm install jquery popper.js bootstrap --save

webpack

Edit in file build/webpack.base.conf.js

webpack.base.conf.js
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    entry: {},
    output: {},
    resolve: {},
    module: {},

    plugins: [new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })]
}

import in main.js

main.js
1
2
require('bootstrap')
require('../node_modules/bootstrap/dist/css/bootstrap.min.css')

Try the navbar in the app. It should work.

how to import a third party library

Take axios as an example

1
npm install axios --save
main.js
1
2
import axios from 'axios'
Object.definePrototype(Vue.prototype, '$axios', { value: axios })