Package Exports

@vuesimple/vs-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vuesimple/vs-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Simple Button

🗃 A simple vue button.

A light weight vue plugin built groundup.

forthebadge

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-button

yarn add @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>

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