VueSimple

Button

A simple set of buttons

codesandboxDemolinkgithubGitHublink

Install ​

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

Usage ​

html
<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

<script>
  import VsButton from '@vuesimple/vs-button';

  export default {
    components: {
      VsButton,
    },
  };
</script>
<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

<script>
  import VsButton from '@vuesimple/vs-button';

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

CDN ​

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

TIP

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

javascript
// Main/Entry file
app.use(VsButton.plugin);
// Main/Entry file
app.use(VsButton.plugin);
html
<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>
<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

Nuxt.js ​

Nuxt Code Snippet

After installation,

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

    javascript
    import Vue from 'vue';
import VsButton from '@vuesimple/vs-button';

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

Vue.component('vs-button', VsButton);

  • Update nuxt.config.js

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

  • In the page/ component

    html
    <template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>
    <template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

Note

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

Props ​

NameTypeDefaultDescription
variantStringdefaultType of button to be shown. (default, primary, secondary, warning, danger, success, light)
sizeStringmediumSize of button. (small, medium, large)
fillBoolean-Applies background color to button
isRoundBoolean-Applies round/pill styling
isLoadingBoolean-Will show loader and button will be disabled
disabledBoolean-Disable button
hrefString-Link/URL string
targetString-Can add _blank, _self
relString-Rel strings can be added like noreferrer, noopener

Events ​

NameDescription
clickEmitted when the button clicked.

Slots ​

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

NameDescription
(default)Holds the button content and can contain HTML.
loaderHolds the loader component and can contain HTML/vue-component.