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

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

An introduction to Vue Framework?

Getting Started with Vue using Fiddle

Learn Fast Handling User Inputs & form bindings using Vue

Easily Bind Select and Multi-select using Vue

Learn to make a ToDo List — Vue Component Creation

Vue ToDo list with Delete Option & Global Event Bus — Part II

How to Create Global Event Bus using Vue.js?

Learn how to work with Computed Properties in VueJS

How to Use Vue.js watchers for Async Updates?

Make a Basic HTML Editor using Vuejs v-html directive

Prevent XSS in Vue.js using Google Caja

How does Event Handling work in Vue.js?

Vue2.x Badge/Pill Component

Vue.component("vue-pill", {
  props: ["text","pillStyle","pillable"],
  template: `<div class="badge align-middle align-text-top align-text-bottom" v-bind:class="[computedStyle,computedPills]">
{{text}} &nbsp;&nbsp;
<span class="clickable" v-on:click="emit">x</span>
</div>`,
  computed:{
    computedStyle:function(){
      return 'badge-'+this.pillStyle;
    },
    computedPills:function(){
      return (this.pillable === 'true') ? 'badge-pill' : '';
    }
  },
  methods: {
    emit: function() {
      this.$emit("pill_clicked", this.$el);
    }
  }
});

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

new Vue({
  el: "#app",
  data: {
    name:'',
    pills: [
      {
        id: 1,
        name: "JavaScript",
        style:'primary',
        pillable:"true"
      },
      {
        id: 2,
        name: "NodeJS",
        style:'danger',
        pillable:"true"
      },
      {
        id: 3,
        name: "C++",
        style:'info',
        pillable:"true"
      },
      {
        id: 4,
        name: "Android",
        style:'success',
        pillable:"false"
      },
      {
        id: 5,
        name: "Vue.js",
        style:'default',
        pillable:"false"
      }
    ]
  },
  methods: {
    removePills: function(id) {
      this.pills.splice(id,1)
    },
    addPills:function(){
      this.pills.push({
        id:this.pills.length,
        name:this.name,
        style:'primary'
      });
      this.name='';
    }
  }
});

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

<div id="app">
  <h1>
    <vue-pill v-for="(pill, index) in pills" 
v-on:pill_clicked="removePills(index)" 
:text="pill.name" 
:pill-style="pill.style" 
:pillable="pill.pillable"></vue-pill>
    </h1>
  <input type="text" v-model="name"><button v-on:click="addPills">Add Pills</button>
</div>

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

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

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

Originally published at The Web Juice.