Simple tags component for Vue.js 3

A package that allows you to attach, detach and remove tags with ease, following provided suggestions. The tags are styled by default using Tailwind CSS

Demo

Installation

NPM

npm i simple-tags-for-vue

CDN

<script src="https://www.unpkg.com/simple-tags-for-vue/dist/simple-tags-for-vue.min.js"></script>

Usage

import simple_tags_for_vue from 'simple-tags-for-vue';

// add to the components section
components: {
    'simple-tags-for-vue': simple_tags_for_vue
}

<simple-tags-for-vue v-model="selected_tags"
                     :existing="existing_tags"
></simple-tags-for-vue>

Styling

If you have tailwindcss installed, you are good to go. If not, just turn it off :tailwind="false", add class="your-own-class" and style it as you need.

Backend

POST query of the form with simple-tags-for-vue results in an array of 'tags'.

If you use Laravel with spatie/laravel-tags:

<?php

// Get tags
$tags = $model->tags->map(fn($tag) => $tag->name);
$existing_tags = Tag::all()->map(fn($tag) => $tag->name);

// Update tags
$tags = $request->input('tags') ?? [];
$model->syncTags($tags);

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | modelValue | Array | [] | Value for v-model | | existing | Array | [] | List of existing tags (used in suggestions) | | unused | Array | [] | List of unused tags (can be permanently deleted) | | tailwind | Boolean | true | Style with tailwindcss |

Emits

| Name | Description | | --- | --- | | update:modelValue | Update event for v-model | | destroy | Permanently delete tag |

License

The MIT License (MIT). Please see License File for more information.