@vuesimple/vs-button

Vue Simple Button

🗃 A simple vue button.

A light weight vue plugin built groundup.

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-button

🚀 Usage

<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

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

// Main/Entry file
app.use(VsButton.plugin);

<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

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

• Update nuxt.config.js

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

• In the page/ component

  <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

Name	Type	Default	Description
variant	String	default	Type of button to be shown. (default, primary, secondary, warning, danger, success, light)
size	String	medium	Size of button. (small, medium, large)
fill	Boolean	-	Applies background color to button
isRound	Boolean	-	Applies round/pill styling
isLoading	Boolean	-	Will show loader and button will be disabled
disabled	Boolean	-	Disable button
href	String	-	Link/URL string
target	String	-	Can add _blank, _self
rel	String	-	Rel strings can be added like noreferrer, noopener

🔥 Events

Name	Description
click	Emitted when the button clicked.

📎 Slots

You can define own item markup via slots:

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