1.0.0 • Published 5 years ago
vs-button v1.0.0
Vue Simple Button
🗃 A simple vue button.
A light weight vue plugin built groundup.
📺 Live Demo
Code Sandbox: Link
🛠 Install
npm i vs-buttonyarn add vs-button🚀 Usage
<template>
<vs-button>Default</vs-button>
<vs-button variant="primary" fill>Primary</vs-button>
</template>
<script>
import VsButton from 'vs-button';
export default {
components: {
VsButton,
},
};
</script>🌎 CDN
<script src='https://unpkg.com/vs-button@1/dist/vs-button.min.js'></script><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.jsimport Vue from 'vue'; import VsButton from 'vs-button'; Vue.component('vs-button', VsButton);Update
nuxt.config.jsmodule.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 'vs-button'& add incomponent:{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. |
1.0.0
5 years ago