vue-tagger

Simple tagging component for Vue with built-in autocomplete.

Note: This component was specifically built for Astral, and while it's fairly general purpose, it omits many features of a fully-fledged tagging component. It's unlikely that I will add any additional features unless I personally need them.

Install

$ yarn add vue-tagger

or

$ npm install vue-tagger --save

Usage

<template>
  <div class="my-component">
    <vue-tagger :tags="tags" @change="logTags" :placeholder="'Enter a tag...'" :delimiter="','"></vue-tagger>
  </div>
</template>
<script>
import VueTagger from 'vue-tagger'
export default {
  components: {
    VueTagger
  },
  data() {
    return {
      tags: [
        { name: 'JavaScript', selected: true },
        { name: 'Ruby', selected: false },
        { name: 'PHP', selected: true },
        { name: 'Crystal', selected: true },
        { name: 'Python', selected: false }
      ]
    }
  },
  methods: {
    logTags (tags) {
      console.log(tags)
    }
  }
}
</script>

License

MIT © Collin Henderson