Bootstrap 4 components for Vue.js 2
Please refer to Official Documentation for setup guide, examples and documentation.
Get it via your favorite package manager:
# Using YARN
yarn add bootstrap-vue
# Using NPM
npm install --save bootstrap-vueThen register components in your app entrypoint:
import Vue from 'vue'
// ES build is more efficient by reducing unneeded components with tree-shaking.
// (Needs Webpack 2 or Rollup)
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
// Use commonjs version if es build is not working
// import BootstrapVue from 'bootstrap-vue';
// Import styles if style-loader is available
// You have to manually add css files if lines below are not working
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Globally register components
Vue.use(BootstrapVue);Package size is about 100kb (20kb gzipped)
<!-- 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/bootstrap-vue@latest/tether/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>NUXT.JS
If you are using nuxt.js, you can easily register bootstrap-vue components using nuxt helpers.
Choosing the best variant for your build environment / packager helps less bundle sizes using tree-shaking.
| 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 |
Playground
If you want to play with BootstrapVue components without any local setup just head to OnlinePlayground and you can interactively play and test components with a fresh vue instance. If you want to keep your changes or make PRs reporting components misbehaviour you can save them in JSFiddle and provide that link in issues.
Also if you want to hack and improve components locally, you can follow this steps:
Common part:
- Clone this repo.
- Make sure you have node & yarn installed locally.
- Run
yarn installto get all dependencies installed.
Playground:
- Run
yarn docs-devto run local development server. - Head to
http://localhost:3000/play. - Now you can locally make changes to components (they are located at
componentsdirectory). Changes will be applied with webpack hot-reloading without need to reload page. - Finally feel free to share your awesome hacks with others and opening a PR.
Inside your project
If you want to see your changes in your project instead of playground:
- Invoke
yarn linkinside bootstrap-vue directory. - In your project run
yarn link-bootstrap-vue - Run
yarn watchinside bootstrap-vue - Now every time you change a component, a new production version will be built and ready on your project.
The MIT License (MIT) - Copyright (c) 2016-present Pooya Parsa.
Designed and built with all the love in the world.
Maintained by the core team with the help of our contributors.