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.
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 Bootstrap-Vue app</title>
<!-- Required Stylesheets -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/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="Bootstrap Vue"
lead="Bootstrap 4 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>
webpack-simple
exampleStarter template: https://github.com/bootstrap-vue/webpack-simple
Note: you may need to adjust the template package.json file to use the latest Bootstrap-Vue version
Coming soon!
webpack
exampleStarter template: https://github.com/bootstrap-vue/webpack
Note: you may need to adjust the template package.json file to use the latest Bootstrap-Vue version
Coming soon!
If you are using a build system, and would like to customize the Bootstrap V4 CSS, the following references will be handy starting points:
There are a few methods that you can use to import individual components and directvies.
You will need vue-loader
configured to handle the compiling any components that are
internally single file .vue
components.
The Bootstrap-Vue 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 Bootstrap-Vue repo source
the directories will be created when you run yarn build
.
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 bCardHeader from 'bootstrap-vue/es/components/card/card-header';
import bCardBody from 'bootstrap-vue/es/components/card/card-body';
import bCardFooter from 'bootstrap-vue/es/components/card/card-footer';
import bCardImage from 'bootstrap-vue/es/components/card/card-footer';
import bTable from 'bootstrap-vue/es/components/table/table';
// Add components globally:
Vue.component('b-card', bCard);
Vue.component('b-card-header', bCardHeader);
Vue.component('b-card-body', bCardBody);
Vue.component('b-card-footer', bCardFooter);
Vue.component('b-card-img', bCardImg);
Vue.component('b-table', bTable);
// Or make available to your compoent or app:
export default {
components: {
bCard,
bCardHeader,
bCardBody,
bCardFooter,
bCardImg,
bTable
},
// ...
}
A compoent group, and/or directive, can be imported as a Vue plugin, by importing
the component group or directive directory. Impoting <b-card>
(and its related
sub-components) and <b-table>
can simply be done as:
// 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 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 compoents and the dropdown sub components).
Refer to the component reference or directive reference at the bottom of each
documenttion page for details.