Awesome Open Source
Awesome Open Source

vue-input-tag

A Vue.js 2.0 input tag component inspired in react-tagsinput

Codeship Status for matiastucci/vue-input-tag Coverage Status Version License Monthly Downloads

Logo

Installation

NPM / Yarn

npm install vue-input-tag --save
yarn add vue-input-tag

Then you need to import and register it:

import InputTag from 'vue-input-tag'
Vue.component('input-tag', InputTag)

CDN

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

Then you need to register it:

Vue.component('input-tag', vueInputTag.default)

Usage

<input-tag v-model="tags"></input-tag>

Props

Name Type Default Description
value 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
add-tag-on-blur Boolean false Add tag on input blur
limit String or Number -1 (none) Set a limit for the amount of tags
validate String or Function (allows async) or Object "" Apply certain validator for user input. Choose from email, url, text, digits or isodate. Or pass a function or a RegExp object for custom validation
add-tag-on-keys Array [ 13 (return), 188 (comma), 9 (tab) ] Keys that are going to add the new tag
allow-duplicates Boolean false Allow duplicate tags
before-adding Function null Function (allows async) to normalize tag before adding. E.g (tag) => tag.toUpperCase()

Events

Name Arguments Description
input Array with tags Emitted when a tag is added (after successful validation) and when a tag is removed
update:tags Array with tags Same as input event

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,539,019
Vue (83,390
Vuejs (10,125
Vuejs2 (2,603
Input (786
Tags (779
Vuejs Components (148
Related Projects