Simple Vue libraries for adding input controls

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 packages let 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

We can also include the library from a script tag by writing:

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

Here is the code for main.js and App.js:

main.js
App.vue
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");

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

Then, we will use it in the App.vue file, as follows:

<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 name and value properties – the name property’s value will be displayed 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 packages lets us add a dropdown with various options.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Attributions:
  1. undefined by undefined
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)