@vuesimple/vs-tag

3.0.6 • Public • Published

Vue Simple Tag

🗃 A simple vue tag. Perfect for all your tag scenarios.

A light weight vue plugin built groundup.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge


📺 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.js

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 in component:{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.

Package Sidebar

Install

npm i @vuesimple/vs-tag

Weekly Downloads

21

Version

3.0.6

License

MIT

Unpacked Size

26.9 kB

Total Files

11

Last publish

Collaborators

  • ashwinkshenoy