Adding And Removing Tags – vue-tags-component

Adding And Removing Tags – vue-tags-component

A Vue.js 2 tags component that allows adding and removing tags.


Latest Version on NPM Software License npm

The package contains a Vue.js component for adding and removing tags.


  • keyboard control
  • search
  • events
  • tabindex
  • colored tags
  • tags creation


You can install the package via npm:

$ npm install --save vue-tags-component

or yarn:

$ yarn add vue-tags-component


The most common use case is to register the component globally:

import Vue from 'vue';
import { VueTags } from 'vue-tags-component';

Vue.component('vue-tags', VueTags);

On your page you can now use html like this:

    :tag-list-label="'Select an option'"
    :placeholder="'Select an option'"

All props and events are indicated in the example above. Tags should look like this:

        "id": 1,
        "name": "Tag",
        "slug": "tag (optional)",
        "color": "#963dff (optional)"


  • ~~Closing the drop-down list when clicking outside the component.~~
  • ~~Make the functionality of creating a new tag, add a tag creation event. Make this functionality optional (the ability to enable via props).~~
  • To think up a convenient way of styling (redefining standard styles or some other way).
  • Adaptive layout.
  • Animation.
  • ~~Placeholder for the search string (do you need?). Show the placeholder only when no tag is selected.~~
  • ~~tagColorDefault prop validation.~~



Called when the tag is added to the active list, it passes the tag object.


Called when the tag is removed from the active list, it passes the tag object.


Called when opening a list of tags.


Called when the list of tags is closed.


Called when a new tag is created, it passes the tag object with id = 0 (the identifier must be changed, since 0 denotes the tag to create). The component does not process the slug field of the tag, slug will be equal to the name of the tag, you can process it as you need (for example, tag.slug.toLowerCase (). Replace (/ / g, '_')).

Github Repository

Tags: #VueJs