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

vue-input-tag

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:

Installation

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: {
    InputTag
  }
}

tagsArray can contain the default tags

<template>
  <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>
  </div>
</template>

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

Props

  • 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

Demo

Find it on GitHub.