Package Exports

@voerro/vue-tagsinput

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 (@voerro/vue-tagsinput) 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

A simple tags input with typeahead built with Vue.js 2.

Installation via NPM

npm i @voerro/vue-tagsinput --save-dev

npm i @voerro/vue-tagsinput --save

Then register the component with Vue:

Vue.component('tags-input', require('@voerro/vue-tagsinput'));

Usage

<tags-input element-id="tags"
            :existing-tags="{ 
                'web-development': 'Web Development',
                'php': 'PHP',
                'javascript': 'JavaScript',
            }"
            :typeahead="true"></tags-input>

element-id will be applied to id and name attributes of the hidden input that contains the list of the selected tags as its value.

existing-tags is the list of the existing on your website tags. Include it even if you're not using typeahead.

Remove the typeahead property to disable this functionality.

"Old" Tags

If you need to display a list of already attached tags, use the :old-tags property. Provide a list in the same format as with existing-tags. In this Laravel example we attach either the tags from old(), the tags of an existing blog post, or nothing, depending on what's available.

<tags-input element-id="tags"
            :existing-tags="{ 
                'web-development': 'Web Development',
                'php': 'PHP',
                'javascript': 'JavaScript',
            }"
            :old-tags="{{ 
        old('tags') ? json_encode(old('tags')) :
        (
            isset($postTags)
            ? json_encode($postTags)
            : json_encode('')
        ) 
        }}"
            :typeahead="true"></tags-input>

Data

The list of selected tags is stored as a string (tags are separated with a comma) inside a hidden input with name = element-id.

If a tag is listed in existing-tags, the tag's slug will be used, otherwise the text entered by user is added.

Example value of the hidden input:

web-development,javascript,This is a new tag,php

Styling

The component uses default Bootstrap 4 classes for styling. The required css from the original Bootstrap 4 is included, so everything should work fine even if your project doesn't use Bootstrap. You can apply your own css.

The visible input is a div with classes .form-control and .tags-input. Each tag inside is a span with standard Bootstrap 4 classes .badge, .badge-pill, and .badge-light. The remove buttons of each tags are .tagsinput-remove.

The typeahead parent element is a p with .typeahead class. Its children are spans with standard Bootstrap 4 classes .badge, .badge-primary (for the selected tag), .badge-dark (for all the unselected tags).

Typeahead

When search results are displayed underneath the input, use the arrow down and arrow up keys on the keyboard to move the selection. Press Enter to select a tag. Press Esc to discard the search results and then Enter to add a new tag the way you've typed it.

License

This is open-sourced software licensed under the MIT license.