3.0.6 • Published 13 days ago
@vuesimple/vs-button v3.0.6
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 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. |
3.0.6
13 days ago
3.0.4
7 months ago
3.0.3
7 months ago
3.0.2
7 months ago
3.0.1
7 months ago
3.0.5
7 months ago
3.0.0
7 months ago
1.4.15
8 months ago
1.4.14
8 months ago
1.4.18
8 months ago
1.4.13
1 year ago
1.4.12
1 year ago
1.4.9
2 years ago
1.4.11
2 years ago
1.4.8
2 years ago
1.4.10
2 years ago
1.4.6
2 years ago
1.4.5
2 years ago
1.4.4
2 years ago
1.4.3
2 years ago
1.4.2
2 years ago
1.4.1
2 years ago
1.4.0
3 years ago
1.3.41
3 years ago
1.3.40
3 years ago
1.3.39
3 years ago
1.3.36
3 years ago
1.3.37
3 years ago
1.3.38
3 years ago
1.3.35
3 years ago
1.3.31
3 years ago
1.3.32
3 years ago
1.3.30
3 years ago
1.3.33
3 years ago
1.3.34
3 years ago
1.3.28
3 years ago
1.3.29
3 years ago
1.3.27
3 years ago
1.3.26
3 years ago
1.3.25
3 years ago
1.3.24
3 years ago
1.3.23
3 years ago
1.3.21
3 years ago
1.3.19
3 years ago
1.3.20
3 years ago
1.3.18
3 years ago
1.3.17
3 years ago