Playing with a Tag Picker for Vue.js

Vue Tag Picker

This is a Vue.js component for accepting many dynamic input items from the user. This could be used for filtering or adding tags/categories (as the name suggests). This was originally written as a Knockout component but I needed the same functionality in Vue.

There is already a working demo available:

Vue Tag Picker Demo




npm install --save vuetagpicker


add vuetagpicker

You can import it in your app.js

import VueTagPicker from 'vuetagpicker'


and use it in a component

export default {        
    name: 'my-component',           
    data() {        
        return {        
            tags: ['This', 'is', 'Sparta', '!!!']
    methods: {      
    //event callback
        updatedTags(newTags) {      
            this.tags = newTags;    

Using the tag-picker

<label>Adding tags/categories</label>
<tag-picker :tags-list="tags" v-on:changed="updatedArrayTags" tag-colour="#3466db" borderColor="blue">

There is also a list with the available list of props which can be used.


That's it! If you are interested for more, you can find this project's repo here.