Getting Started

  • Vue.js version 2.6.9 (or greater) is recommended
  • BootstrapVue requires Bootstrap version 4.3.1 (or greater) SCSS/CSS

General

If you are using module bundlers like webpack, rollup.js, etc you may prefer to directly include the package into your project. To get started, use yarn or npm to get the latest version of Vue.js, BootstrapVue and Bootstrap 4:

# With npm
npm i vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

Then, register BootstrapVue plugin in your app entry point:

// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

And import Bootstrap and BootstrapVue css files:

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Or import Bootstrap and BootstrapVue scss files via a custom SCSS file:

// custom.scss
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
// app.js
import 'custom.scss'

Be sure to include your custom variables before bootstrap.scss and include BootstrapVue SCSS after Bootstrap SCSS to ensure variables are set up correctly.

Note: Requires webpack configuration to load CSS/SCSS files (official guide).

Nuxt.js plugin module

Install dependencies:

# With npm
npm i bootstrap-vue

# With yarn
yarn add bootstrap-vue

Add bootstrap-vue/nuxt to modules section of nuxt.config.js.

This will include both boostrap.css and bootstrap-vue.css default CSS.

{
  modules: ['bootstrap-vue/nuxt']
}

If you are using custom Bootstrap SCSS, you can disable automatic inclusion of Bootstrap and BootstrapVue pre-compiled CSS files by setting the following option(s) to false:

{
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false, // or `css`
    bootstrapVueCSS: false // or `bvCSS`
  }
}

BootstrapVue's custom CSS relies on some Bootstrap SCSS variables. You can include Bootstrap and BootstrapVue SCSS in your project's custom SCSS file:

// custom.scss

// Custom overrides go first
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 992px,
  xl: 1300px
);

// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

In your app main entry point include the single custom SCSS file (when using sass-loader):

// app.js
import 'custom.scss'

Tree shaking with Nuxt.js

If you wish to reduce your bundle size because you only use a subset of the available BootstrapVue plugins, you can configure the list of BootstrapVue componentPlugins or directivePlugins you want to globally install in your Nuxt.js project.

{
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    componentPlugins: [
      'Form',
      'FormCheckbox',
      'FormInput',
      'FormRadio'
    ],
    directivePlugins: [
      'Popover'
    ]
  }
}

Vue CLI 2

BootstrapVue has two Vue CLI templates available:

  • webpack-simple: Quick scaffold for a proof of concept or small app
  • webpack: Larger, production ready template with more options
# Ensure Vue CLI is installed and up to date
npm i -g vue-cli

# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project

# Change into the directory
cd my-project

# Install dependencies
npm i

# Fire up the dev server with HMR
npm run dev

You can repeat the commands above replacing bootstrap-vue/webpack-simple with bootstrap-vue/webpack for the webpack template.

Vue CLI 3

Unlike V2, Vue CLI 3 doesn't use templates.

Create a new project in the directory my-project:

npx @vue/cli create my-project

Enter the my-project directory and install bootstrap-vue:

npm i bootstrap-vue

Under the hood, Vue CLI uses webpack, so we can register the BootstrapVue plugin as with the webpack instructions.

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Optionally, you can import components individually, as below. To shorten import paths, we can add a webpack alias via vue.config.js.

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components')
      }
    }
  }
}

For additional configuration for Vue CLI 3 for using project relative paths for image src props on various BootstrapVue components, refer to the Vue CLI 3 section of the Image Src Resolving reference page.

Individual components and directives

If you would like to only pull in a specific component or set of components, you can do this by directly importing those components.

To cherry pick a component/directive, start by importing it in the file where it is being used:

import BModal from 'bootstrap-vue/es/components/modal/modal'
import BModalDirective from 'bootstrap-vue/es/directives/modal/modal'

Then add it to your component definition:

Vue.component('my-component', {
  components: {
    'b-modal': BModal
  },
  directives: {
    'b-modal': BModalDirective
  }
  // ...
})

Or register them globally:

Vue.component('b-modal', BModal)
Vue.directive('b-modal', BModalDirective)

Vue and ES2015 allow for various syntaxes here, so feel free to utilize kebab-casing (shown), camelCasing, PascalCasing, and/or object property shorthand.

Component groups and Directives as Vue plugins

You can also import component groups and directives as Vue plugins by importing the component group or directive directory:

// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { Layout } from 'bootstrap-vue/es/components'
Vue.use(Layout)

// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { Modal } from 'bootstrap-vue/es/components'
Vue.use(Modal)

// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { Card } from 'bootstrap-vue/es/components'
Vue.use(Card)

// This imports directive v-b-scrollspy as a plugin:
import { Scrollspy } from 'bootstrap-vue/es/directives'
Vue.use(Scrollspy)

When importing as plugins, all subcomponents and related directives are imported in most cases. i.e. When importing <b-nav>, all the <nav-*> sub components are also included, as well all dropdown sub components. Component shorthand aliases (if any) are also included in the plugin.

Refer to the component and directive documentation for details.

webpack + Babel

When importing components/directives individually, you must configure your app to properly build the BootstrapVue library source code. This commonly involves white-listing the node module for your babel loader rule in webpack.

// webpack.config.js
const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          // Use `include` vs `exclude` to whitelist vs blacklist
          path.resolve(__dirname, 'src'), // Whitelist your app source files
          require.resolve('bootstrap-vue') // Whitelist bootstrap-vue
        ],
        loader: 'babel-loader'
      }
    ]
  }
}

Browser

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link
  type="text/css"
  rel="stylesheet"
  href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
/>

<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

Build Variants

Choosing the best variant for your build environment / packager helps less bundle sizes. If your bundler supports es modules, it will automatically prefer it over commonjs.

Variant Environments Package path
ES Module webpack 2 / rollup.js es/index.js
ESM Module webpack 2 / rollup.js dist/bootstrap-vue.esm.js or dist/bootstrap-vue.esm.min.js
commonjs2 webpack 1 / ... dist/bootstrap-vue.common.js or dist/bootstrap-vue.common.min.js
UMD Browser dist/bootstrap-vue.js or dist/bootstrap-vue.min.js

Migrating a project already using Bootstrap

If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to your project:

  • Remove the bootstrap.js file from your page scripts or build pipeline
  • If Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue does not depend on jQuery
  • Convert your native Bootstrap HTML markup into the simplified BootstrapVue custom component markup

Browser Support

CSS

BootstrapVue is to be used with Bootstrap 4 CSS/SCSS. Please see Browsers and devices for more information about browsers currently supported by Bootstrap 4.

JS

BootstrapVue is written in Vue.js! So this is up to your project and bundler which browsers are supported.

If you want to support older IE, Android and IOS devices, you may want to use Babel Polyfill:

  • npm install @babel/polyfill
  • Import it in your app main entry point with import '@babel/polyfill'

Tooling Support

VS Code + Vetur

If you are using VS Code as your text editor, BootstrapVue has intellisense autocompletion for component attributes available when using the Vetur extension.

Twitter: Vetur + BootstrapVue