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.
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.
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");
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.
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.
#programming #web-development #javascript #vue