Badge/Pill Component using Vue.2x and Bootstrap 4

Be it be Badge or a Pill, they are required in most of the places and play a major role in any application. So let’s create one single component just like Todo, using the styles from Bootstrap 4 and create a Badge component which will take several parameters in order to add additional behavior. We will also add up bi-directional data binding in order to make it fully data driven. Our Badge component will have three properties namely

  1. text – Name of the pill that will be displayed using this property
  2. pillStyle – The various Bootstrap 4 styles can be configured using this parameter like primary, info, danger etc
  3. pillable – Whether the component should have a rounded corner and look like a capsule.

Now let’s see the way this can be implemented, we will take a simple JSON to repeat the data in order to generate this Badges/Pills. Let’s jump into the code itself.

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?

Vue2.x Badge/Pill Component

In the above code, the props section has three properties that are bound to the component. You can also see that the template has a Class Binding which will help us in switching classes. The span in the template acts as a clickable entity which helps us to propagate the event to the parent element. Once this is configured then the entire thing becomes pretty easy to handle. Now let’s create the main app container and the HTML code that will allow us to work with it.

Vue2.x App

In the above sample JSON Array, you can see the different properties that are being passed to the component. Now let’s see the HTML Code.

HTML

You can see how the v-for works seamlessly to repeat the component with various configurations. You can also see how we have handled the Parent Child Communication by catching the event pill_clicked.  For the purpose of demonstration, we have also added an input field that will help you to add new pills into the system. The GIF animation for the same is added below. Have a look at this demonstration.

Pill Component using Vue.2x, Bootstrap 4

Pill Component using Vue.2x, Bootstrap 4

You can also have a look at the Codepen out here below.

See the Pen Vue 2.x Badge Component using Bootstrap 4 by Shiv Kumar Ganesh (@shivkumarganesh) on CodePen.

Hope this example gives you an insight on how to create a simple component and how it can be configured to the extent required.

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