A versetile tag input component built with Vue 3 Composition API

Overview

TagInput

tag-input.gif

A versetile tag input component built with Vue 3 Composition API.

Please read this article to learn how to build this package step by step and the background story.

To learn vue js please check out our courses Vue.js Complete Course + Guide and Vue 3 Essentials

Follow us on FaceBook to get the latest discount coupons and update to our articles and packages.

To keep it thin and performant we have chosen to provide only the minified version. Because, that's what you really need. In case you are looking for the full version build your own from this source code as per Build section.

live demo

Install

npm

npm i @mayank1513/vue-tag-input --production

or

pnpm i @mayank1513/vue-tag-input --production

or

yarn add @mayank1513/vue-tag-input --production

Add dependency in package.json

    "@mayank1513/vue-tag-input": "^0.0.3"

cdn

">
    
    
    

Usage

npm

... ">



cdn

basic usage

Document
">




    
    
    
    Document
    
    
    



    

advanced usage

Document

Presents

Vue Tag Input


Default options


Use enter key or tab key to create a new tag.

With custom delimiter and colors


Use enter key or tab key or any of the custom delimeters to create a new tag.

Custom delimiters: "{{delim}}"


Do not allow custom tags


Try entering tag that is not in options and hit enter
Use enter key or tab key or any of the custom delimeters to create a new tag.

Allowed Tags: "{{tag}}"

Custom delimiters: "{{delim}}"


Provide options for autofill but also allow custom tags


Use enter key or tab key or any of the custom delimeters to create a new tag.

Allowed Tags: "{{tag}}"

Custom delimiters: "{{delim}}"


">




    
    
    
    Document
    
    
    
    



    

Presents

Vue Tag Input


Default options


Use enter key or tab key to create a new tag.

With custom delimiter and colors


Use enter key or tab key or any of the custom delimeters to create a new tag.

Custom delimiters: "{{delim}}"


Do not allow custom tags


Try entering tag that is not in options and hit enter
Use enter key or tab key or any of the custom delimeters to create a new tag.

Allowed Tags: "{{tag}}"

Custom delimiters: "{{delim}}"


Provide options for autofill but also allow custom tags


Use enter key or tab key or any of the custom delimeters to create a new tag.

Allowed Tags: "{{tag}}"

Custom delimiters: "{{delim}}"


Build

To build the example clone the repo git clone https://github.com/mayank1513/tag-input.git and run

npm i && npm run build
// or
pnpm i && npm run build 

Help us to help you more

Contribute for a Cause

You might also like...
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

A Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

A tags input component for VueJS

A tags input component for VueJS

Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Input mask for React, Angular, Ember, Vue, & plain JavaScript
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Releases(v0.0.3)
Owner
Mayank
Passionate Developer and Researcher. Coming from academic and research background, and actively involved in designing simulation tools and app development.
Mayank
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
ImsKeywordBox: incredible keyword/tag editor for Vue.js

ImsKeywordBox: incredible keyword/tag editor for Vue.js

null 1 Jul 19, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022