🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Vue.js plugin that handles buttons asynchronous lock and shows loading state indicator.

Loading

Documentation

vue-promise-btn

NPM Version Download Month

Example and Documentation

https://STUkh.github.io/vue-promise-btn/

vue-promise-btn

Features

  • Easy-to-use API
  • Flexible Usage
  • Works with any tag and even forms
  • In Extended Mode - compatible with 3rd party components
  • Packaged with optional built-in spinner
  • Only 1.5KB minified and gzipped
  • ESM, CommonJS, UMD versions

Installation

npm install --save vue-promise-btn 

Quick Start:

  • Import and "handshake" plugin with vue
import Vue from 'vue' import VuePromiseBtn from 'vue-promise-btn'  // not required. Styles for built-in spinner import 'vue-promise-btn/dist/vue-promise-btn.css'  Vue.use(VuePromiseBtn) // or with global options Vue.use(VuePromiseBtn, {})
  • Simple usage: <button v-promise-btn @click="getData">Get Data</button>
  • Extended usage: <button v-promise-btn={ promise: dataPromise } @click="getData('param')">Get Data</button>

If you face any issue with simple mode, just try out extended, it's more reliable way.

Change log

Please see CHANGELOG for more information what has changed recently.

Important Notice

Alwayes return Promise from expression. Especially in simple mode.

Don't use semicolon in event expressions. It may break promise return in template-compiler:
Good: @click="handler($event)"
Bad: @click="handler($event);"

Contributing

Please see CONTRIBUTING and CONDUCT for details.

Credits

License

The MIT License (MIT). Please see License File for more information.

© STUkh [email protected]


You May Also Like