Vue Tagsinput

Overview:

Voerro Vue Tags Input v2 is a simple tags input component built with Vue.js 2. It provides functionalities like typeahead for easy tag input. The component can be installed via NPM or CDN, and it allows for customization of the appearance through styling.

Features:

• Simple Tags Input: Easily input tags with typeahead support.
• Installation Options: Can be installed via NPM or CDN depending on the preference.
• Custom Styling: Ability to customize the appearance through the provided styling options.
• Programmatic Tag Manipulation: Set or change selected tags programmatically.
• Flexible Data Structure: Allows customization of field names for tag collections.

Installation via NPM:

npm install @voerro/vue-tagsinput@2

Then register the component with Vue:

import Vue from 'vue';
import { VueTagsInput } from '@voerro/vue-tagsinput';
Vue.component('tags-input', VueTagsInput);

Include the dist/style.css file on your page to apply the styling.

Installation via CDN:

If you prefer not to use NPM, include the following from a CDN:

<link rel="stylesheet" href="path/to/dist/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput"></script>

Usage:

• Use element-id to apply to id and name attributes of the hidden input containing selected tags.
• Optionally, use v-model to bind a variable to the array of selected tags.
• Define existing-tags even when not using typeahead.
• Programmatically set or change selected tags by modifying the bound variable.
• Customize field names using props id-field and text-field for existing and selected tags collections.

Summary:

Voerro Vue Tags Input v2 is a handy component for adding tag input functionality to Vue.js 2 projects. It offers simple installation options, customization for styling, and flexibility in managing selected tag data. With features like typeahead and programmatically setting tags, it provides a convenient solution for tag inputs in Vue.js applications.