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

Example

Installation

NPM

npm install --save vuetagpicker

yarn

add vuetagpicker

You can import it in your app.js

import VueTagPicker from 'vuetagpicker'

Vue.use(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">
</tag-picker>

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

Result

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