To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to get started with BootstrapVue.
Getting Started
To get started we need Vue 2.6 or later. Bootstrap 4.3.1 is required. Popper.js is required for dropdowns, tooltips, and popovers. jQuery isn’t required.
Installation
To install it, we install the required dependencies by running:
npm install vue bootstrap-vue bootstrap
with NPM or:
yarn add vue bootstrap-vue bootstrap
with Yarn.
Then we can register the plugin by writing:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue } from "bootstrap-vue";
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
in main.js.
We called Vue.use on BootstrapVue to register the plugin globally.
Next, we add the CSS that’s required by BootstrapVue:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Then we get:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Picking Individual Components
If we only want to use individual components, then we can import them and add them to a component ourselves.
For instance, we can write:
<template>
<div id="app">
</div>
</template>
<script>
import { BModal } from 'bootstrap-vue'
export default {
name: "App",
components: {
'b-modal': BModal
}
};
</script>
Then we just imported the BModal component into our component.
We can also register a component globally.
For instance, we can write:
import Vue from "vue";
import App from "./App.vue";
import { BModal } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.component("b-modal", BModal);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then we only added the BModal component globally.
Alerts
Now, we can use the components in our app.
We can add an alert component by using the b-alert component.
We can write:
<template>
<div id="app">
<b-alert show>Alert</b-alert>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we get alert box in our component.
It also comes with various variants.
We can write:
<b-alert variant="success" show>Success</b-alert>
to create a success alert, which is green.
To add a dismissible alert, we can write:
<template>
<div id="app">
<b-alert v-model="showAlert" variant="danger" dismissible>Dismissible Alert!</b-alert>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
showAlert: true
};
}
};
</script>
We added the v-model directive to use the showAlert state to toggle the modal off.
We set showAlert to true initially so that we can see it.
The dismissible directive makes it dismissible. This means we see an ‘x’ that we can click to dismiss it.
We can create an alert that can be dismissed after some time by writing:
<template>
<div id="app">
<b-alert
:show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountDown = 0"
@dismiss-count-down="countDownChanged"
>
<p>alert will dismiss {{ dismissCountDown }} seconds...</p>
<b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px"></b-progress>
</b-alert>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
dismissCountDown: 15,
dismissSecs: 15
};
},
methods: {
countDownChanged(e){
this.dismissCountDown = e;
}
}
};
</script>
We added the dismissCountDown state which tracks the time before the alert is dismissed.
Variant 'warning' shows us a yellow alert.
The dismissed handler takes a condition of when the alert will be dismissed.
In this case, when dismissCountDown is 0.
We have the countDownChanged which takes an event parameter with the number of seconds left to set it to dismissCountDown to update the progress bar.
Avatar
We can add an avatar by using the b-avatar component.
We can use it by writing:
<template>
<div id="app">
<b-avatar></b-avatar>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we get a generic avatar.
To add initials to the avatar, we can write:
<template>
<div id="app">
<b-avatar variant="primary" text="AB"></b-avatar>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We set the variant to primary to show the blue color.
text has the initials that we want to display.
Also, we can set an image by writing:
<template>
<div id="app">
<b-avatar variant="info" src="https://placekitten.com/g/100/100"></b-avatar>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
to add an image to the avatar with the src prop.
Conclusion
We can add alerts and avatars easily with BootstrapVue.
It’s also easy to install.
