VueSimple

Tag

A simple vue tag.

codesandboxDemolinkgithubGitHublink

Install ​

bash
npm i @vuesimple/vs-tag
npm i @vuesimple/vs-tag

Usage ​

html
<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

<script>
  import VsTag from '@vuesimple/vs-tag';

  export default {
    components: {
      VsTag,
    },
  };
</script>
<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

<script>
  import VsTag from '@vuesimple/vs-tag';

  export default {
    components: {
      VsTag,
    },
  };
</script>

CDN ​

html
<script src="https://unpkg.com/@vuesimple/vs-tag@<version>/dist/index.min.js"></script>
<script src="https://unpkg.com/@vuesimple/vs-tag@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

javascript
// Main/Entry file
app.use(VsTag.plugin);
// Main/Entry file
app.use(VsTag.plugin);
html
<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>
<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

Nuxt.js ​

After installation,

  • Create a file /plugins/vs-tag.js

    javascript
    import Vue from 'vue';
import VsTag from '@vuesimple/vs-tag';

Vue.component('vs-tag', VsTag);
    import Vue from 'vue';
import VsTag from '@vuesimple/vs-tag';

Vue.component('vs-tag', VsTag);

  • Update nuxt.config.js

    javascript
    module.exports = {
  ...
  plugins: [
    { src: '~plugins/vs-tag', mode: 'client' }
    ...
  ]
}
    module.exports = {
  ...
  plugins: [
    { src: '~plugins/vs-tag', mode: 'client' }
    ...
  ]
}

  • In the page/ component

    html
    <template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>
    <template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

TIP

  • For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
  • You can also do import VsTag from '@vuesimple/vs-tag' & add in components:{VsTag} and use it within component, without globally installing in plugin folder.

Props ​

NameTypeDefaultDescription
variantString-Type of tag to be shown. (primary, secondary, warning, danger)
sizeStringmediumSize of tag. (small, medium, large)
is-boldBooleantrueBold text for tag.
is-pillBooleanmediumApplies pill styling
is-roundBooleanmediumApplies styles to round the tag
bg-colorString-Applies hex/rgb/text color to tags background color
is-closeBooleanfalseShow close button

Events ​

NameDescription
clickOn close button click (only available if is-close set)

Slots ​

You can define own item markup via #slot-name:

NameDescription
(default)Holds the tag content and can contain HTML.