Using Bootstrap and jQuery in Vue

Update! 2019-08-04

With Bootstrap Vue being updated to v2, jQuery is no longer needed!

Now you can just follow the steps described here.

But if even that feels like a hassle, I’ve made a template for you. Just clone this repository and use it as is.

I’m leaving the content below for reference, so I won’t delete it.

The End

---

Start

A Few Methods

To use Bootstrap and jQuery in Vue.js, you need a bit of extra work. There are a few ways to do this.

1. Use the vue cli template provided by Bootstrap Vue
2. Use expose-loader: refer to this article
3. Use webpack

Choice

I found the approach using webpack to be the cleanest. I referred to this article and made a few tweaks. The structure is based on a project using the webpack template from vue cli. The versions of each library are as follows.

1. Bootstrap v4.0.0
2. jQuery v3.3.1
3. popper.js v1.12.9

Installation

npm install --save jquery bootstrap popper.js

Configuration

webpack

#build/webpack.base.conf.js

const webpack = require('webpack')

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

eslint

#.enlintrs.js

module.exports = {
  ...
  globals: {
    "$": true,
    "jQuery": true
  }
}

import

#src/main.js

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

Now let’s build something beautiful!