![](\"./resources/logo.png\"){kind=logo}
\n\n\n
\n Multiple Process Loader Management for Vue and (optionally) Vuex.\n
\n\n\n Read the Medium post \"Managing Complex Waiting Experiences on Web UIs\".\n
\n\n[](https://badge.fury.io/js/vue-wait)\n\n---\n\n\n\n> [Play with demo above](https://f.github.io/vue-wait/).\n\n**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.\n\n# ⏩Quick Start\n\nIf you are a **try and learn** developer, you can start trying the **vue-wait** now using [codesandbox.io](https://codesandbox.io).\n\n[](https://codesandbox.io/s/85q3vpm42?autoresize=1&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMyList.vue)\n\n### 1. Install:\n```bash\nyarn add vue-wait\n```\n\n### 2. Require:\n#### For Vue 2.x\n```js\nimport VueWait from 'vue-wait'\n\nVue.use(VueWait)\n\nnew Vue({\n // your vue config\n wait: new VueWait(),\n})\n```\n\n#### For Vue 3.x\n```js\nimport { createApp } from 'vue'\nimport { createVueWait } from 'vue-wait'\nimport App from './App.vue'\n\nconst VueWait = createVueWait()\n\ncreateApp(App) // Create app with root component\n .use(VueWait) // Register vue-wait\n .mount('#app')\n```\n\n### 3. Use in Your Components\n\n```vue\n\n![](\"loading.gif\")
\n Loading the list...\n ![](\"./resources/vue-ui-install.png\")
\n\n## 📖 Usage\n\n```js\nimport VueWait from 'vue-wait'\n\nVue.use(VueWait) // add VueWait as Vue plugin\n```\n\nThen you should register `wait` property (`VueWait` instance) to the Vue instance:\n\n```js\nnew Vue({\n el: '#app',\n store,\n wait: new VueWait({\n // Defaults values are following:\n useVuex: false, // Uses Vuex to manage wait state\n vuexModuleName: 'wait', // Vuex module name\n\n registerComponent: true, // Registers `v-wait` component\n componentName: 'v-wait', // Loading...
\n \n My content\n![](\"./resources/vue-wait-2.gif\")
\n\nIn this example above, the **tab gets data from back-end**, and the **table loads data from back-end at the same time**. With **vue-wait**, you will be able to manage these two seperated loading processes easily:\n\n```vue\n\n My main content after fetching data...
\n