Vue Input Tag

Overview:

The vue-input-tag is a Vue.js 2.0 input tag component inspired by react-tagsinput. It allows users to easily input tags and comes with various features for customization.

Features:

• value: Array of tags to render in the input.
• placeholder: Placeholder text shown when the input is empty.
• read-only: Option to set the input to readonly.
• add-tag-on-blur: Ability to add a tag when the input is blurred.
• limit: Set a limit for the number of tags that can be added.
• validate: Apply validation rules for user input such as email, URL, text, digits, or custom validation.
• add-tag-on-keys: Specify keys (e.g., return, comma) that will add a new tag.
• allow-duplicates: Option to allow duplicate tags.
• before-adding: Function to normalize tags before adding.

Installation:

To install vue-input-tag, you can use npm or yarn:

npm install vue-input-tag

Import and register the component in your Vue app:

import Vue from 'vue';
import VueInputTag from 'vue-input-tag';

Vue.component('input-tag', VueInputTag.default);

Summary:

The vue-input-tag component for Vue.js provides a convenient way to input tags with various customization options like validation, limits, and normalization functions. By following the installation guide and utilizing the key features, developers can enhance the tag input experience in their Vue.js applications.