Vue 3 Tags Input Component With Validation And Custom Styles

A simple yet powerful tags input component that can be easily integrated into any Vue 3 project.

It supports custom styles, so you can easily match it to the look and feel of your application.

How to use it:

1. Import and register the tags input component.

import { defineComponent } from 'vue';
import Vue3TagsInput from 'vue3-tags-input';

export default defineComponent({
  components: {
    Vue3TagsInput
  },
  data() {
    return {
      tags: ['VUE', 'HTML', 'CSS']
    }
  },
})

2. Add the vue3-tags-input to the template.

<template>
  <vue3-tags-input :tags="tags" placeholder="Type Your Tags.." />
</template>

3. Available props.

readOnly: {
  type: Boolean,
  default: false
},
modelValue: {
  type: String,
  default: '',
},
validate: {
  type: [String, Function, Object],
  default: ""
},
addTagOnKeys: {
  type: Array,
  default: function () {
    return [
      13, // Enter
      188, // Comma ','
      32, // Space
    ];
  }
},
placeholder: {
  type: String,
  default: ''
},
tags: {
  type: Array,
  default: () => []
},
loading: {
  type: Boolean,
  default: false
},
limit: {
  type: Number,
  default: -1
},
allowDuplicates: {
  type: Boolean,
  default: false
},
addTagOnBlur: {
  type: Boolean,
  default: false
},
selectItems: {
  type: Array,
  default: () => []
},
select: {
  type: Boolean,
  default: false
},

Preview:

Changelog:

01/07/2023

• Bugfix

Download Details:

Author: chinh12hy

Live Demo: https://vue3-tags-input.netlify.app/examples/basic

Download Link: https://github.com/chinh12hy/vue3-tags-input/archive/refs/heads/main.zip

Official Website: https://github.com/chinh12hy/vue3-tags-input

Install & Download:

# Yarn
$ yarn add vue3-tags-input

# NPM
$ npm i vue3-tags-input