Complex Loader Management For Vue – vuex-loading

Complex Loader Management For Vue – vuex-loading

vuex-loading is a multiple process loader management for Vue and Vuex.

Multiple Process Loader Management for Vue and (optionally) Vuex.

Read the Medium post "Managing Complex Waiting Experiences on Web UIs".

npm version


vue-wait

Play with demo above.

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 its registered loader and immediately become loading state.

⏩Quick Start

If you are a try and learn developer, you can start trying the vue-wait now using codesandbox.io.

Edit VueWait Sandbox

1. Install:

yarn add vue-wait

2. Require:

import VueWait from 'vue-wait'

Vue.use(VueWait)

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

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

vue-wait has more abilities to make the management easier, please read the complete documentation.

▶️Detailed Start

Github Repository

Tags: #VueJs