Creating Button Component Using Bootstrap 4 and Vue.js

Custom Button with Bootstrap 4 and Vue.js

In this article, we will create a button component. This component takes its styles from Bootstrap 4. Since there are so many different classes and parameters in a button to handle, we will create a component to do so. This component will be Bi-Directionally bindable and also be used in different other places. No modifications will be required in order to use this. The output for the same will look as follows:-

Vue.js and Bootstrap 4 custom component

The various properties that we will be handling are as follows:-

1. btnText — Contains Button Text
2. size — Size of the Button
3. type — Various Style Types eg primary, danger, success etc.
4. outline — outline buttons with outline class eg primary, danger, success etc
5. active — It is Boolean and Determines whether the button is Active or not
6. block — It is a Boolean and makes the button block level element.

The Vue.js component for this particular implementation goes as shown below

Vue.component("vue-button", {
  props: ["btnText", "size", "type", "outline", "active", "block"],
  template: `<button type="button" class="btn" :class='[computedType,computedOutline,computedSize,computedActive,computeBlock]'>{{btnText}}</button>
`,
  computed: {
    computedType: function() {
      return "btn-" + this.type;
    },
    computedOutline: function() {
      return "btn-outline-" + this.outline;
    },
    computedSize: function() {
      return "btn-" + this.size;
    },
    computedActive: function() {
      return this.active === "true" ? "active" : "";
    },
    computeBlock: function() {
      return this.block === "true" ? "btn-block" : "";
    }
  }
});

Let’s take a closer look at the code and try to understand what has been done.

1. We went ahead and declared the properties that we wanted to keep a control on like btnText, Size, Type, Outline, Active & Block (These are typical classes from Bootstrap 4)
2. We implemented Computed block for most of the values so that properly formatted classes can go into the templates. You can see the Class Implementation is in a form of an Array. You can also Explore on Style Binding here.
3. The Computed Values play a major role in appending Classes to the Class Array and get the button the look and feel that is required.

This example Gives us a solid understanding about the Computed Properties and how it takes into consideration properties of the component as well as the properties from the data block while computing the values.

Now let’s see the bootstrapping code in Vue.js.

new Vue({
  el: "#app",
  data: {
    buttonLabel: "Login",
    buttonType:"primary",
    bigButton:{
      label:"Big Button Label",
      type:"warning",
      size:"lg",
      active:"true",
      block:"true"
    }
  },
});

The HTML is the most simple yet a part which should be paid attention to. If you see the above block of code you might be clear how the different values are Bi-Directionally bound. Let’s have a look at the HTML code as well.

<div id="app">
  <!--The Different Properties that we will be dealing with while using buttons are as follows:-
1. btnText - Contains Button Text
2. size - Size of the Button
3. type - Various Style Types eg primary, danger, success etc.
4. outline - outline buttons with outline class eg primary, danger,success etc
5. active - It is Boolean and Determines whether the button is Active or not
5. block - It is a Boolean and makes the button block level element.

-->
  <br>
  <div class="container">
    <h3>Simple Binded Buttons</h3>
    <vue-button btn-text="Primary" type="primary"></vue-button>
    <vue-button btn-text="Secondary" type="secondary"></vue-button>
    <vue-button btn-text="Success" type="success"></vue-button>
    <vue-button btn-text="Info" type="info"></vue-button>
    <vue-button btn-text="Warning" type="warning"></vue-button>
    <vue-button btn-text="Danger" type="danger"></vue-button>
    <vue-button btn-text="Link" type="link"></vue-button>
    <hr>
    <h3>Bi-Directional Binding for Buttons</h3>
    <vue-button :btn-text="buttonLabel" :type="buttonType"></vue-button>
    <hr>
    <h3>Other Properties for a Button</h3>
    <vue-button :btn-text="bigButton.label" :type="bigButton.type" :size="bigButton.size" :active="bigButton.active" :block="bigButton.block"></vue-button>
  </div>
</div>

We have the full code in action out here in our CodePen. Have a look at the running sample.

Vue 2.x

Originally published at The Web Juice.