If you are using module bundlers such as Webpack, Rollup, Laravel elixir/mix, etc you may prefer to directly include the package into your project. To get started, use yarn or npm to get latest version of bootstrap-vue and bootstrap 4:
# With NPM:
npm i bootstrap-vue bootstrap@4.0.0-beta.2
# With Yarn:
yarn add bootstrap-vue bootstrap@4.0.0-beta.2
Then, register BootstrapVue plugin in your app entry point:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
And import css files from both Bootstrap 4 & Bootstrap-Vue:
Note: requires webpack configuration to load css files (official guide)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Note: If you are unable or do not want to add additional packages to dev dependency, you have to
manually include both Bootstrap
and BootstrapVue CSS files
in your bundle or reference them from static/ via index.html.
Install dependencies:
# With NPM:
npm i bootstrap-vue bootstrap@4.0.0-beta.2
# With Yarn:
yarn add bootstrap-vue bootstrap@4.0.0-beta.2
Add bootstrap-vue/nuxt to modules section of nuxt.config.js
{
modules: [
'bootstrap-vue/nuxt',
// Or if you have custom bootstrap CSS...
['bootstrap-vue/nuxt', { css: false }],
]
}
Bootstrap-Vue has two vue-cli templates available:
# Ensure vue-cli is installed and up to date
npm i -g vue-cli
# Initialize a bootstrap 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.
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), camel-casing, pascal-casing, and/or object property shorthand.
You can also import component groups and directives as Vue plugins by importing the component group or directive directory:
// 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.
Refer to the component and directive documentation for details.
When importing components/directives individually, you must configure your app to properly build the bootstrap-vue 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 white-list vs black-list
path.resolve(__dirname, "src"), // white-list your app source files
require.resolve("bootstrap-vue"), // white-list bootstrap-vue
],
loader: "babel-loader"
}
]
}
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
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 | dist/bootstrap-vue.esm.js |
| commonjs2 | Webpack 1 / ... | dist/bootstrap-vue.common.js |
| UMD | Browser | dist/bootstrap-vue.js |
If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to your project:
bootstrap-vue.css file!BootstrapVue is to be used with Bootstrap 4 CSS. Please see Browsers and devices for more information about browsers currently supported by Bootstrap 4.
BootstrapVue is written in Vue! 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
You'll need babel-polyfill for BootstrapVue to work properly. In order to support this browser:
npm install babel-polyfillimport 'babel-polyfill'If you are using vscode as your text editor, bootstrap-vue has intellisense autocompletion for component attributes available when using the vetur extension.