Apply custom tags using this Vue.js 2.0 Input Tag Component


Vue.js 2.0 input tag is a component inspired by react-tagsinput. Install it in your app to use custom tags as you see fit.

Usage example:


npm install vue-input-tag --save

Import it in your component:

import InputTag from 'vue-input-tag'

export default {
  name: 'app',
  data () {
    return {
      tagsArray: [ 'Vue.js', 'Feed', 'News', 'Tutorials' ]
  components: {

tagsArray can contain the default tags

  <div id="app">
      <h1>Vue.js 2.0 input tag component</h1>
    <input-tag :on-change="callbackMethod" :tags="tagsArray" placeholder="Put your tags here"></input-tag>

Use the input-tag component, additional props can be used


  • tags: Array [], Tags to be render in the input
  • placeholder: String "", Placeholder to be shown when no tags
  • read-only: Boolean false, Set input to readonly
  • on-change: Function undefined, Callback to get the tags when there is a change

Output of the examle code


Find it on GitHub.