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.

#programming #web-development #javascript #vue