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