⏩Quick Start

1. Install:

yarn add vue-wait

2. Require:

For Vue 2.x

importVueWaitfrom'vue-wait'Vue.use(VueWait)newVue({// your vue configwait:newVueWait(),})

For Vue 3.x

import{createApp}from'vue'import{createVueWait}from'vue-wait'importAppfrom'./App.vue'constVueWait=createVueWait()createApp(App)// Create app with root component.use(VueWait)// Register vue-wait.mount('#app')

3. Use in Your Components

<template>  <v-waitfor="my list is to load">    <template slot="waiting">      <div>        <imgsrc="loading.gif" />        Loading the list...      </div>    </template>    <ul>      <liv-for="item in myList">{{ item }}</li>    </ul>  </v-wait></template><script>exportdefault {data() {return {        myList: []      }    },asynccreated() {// start waitingthis.$wait.start('my list is to load');this.myList=awaitfetch('/my-list-url');// stop waitingthis.$wait.end('my list is to load');    },  };</script>

▶️Detailed Start

📦 Requirements

🚀 Power Supplies

🔧 Installation

$ yarn add vue-wait# or if you using npm$ npm install vue-wait

📖 Usage

importVueWaitfrom'vue-wait'Vue.use(VueWait)// add VueWait as Vue plugin

newVue({el:'#app',  store,wait:newVueWait({// Defaults values are following:useVuex:false,// Uses Vuex to manage wait statevuexModuleName:'wait',// Vuex module nameregisterComponent:true,// Registers `v-wait` componentcomponentName:'v-wait',// <v-wait> component name, you can set `my-loader` etc.registerDirective:true,// Registers `v-wait` directivedirectiveName:'wait',// <span v-wait /> directive name, you can set `my-loader` etc.}),});

♻️ Usage with Vuex

importVueWaitfrom'vue-wait'Vue.use(Vuex)Vue.use(VueWait)// add VueWait as Vue plugin

newVue({el:'#app',  store,wait:newVueWait({useVuex:true,// You must pass this option `true` to use VuexvuexModuleName:'vuex-example-module'// It's optional, `wait` by default.}),});

♻️ Usage with Nuxt.js

{modules:[// Simple usage'vue-wait/nuxt'// Optionally passing options in module configuration['vue-wait/nuxt',{useVuex:true}]],// Optionally passing options in module top level configurationwait:{useVuex:true}}

🔁VueWait Options

🌈 Global Template Helpers

.any

<template>  <progress-barv-if="$wait.any">Please wait...</progress-bar></template>

.is(loader String | Matcher) or.waiting(loader String | Matcher)

<template>  <progress-barv-if="$wait.is('creating user')">Creating User...</progress-bar></template>

<template>  <divv-if="$wait.waiting('fetching users')">    Fetching users...  </div></template>

<template>  <progress-barv-if="$wait.is('creating.*')">Creating something...</progress-bar></template>

.is(loaders Array<String | Matcher>) or.waiting(loaders Array<String | Matcher>)

<template>  <progress-barv-if="$wait.is(['creating user', 'page loading'])">Creating User...</progress-bar></template>

.start(loader String)

<template>  <button@click="$wait.start('creating user')">Create User</button></template>

.end(loader String)

<template>  <button@click="$wait.end('creating user')">Cancel</button></template>

.progress(loader String, current [, total = 100])

<template>  <progressmin="0"max="100":value="$wait.percent('downloading')" />  <button@click="$wait.progress('downloading', 10)">Set progress to 10</button>  <button@click="$wait.progress('downloading', 50)">Set progress to 50</button>  <button@click="$wait.progress('downloading', 50, 200)">Set progress to 50 of 200 (25%)</button></template>

Completing the Progress

<button @click="$wait.progress('downloading',101)">Set as downloaded (101 of 100)</button>

<button @click="$wait.progress('downloading',5,6)">Set as downloaded (6 of 5)</button>

.percent(loader String)

<template>  <progressmin="0"max="100":value="$wait.percent('downloading')" /></template>

🏹 Directives

v-wait:visible='"loader name"'

<template>  <progress-barv-wait:visible='"creating user"'>Creating User...</progress-bar></template>

v-wait:hidden='"loader name"' orv-wait:visible.not='"loader name"'

<template>  <mainv-wait:hidden='"creating *"'>Some Content</main></template>

v-wait:disabled='"loader name"'

<template>  <inputv-wait:disabled="'*'"placeholder="Username" />  <inputv-wait:disabled="'*'"placeholder="Password" /></template>

v-wait:enabled='"loader name"' orv-wait:disabled.not='"loader name"'

<template>  <buttonv-wait:enabled='"creating user"'>Abort Request</button></template>

v-wait:click.start='"loader name"'

<template>  <buttonv-wait:click.start='"create user"'>Start loader</button></template>

v-wait:click.end='"loader name"'

<template>  <buttonv-wait:click.end='"create user"'>End loader</button></template>

v-wait:toggle='"loader name"'

<template>  <buttonv-wait:toggle='"flip flop"'>Toggles the loader</button></template>

v-wait:click.progress='["loader name", 80]'

<template>  <buttonv-wait:click.progress='["downloading", 80]'>Set the "downloading" loader to 80</button></template>

🔌 Loading Action and Getter Mappers

import{mapWaitingActions,mapWaitingGetters}from'vue-wait'// ...  methods:{    ...mapWaitingActions('users',{getUsers:'loading users',createUser:'creating user',updateUser:'updating user',}),},computed:{    ...mapWaitingGetters({somethingWithUsers:['loading users','creating user','updating user',],deletingUser:'deleting user',}),}// ...

import{mapWaitingActions,mapWaitingGetters}from'vue-wait'// ...methods:{    ...mapWaitingActions('users',{getUsers:{action:'getUsers',loader:'loading users'},createUser:{action:'createUser',loader:'creating user'},createSuperUser:{action:'createUser',loader:'creating super user'},}),},// ...

// ...methods:{    ...mapWaitingActions('users',['getUsers',{method:'createUser',action:'createUser',loader:'creating user'},{method:'createSuperUser',action:'createUser',loader:'creating super user'},]),},// ...

☢️Advanced Getters and Actions Usage

getters:{cartOperationInProgress(state,getters,rootState,rootGetters){returnrootGetters['wait/is']('cart.*');}},

actions:{asyncaddItemToCart({ dispatch},item){dispatch('wait/start','cart.addItem',{root:true});awaitCartService.addItem(item);dispatch('wait/end','cart.addItem',{root:true});}},

waitFor(loader String, func Function [,forceSync = false])

import{waitFor}from'vue-wait';...methods:{fetchDataFromApi:waitFor('fetch data',asyncfunction(){functionsleep(ms){returnnewPromise(resolve=>setTimeout(resolve,ms));}// do work hereawaitsleep(3000);// simulate some api callthis.fetchResponse=Math.random()})}...

💧 Usingv-wait Component

importvLoadingfrom'vue-wait/src/components/v-wait.vue'components:{'v-wait':vLoading}

<v-wait for='fetching data'>  <template slot='waiting'>    This will be shown when "fetching data" loader starts.  </template>  This will be shown when "fetching data" loader ends.</v-wait>

<button :disabled='$wait.is("creating user")'>  <v-wait for='creating user'>    <template slot='waiting'>Creating User...</template>    Create User  </v-wait></button>

🔁 Transitions

<v-wait for="users"  transition="fade"  mode="out-in"  :duration="1000"  enter-active-class="enter-active"  @leave='someAwesomeFinish()'  >  <template slot="waiting">    <p>Loading...</p>  </template>  My content</v-wait>

⚡️ Making Reusable Loader Components

<template lang='pug'>  <div>    <v-waitfor="fetching tabs">      <templateslot="waiting">        <b-tabs>          <templateslot="tabs">            <b-nav-itemactive="active"disabled>              <v-iconname="circle-o-notch"spin="spin" />            </b-nav-item>          </template>        </b-tabs>      </template>      <b-tabs>        <templateslot="tabs">          <b-nav-itemv-for="tab in tabs">{{ tab.name }}</b-nav-item>        </template>      </b-tabs>    </v-wait>    <v-waitfor="fetching data">      <table-gradient-spinnerslot="waiting" />      <table>        <trv-for="row in data">          <!-- ...-->        </tr>      </table>    </v-wait>  </div></template>

<!-- MySpinner.vue--><i18n>  tr:    loading: Yükleniyor...  en:    loading: Loading...</i18n><template>  <divclass="loading-spinner">    <v-iconname="refresh"spin="spin" />    <span>{{ $t('loading') }}</span>  </div></template><style scoped lang="scss">.loading-spinner {opacity:0.5;margin:50pxauto;text-align:center;.fa-icon {vertical-align:middle;margin-right:10px;    }  }</style>

<template lang="pug">  <v-waitfor="fetching data">    <my-waiterslot="waiting" />    <div>      <p>My main content after fetching data...</p>    </div>  </v-wait></template>

📦 Using with external spinner libraries

import{OrbitSpinner}from'epic-spinners';Vue.component('orbit-spinner',OrbitSpinner);

<v-wait for='something to load'>  <orbit-spinner    slot='waiting'    :animation-duration="1500"    :size="64"    :color="'#ff1d5e'"  /></v-wait>

🚌 Run example

✔ Testing components

<v-wait for="loading">   <Spinner slot="waiting" />   <ul>      <li v-for="suggestion in suggestions">{{ suggestion.Name }}</li>   </ul></v-wait>

constlocalVue=createLocalVue();localVue.use(Vuex);// optionally when you use Vuex integrationit('uses vue-wait component',()=>{constwrapper=shallowMount(Suggestions,{ localVue});expect(wrapper.find('.suggestions').exists()).toBe(true);});

constlocalVue=createLocalVue();localVue.use(Vuex);// optionally when you use Vuex integrationlocalVue.use(VueWait);

it('uses vue-wait component',()=>{constwrapper=shallowMount(SuggestedAddresses,{      localVue,wait:newVueWait()});expect(wrapper.find('.suggestions').exists()).toBe(true);// it works!});

For Development on vue-wait

$ yarn install# or if you using npm$ npm install

$ yarn bundle# or if you using npm$ npm run bundle

🎯 Contributors

🔗 Other Implementations

🔑 License