Starter Templates
There are several ways you can create your app, from basic client side HTML all the way up to using a build system and compilers.
In all cases, you should have familiarity with using Vue. A good resource for Vue tutorials is Laracasts.
Basic example
Get started quickly without the need for a build system, by using standard <script>
and <link>
tags to load the required JavaScript and CSS in your page.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>My first BootstrapVue app</title>
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<!-- Our application root element -->
<div id="app">
<b-container>
<b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
<p>For more information visit our website</p>
<b-btn variant="primary" href="https://bootstrap-vue.js.org/">More Info</b-btn>
</b-jumbotron>
<b-form-group
horizontal
:label-cols="4"
description="Let us know your name."
label="Enter your name"
>
<b-form-input v-model.trim="name"></b-form-input>
</b-form-group>
<b-alert variant="success" :show="showAlert">Hello {{ name }}</b-alert>
</b-container>
</div>
<!-- Start running your app -->
<script>
window.app = new Vue({
el: '#app',
data: {
name: ''
},
computed: {
showAlert() {
return this.name.length > 4 ? true : false
}
}
})
</script>
</body>
</html>
Vue CLI 2
webpack-simple
example
Starter template: https://github.com/bootstrap-vue/webpack-simple
Note: you may need to adjust the template package.json file to use the latest BootstrapVue version
Coming soon!
webpack
example
Starter template: https://github.com/bootstrap-vue/webpack
Note: you may need to adjust the template package.json file to use the latest BootstrapVue version
Coming soon!
Vue CLI 3
Vue CLI 3 is the newest way to create Vue apps.
A Vue CLI 3 BootStrapVue plugin is available for setting up a basic app. refer to the Getting Started docs page for more details.
Building with customized Bootstrap v4 CSS
If you are using a build system, and would like to customize the Bootstrap v4 CSS, the following references will be handy starting points:
- Article on Integrating and Customising Bootstrap v4 in vue-js hosted on medium.com
- Official Bootstrap Theming Bootstrap guide
Individual component import
There are a few methods that you can use to import individual components and directives.
You will need vue-loader
configured to handle the compiling any components that are internally
single file .vue
components.
The BootstrapVue distribution now includes ES
modules for all components and directives. These are
located in the bootstrap-vue/es/components/
and bootstrap-vue/es/directives/
directories, when
using the NPM bundle. When building from the BootstrapVue repo source the directories will be
created when you run yarn build
.
Importing individual components and directives as ES modules
Components and directives appear in sub directories, grouped by functionality. As an example, you
can import <b-card>
(plus it's sub components) and <b-table>
as follows:
// Import the individual components
import BCard from 'bootstrap-vue/es/components/card/card'
import BCardBody from 'bootstrap-vue/es/components/card/card-body'
import BCardFooter from 'bootstrap-vue/es/components/card/card-footer'
import BCardHeader from 'bootstrap-vue/es/components/card/card-header'
import BCardImg from 'bootstrap-vue/es/components/card/card-img'
import BTable from 'bootstrap-vue/es/components/table/table'
// Add components globally
Vue.component('b-card', BCard)
Vue.component('b-card-body', BCardBody)
Vue.component('b-card-footer', BCardFooter)
Vue.component('b-card-header', BCardHeader)
Vue.component('b-card-img', BCardImg)
Vue.component('b-table', BTable)
// Or make available to your component or app
export default {
components: {
BCard,
BCardBody,
BCardFooter,
BCardHeader,
BCardImg,
BTable
}
// ...
}
Importing component groups and directives as Vue plugins
A component group and/or directive can be imported as a Vue plugin by importing the component group
or directive directory. Importing <b-card>
(and related sub-components) and <b-table>
can be
done with:
// Import the components as Vue plugins
import { Card, Table } from 'bootstrap-vue/es/components'
// Add the plugins to Vue
Vue.use(Card)
Vue.use(Table)
Now you can use the <b-card>
(including the <b-card-*>
sub-components) and <b-table>
components in your project templates.
Note that some component plugins automatically import other directives and components (i.e. the
modal
plugin also imports the v-b-modal
directive, and nav
plugin automatically imports all
nav-*
sub-components and the dropdown sub-components). Refer to the component reference or
directive reference at the bottom of each documentation page for details.