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
Number input component with controls

Vue Numeric Input Number input component based on Vue that is a replacement of native input number with optional control. Live Demo & Doc Installation

Jayesh Vachhani 64 Apr 19, 2021
Number input component for Vue.js.

Number input component for Vue.js.

Fengyuan Chen 136 Jul 7, 2021
Integer input with increment and decrement buttons for vue 2 - https://keiwen.github.io/vue-integer-plusminus/

vue-integer-plusminus Integer input with increment and decrement buttons Live demo here This component fits as spinbutton, allowing keyboard functiona

null 17 Jun 15, 2021
A number input with plus and minus buttons, as a Vue component.

Vue Minus Plus Input A number input with plus and minus buttons, as a VueJS component. demo: https://el7r.github.io/v-minusplusinput/example.html Basi

Manjunath Reddy 12 Jul 28, 2020