@vuesimple/vs-tag
v3.0.7
Published
A simple vue tag. Perfect for all your tag scenarios.
Downloads
114
Maintainers
Readme
Vue Simple Tag
🗃 A simple vue tag. Perfect for all your tag scenarios.
A light weight vue plugin built groundup.
📺 Live Demo
Code Sandbox: Link
🛠 Install
npm i @vuesimple/vs-tag
🚀 Usage
<template>
<vs-tag variant="primary"> Primary </vs-tag>
</template>
<script>
import VsTag from '@vuesimple/vs-tag';
export default {
components: {
VsTag,
},
};
</script>
🌎 CDN
<script src="https://unpkg.com/@vuesimple/vs-tag@<version>/dist/vs-tag.min.js"></script>
// Main/Entry file
app.use(VsTag.plugin);
<template>
<vs-tag variant="primary"> Primary </vs-tag>
</template>
Nuxt Code Snippet
After installation,
Create a file
/plugins/vs-tag.js
import Vue from 'vue'; import VsTag from '@vuesimple/vs-tag'; Vue.component('vs-tag', VsTag);
Update
nuxt.config.js
module.exports = { ... plugins: [ { src: '~plugins/vs-tag', mode: 'client' } ... ] }
In the page/ component
<template> <vs-tag variant="primary"> Primary </vs-tag> </template>
Note
- For older Nuxt versions, use
<no-ssr>...</no-ssr>
tag. - You can also do
import VsTag from '@vuesimple/vs-tag'
& add incomponent:{VsTag}
and use it within component, without globally installing in plugin folder.
⚙ Props
| Name | Type | Default | Description |
| ---------- | ------- | -------- | ---------------------------------------------------------------------- |
| variant | String | - | Type of tag to be shown. (primary
, secondary
, warning
, danger
) |
| size | String | medium
| Size of tag. (small
, medium
, large
) |
| is-bold | Boolean | true
| Bold text for tag. |
| is-pill | Boolean | medium
| Applies pill styling |
| is-round | Boolean | medium
| Applies styles to round the tag |
| bg-color | String | - | Applies hex/rgb/text color to tags background color |
| text-color | String | - | Applies hex/rgb/text color to tags text color |
| is-close | Boolean | false
| Show close button |
🔥 Events
| Name | Description |
| ----- | -------------------------------------------------------- |
| click | On close button click (only available if is-close
set) |
📎 Slots
You can define own item markup via slots:
| Name | Description | | --------- | ------------------------------------------- | | (default) | Holds the tag content and can contain HTML. |