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

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

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.

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.

NOTE: IF you have not set up your workspace yet you always can refer to these Tutorials to get started

  1. An introduction to Vue Framework?
  2. Getting Started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue
  5. Learn to make a ToDo List – Vue Component Creation
  6. Vue ToDo list with Delete Option & Global Event Bus – Part II
  7. How to Create Global Event Bus using Vue.js?
  8. Learn how to work with Computed Properties in VueJS
  9. How to Use Vue.js watchers for Async Updates?
  10. Make a Basic HTML Editor using Vuejs v-html directive
  11. Prevent XSS in Vue.js using Google Caja
  12. How does Event Handling work in Vue.js?

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

See the Pen Vue 2.x Components – Button Component by Shiv Kumar Ganesh (@shivkumarganesh) on CodePen.

Vue 2.x

Vue 2.x

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This