Combining Vue.js and Bootstrap

When we were talking about Vue, we devoted a big section to its components. When we talked about Bootstrap, we also talked about components. Doesn't it ring the same bell? Maybe we could create Vue components out of Bootstrap components? Maybe we can! Actually, we have already done it! Open the code of the first chapter's PleaseIntroduceYourself application. Check what we have inside the components folder. There's something that we called MessageCard.vue. Actually, this is an implemented Vue component for Card Bootstrap's component (https://v4-alpha.getbootstrap.com/components/card/)!

Open the example13-vue-bootstrap-components-started/components folder. Let's use this project as a playground to create the Vue component based on the Bootstrap alert component. Run npm install and run:

cd example13-vue-bootstrap-components-started/components
npm install
npm run dev

Let's create a Vue component called Alert. This component will contain the necessary code to simulate Bootstrap's alert component behavior.

Create a file named Alert.vue inside the components folder and add template tags. Our alert will definitely have the alert class. However, its additional class (alert-danger, alert-info, etc.) should be something configurable. Also, its title and text should be something passed by bound properties from the parent component. Thus, the template for the alert component will look like this:

//Alert.vue
<template>
  <div class="alert":class="additionalClass" role="alert">
    <strong>{{title}}</strong>{{text}}
  </div>
</template>

Let's implement the additionalClass property as a computed property that will be calculated based on the type property passed by the parent component. So, the script for the Alert component will look like this:

//Alert.vue
<script>
export default {
 props: ['type', 'title', 'text'],
  computed: {
 additionalClass () {
 if (!this.type) {
 return 'alert-success'
 }
 return 'alert-' + this.type
 }
  },
  name: 'alert'
}
</script>

Then, we can call it from our main App.vue component:

//App.vue
<template>
  <div id="app" class="container">
    <img src="./assets/logo.png">
 <alert :title="title" :text="text"></alert>
  </div>
</template>

<script>
 import Alert from './components/Alert'
  export default {
    data () {
      return {
 title: 'Vue Bootstrap Component',
 text: 'Isn\'t it easy?'
      }
    },
    name: 'app',
    components: {
 Alert
    }
  }
</script>

You will end up with a nice alert on your page:

We just created our Alert Vue Bootstrap component

Exercise

Enable a default value for the title of the alert component. So, if the title is not passed, it will say Success by default. Also, bind the type property to the component on its creation inside the App.vue parent component. Export this property as a computed property depending on some arbitrary value. For example, based on some random number, if it's divisible by 3, the type should be danger; if it's divisible by 5, the type should be info; and so on.

Check it out yourself. Go to the example13-vue-bootstrap-components/components folder and have a look, in particular, at the App.vue and components/Alert.vue components.

Combining Vue.js and Bootstrap continued

So, we know how to create Vue components based on Bootstrap components. Doesn't it feel like now it would be great to create all the Bootstrap components as Vue components and just use them in our Vue applications without having to think about Bootstrap classes whatsoever? Imagine Vue components such as <button-success></button-success> or <button :type="success"></button>. We could even create a whole library of Vue components based on Bootstrap! The question is, should we do it if it already exists? Yes, someone has already done all the work for us. These are the people who have done the work:

Core team of bootstrap-vue

These nice people have developed something called Bootstrap-Vue and that's something that does exactly what you think—it contains a full set of Bootstrap components implemented as Vue.js components. Check it out at https://bootstrap-vue.github.io/.

Let's check, for example, how the alert component is implemented at https://bootstrap-vue.github.io/docs/components/alert. It's a little bit more detailed than our alert. The data is passed within the component's tags and not as properties, like in our case, which also makes it more flexible. We will use it a lot while developing our application throughout the book.