Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some simple Vue packages for adding rich input controls to our Vue apps.

vue-input-tag

The vue-input-tag package lets us add an input control to let users enter multiple tags.

We can install the Node package version by running:

npm install vue-input-tag --save

Also, we can include the library from a script tag by writing:

<script src="https://unpkg.com/vue-input-tag"></script>

Then we can use it as follows:

main.js

import Vue from "vue";  
import App from "./App.vue";  
import InputTag from "vue-input-tag";  
Vue.component("input-tag", InputTag);

Vue.config.productionTip = false;

new Vue({  
  render: h => h(App)  
}).$mount("#app");

App.vue

<template>  
  <div id="app">  
    <input-tag v-model="tags"></input-tag>  
    <p>{{tags}}</p>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return { tags: [] };  
  }  
};  
</script>

In the code above, we registered the vue-input-tag plugin in main.js . Then we just add the input-tag component from the package into our component.

In the component object, we have the data method that returns an object with the tags model, which is an array.

Then when we enter the tags, we see them displayed below the input.

In addition to the v-model directive to bind the data, it also takes the following props:

• value — an array of tags to be rendered in the input
• placeholder — a string for the placeholder
• read-only — boolean to set the input to read-only
• add-tag-on-blur — Boolean to indicate whether to add the tag when the input control loses focus
• limit — string or number to set a limit on the number of tags
• validate — validator for user input. We can choose from email , url , text , digits , or isodate , or we can pass in a function or regex object for custom validation
• add-tag-on-keys — an array of keys that are going to be added to new tags
• allow-duplicates — boolean to indicate whether we want to allow duplicate tags
• before-adding — a sync or async function that lets us normalize tag before adding

We can use some of these props as follows:

<template>  
  <div id="app">  
    <input-tag v-model="tags" :before-adding="toUpperCase"></input-tag>  
    <p>{{tags}}</p>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return { tags: [] };  
  },  
  methods: {  
    toUpperCase(v) {  
      return v.toUpperCase();  
    }  
  }  
};  
</script>

In the code above, we added the toUpperCase method that converts whatever we entered to uppercase before setting the value in our model property.

So everything entered will become uppercase automatically.

vue-dropdowns

vue-dropdowns is a simple Vue package that lets us add a dropdown without writing all the code from scratch.

It’s very simple and doesn’t have many configuration options.

To install it, we run:

npm install vue-dropdowns

to install the Node package.

Then we can use it as follows:

App.vue :

<template>  
  <div id="app">  
    <dropdown  
      :options="arr"  
      :selected="object"  
      v-on:updateOption="onSelect"  
      placeholder="Select"  
      :closeOnOutsideClick="true"  
    ></dropdown>  
    <p>{{object}}</p>  
  </div>  
</template>

<script>  
import dropdown from "vue-dropdowns";

export default {  
  name: "App",  
  data() {  
    return {  
      arr: [  
        {  
          name: "Foo",  
          value: "foo"  
        },  
        {  
          name: "Bar",  
          value: "bar"  
        },  
        {  
          name: "Baz",  
          value: "baz"  
        },  
      ],  
      object: {}  
    };  
  }, 
  components: {  
    dropdown: dropdown  
  }, 
  methods: {  
    onSelect(payload) {  
      this.object = payload;  
    }  
  }  
};  
</script>

In the code above, we imported the dropdown component from the package. Then we added the onSelect method to set this.object to the value that’s selected from the dropdown.

In the data method, we return an object with an array of options for our dropdown. Each entry on arr has the name and value properties, where the name property’s value will be displayed from in the dropdown.

We set arr as the value of the options prop to populate the dropdown with the items from arr .

selected binds to the selected value, which is compared deeply instead of using === to do the comparison.

v-on:updateOption runs an event handler when an item is selected. In this case, it’ll be the onSelect method that we defined. The payload parameter has the selected item.

placeholder is the placeholder for the dropdown. closeOnOutsideClick is set to true so that it’ll close when we click outside.

Then when selecting something from the dropdown, we’ll see the object of the selected item displayed.

Conclusion

vue-input-tag provides us with an input control that lets us enter tags.

The vue-dropdowns package lets us add a dropdown with various options.