Vue 3 Tags Input Component With Validation And Custom Styles

Install & Download:

# Yarn
$ yarn add vue3-tags-input
# NPM
$ npm i vue3-tags-input

Description:

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.

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
},
duplicateSelectItem: {
  type: Boolean,
  default: true
},
uniqueSelectField: {
  type: String,
  default: 'id'
},
addTagOnKeysWhenSelect: {
  type: Boolean,
  default: false
},