Vue.js Component for Adding and Removing Tags

vue-tags-component is a Vue.js 2 tag component that allows adding and removing tags.

vue tags input, how to add and remove class in vue js, vue event add class, vue classlist add, vue class from method, vue refs add class


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

[API] A Versatile Tag Input Component Built With Vue 3 | TagInput

How to make use of it:


$ npm install --save vue-tags-component
or yarn:
$ yarn add vue-tags-component

1. 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);

2. On your page you can now use the html like this:

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

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

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



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.


adding and removing tags, vue-tags-component Plugin/Github, vue pass class to component, how to remove tags in html

See Demo And Download

Official Website(ek0t0v): Click Here

This superior jQuery/javascript plugin is developed by ek0t0v. For extra advanced usage, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…