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

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, {loader: '...'})

Quick Start

There are 2 modes for this plugin: SIMPLIFIED and EXTENDED

Simplified syntax:

EXTREMELY easy. Just add directive v-promise-btn to your button:

<button v-promise-btn @click="getData">Get Data</button>

Or with single instance options:

<button v-promise-btn="options" @click="getData">Get Data</button>

!!! Event handler should always return Promise for SIMPLIFIED mode

Extended syntax:

Simply add option parameter promise and assing to it promise from data you want to handle.

<button v-promise-btn="{ promise: isLoading }" @click="getData">Get Data</button>

!!! If you face any issue - better to use EXTENDED syntax

Examples

Click handler   Promise chain example {{currentChain}}

<button v-promise-btn @click="asyncAction">Click handler</button>

With Prevent modifier

<button v-promise-btn @click.prevent="asyncAction">With Prevent modifier</button>

Right mouse

<button v-promise-btn="{action: 'contextmenu'}" @click.right="asyncAction">Right mouse</button>

Middle mouse

<button v-promise-btn="{action: 'mouseup'}" @click.middle="asyncAction">Middle mouse</button>

Loader as custom component

<button v-promise-btn="{loader: CustomSpinnerComponent}" @click="asyncAction">Loader as custom component</button>

Loader as simple HTML

<button v-promise-btn="{loader: '<b>(HTML loader...)</b>' }" @click="asyncAction">Loader as custom component</button>

Btn with expression on click handler

<button v-promise-btn v-on="{ click: asyncActionWithArgs($event, 'abc') }">Btn with expression on click handle</button>

!!! Important: if you want to use closure - you have to define v-on="{ click: test('abc') }" instead of @click="test('abc')"

Extended syntax with external promise

<button v-promise-btn="{ promise: dataPromise }" @click="asyncWithPromiseInData('Hello from async action!')">Extended syntax with external promise</button>

This param allow to use directive with external components. Use this option if you faced issued with simplified syntax

Extended with Vue Bootstrap

<b-btn v-promise-btn="{ promise: bootstrapBtnPromise }" @click="vueBootstrap('Hello from vue bootstrap button!')">Extended with Vue Bootstrap</b-btn>

<form v-promise-btn="{action: 'submit'}" @submit.prevent="asyncAction">
  <button type="submit">Button Form Submit</button>
</form>

Vue.component('custom-form', {
  template: `<form @submit.prevent="$emit('submit', 'data')">
    <p>
      <button type="submit">Button Form Submit - Handle Component Event</button>
    </p>
  </form>`
})

<custom-form @submit="dummyAsyncAction" v-promise-btn="{action: 'submit'}"></custom-form>

Options

Action types

Vue internal action names for mouse modifiers

Limitations

• Vue versions higher v2.6.0 does not support promise-btn v1.1.0.
  For Vue v2.6 or higher use promise-btn v1.2.0 or higher.
• Vue versions below v2.5.14 does not support promise-btn with event modifiers.
  This code will not work, because events with modifiers will always return "undefined"
  <button v-promise-btn @click.prevent="asyncAction">With Prevent modifier</button>

  Solution: Update Vue to v2.5.14 or higher. Issue Fixed by this PR