simple-tags-for-vue
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
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.
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10@vue/compiler-sfc: ^3.0.5cross-env: ^7.0.3minimist: ^1.2.5postcss: ^8.2.3rollup: ^2.36.1rollup-plugin-postcss: ^4.0.0rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0vue: ^3.0.5