Vue-wait helps to manage multiple loading states on the page without any conflict. It’s based on a very simple idea that manages an array (or Vuex store optionally) with multiple loading states. The built-in loader component listens to its registered loader and immediately becomes a loading state. You can view its demo here.

How to Install?

You can install this component via yarn or Npm:

Yarn

yarn add vue-wait

Npm

npm install vue-wait

Use with Vue Js

For Vue 2.x

import VueWait from 'vue-wait'

Vue.use(VueWait)

new Vue({
  // your vue config
  wait: new VueWait(),
})

For Vue 3.x

import { createApp } from 'vue'
import { createVueWait } from 'vue-wait'
import App from './App.vue'

const VueWait = createVueWait()

createApp(App)    // Create app with root component
  .use(VueWait)   // Register vue-wait
  .mount('#app')

Use in Your Components

<template>
  <v-wait for="my list is to load">
    <template slot="waiting">
      <div>
        <img src="loading.gif" />
        Loading the list...
      </div>
    </template>
    <ul>
      <li v-for="item in myList">{{ item }}</li>
    </ul>
  </v-wait>
</template>

<script>
  export default {
    data() {
      return {
        myList: []
      }
    },
    async created() {
      // start waiting
      this.$wait.start('my list is to load');

      this.myList = await fetch('/my-list-url');

      // stop waiting
      this.$wait.end('my list is to load');
    },
  };
</script>

Usage with Vuex

Simply set useVuex parameter to true and optionally override vuexModuleName.

import VueWait from 'vue-wait'

Vue.use(Vuex)
Vue.use(VueWait) // add VueWait as Vue plugin

Then you should register VueWait module:

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

Now VueWait will use Vuex store for data management which can be traced in Vue DevTools > Vuex.

Usage with Nuxt.js

Add vue-wait/nuxt to modules section of nuxt.config.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 configuration
  wait: { useVuex: true }
}

vue-wait has more abilities to make the management easier. Following are the features & options available in the documentation of this package.

• Global Template Helpers
• Directives
• Loading Action and Getter Mappers
• Advanced Getters and Actions Usage
• Using v-wait Component
• Transitions
• Making Reusable Loader Components
• Using with external spinner libraries

If you want to know more details about Vue-wait, you can visit its documentation & Source code on Github.