A versetile tag input component built with Vue 3 Composition API

Related tags

tag-input
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

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
International Telephone Input with Vue.

International Telephone Input with Vue

Steven Dao 462 Jul 19, 2021
Easy input of currency formatted numbers for Vue.js.

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

Matthias Stiller 335 Jul 22, 2021
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 77 Jul 16, 2021
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 Oct 27, 2020
An ip input implament by vuejs

vue-ip-input An ip input implement by vue 2.0 Demo Demo Usage Install npm install vue-ip-input --save CommonJS var VueIpInput = require('vue-ip-input'

LinBin 24 Jul 12, 2021
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 85 Jun 29, 2021
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 作为全局组

Obeta 65 Nov 3, 2020
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 75 Jun 17, 2021
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 438 Jul 8, 2021
A pattern-placeholder for Vue that changes based on input text.

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

Victor 5 Jul 6, 2020
Tiny (<2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.4k Jul 18, 2021
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 372 Jul 22, 2021
Vue.js component for Cleave.js :keyboard:

Vue Cleave Component Vue.js component for Cleave.js Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 2.x 2.x 3.x 3.x master F

Ankur Kumar 279 Jul 19, 2021
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

Simon Cleriot 115 Jul 7, 2021