Package Exports

@vojtechlanka/vue-tags-input
@vojtechlanka/vue-tags-input/dist/vue-tags-input.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vojtechlanka/vue-tags-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-tags-input

This is forked component from https://github.com/JohMun/vue-tags-input with added drag and drop support.

Features

No dependencies
Custom validation rules
Hooks: Before adding, Before deleting ...
Edit tags after creation
Fast setup
Works with Vuex
Autocompletion
Many customization options
Own templates
Delete tags on backspace
Add tags on paste
Examples & Docs
Drag and Drop

Install

NPM

npm i @vojtechlanka/vue-tags-input

Usage with draggable

Draggable is disabled by default. Set prop :is-draggable to true to enable it. You can also set :draggable-handle to true to enable handle which can be styled with css class .handle. Classes for ghost-class and drag-class are .ghost-tag and .drag-tag.

On drop tag-order-changed is emitted with array of tags in new order. Use this array to update your tags to save the new order.

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :is-draggable="true"
      @tags-changed="newTags => tags = newTags"
      @tag-order-changed="newTags => tags = newTags"
    />
  </div>
</template>

<script>
import VueTagsInput from '@vojtechlanka/vue-tags-input';

export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
    };
  },
};
</script>

License

MIT