1.0.0 • Published 4 years ago

vs-button v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Vue Simple Button

🗃 A simple vue button.

A light weight vue plugin built groundup.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i vs-button
yarn 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.js

    import Vue from 'vue';
    import VsButton from '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 'vs-button' & add in component:{VsButton} and use it within component, without globally installing in plugin folder.

⚙ Props

NameTypeDefaultDescription
variantStringdefaultType of button to be shown. (default, primary, secondary, warning, danger, success, light)
sizeStringmediumSize of button. (small, medium, large)
fillBoolean-Applies background color to button
isRoundBoolean-Applies round/pill styling
isLoadingBoolean-Will show loader and button will be disabled
disabledBoolean-Disable button
hrefString-Link/URL string
targetString-Can add _blank, _self
relString-Rel strings can be added like noreferrer, noopener

🔥 Events

NameDescription
clickEmitted when the button clicked.

📎 Slots

You can define own item markup via slots:

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