Versetile Tag Input Component For Vue 3

Install & Download:

# Yarn
$ yarn add @mayank1513/tag-input
# NPM
$ npm i @mayank1513/tag-input --save

Description:

A versatile and customizable tags input built with Vue 3 Composition API.

How to use it:

1. Install and import the tag input component.

import TagInput from '@mayank1513/tag-input'
import '@mayank1513/tag-input/dist/TagInput.css'

2. Add a basic tags input component to the template.

<template>
  <tag-input v-model="tags" />
</template>

export default {
  name: 'App',
  data() {
    return {
      tags: [],
    };
  },
  components: {
    TagInput,
  },
}

3. All default component props.

name: { type: String, default: "" },
modelValue: { type: Array, default: () => [] },
options: { type: Array, default: () => [] },
allowCustom: { type: Boolean, default: true },
showCount: { type: Boolean, default: false },
tagTextColor: { type: String, default: "white" },
tagBgColor: { type: String, default: "rgb(250, 104, 104)" },
tagClass: { type: String, default: "" },
customDelimiter: {
  type: [String, Array],
  default: () => [],
  validator: (val) => {
    if (typeof val == "string") return val.length == 1;
    for (let i = 0; i < val.length; i++) {
      if (typeof val[i] != "string" || val[i].length != 1) return false;
    }
    return true;
  },
},