Blog Detail


Multiple Process Loader Management for Vue, Vuex & Nuxt. cover image

arrow_back Multiple Process Loader Management for Vue, Vuex & Nuxt.

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 add vue-wait


npm install vue-wait

Use with Vue Js

For Vue 2.x

import VueWait from 'vue-wait'


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

Use in Your Components

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

  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');

Usage with Vuex

Simply set useVuex parameter to true and optionally override vuexModuleName.

import VueWait from 'vue-wait'

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

Then you should register VueWait module:

new Vue({
  el: '#app',
  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

    // 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.

Published at : 30-11-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project