{"id":15284,"library":"vue-wait","title":"Vue-Wait: Global Loading Management","description":"Vue-Wait is a Vue plugin designed for comprehensive global loading state management within Vue applications, optionally integrating with Vuex. It simplifies the handling of multiple concurrent loading processes, preventing UI conflicts and providing clear visual feedback to users. The current stable version, 1.5.3, includes important updates like Vue 3 support, released in v1.5.0, demonstrating ongoing maintenance and adaptability to the evolving Vue ecosystem. The library distinguishes itself by offering both a declarative component (`<v-wait>`) and a directive (`v-wait`) for displaying loading indicators, alongside a programmatic API (`$wait.start()`, `$wait.end()`) for granular control over individual loading states. Additionally, it provides features for progress indication and configurable Vuex integration, making it a flexible solution for various application sizes and complexities. Its core idea relies on an array-based system to track active wait states, making it intuitive to manage.","status":"active","version":"1.5.3","language":"javascript","source_language":"en","source_url":"https://github.com/f/vue-wait","tags":["javascript","vue","vuex","nuxt","plugin","loading","loader","typescript"],"install":[{"cmd":"npm install vue-wait","lang":"bash","label":"npm"},{"cmd":"yarn add vue-wait","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-wait","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue application integration.","package":"vue","optional":false}],"imports":[{"note":"For Vue 2 applications, `VueWait` is a default export used with `Vue.use()`.","wrong":"import { VueWait } from 'vue-wait'","symbol":"VueWait","correct":"import VueWait from 'vue-wait'"},{"note":"Since v1.5.0, Vue 3 applications use `createVueWait` as a named export for plugin instantiation.","wrong":"import createVueWait from 'vue-wait'","symbol":"createVueWait","correct":"import { createVueWait } from 'vue-wait'"},{"note":"The `<v-wait>` component and `v-wait` directive are registered globally when the plugin is installed with `Vue.use()` or `app.use()`.","symbol":"v-wait","correct":"<!-- Component usage -->\n<v-wait for=\"processName\">\n  <template #waiting>Loading...</template>\n  Content\n</v-wait>\n\n<!-- Directive usage -->\n<button v-wait:click=\"'saveData'\">Save</button>"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport { createVueWait } from 'vue-wait'\nimport App from './App.vue'\n\nconst VueWait = createVueWait()\n\nconst app = createApp(App)\napp.use(VueWait)\napp.mount('#app')\n\n// Example component usage:\n// <template>\n//   <v-wait for=\"my list is to load\">\n//     <template slot=\"waiting\">\n//       <div>Loading the list...</div>\n//     </template>\n//     <ul>\n//       <li v-for=\"item in myList\" :key=\"item\">{{ item }}</li>\n//     </ul>\n//   </v-wait>\n// </template>\n\n// <script>\n// export default {\n//   data() {\n//     return {\n//       myList: []\n//     }\n//   },\n//   async created() {\n//     this.$wait.start('my list is to load');\n//     // Simulate an async fetch\n//     await new Promise(resolve => setTimeout(resolve, 2000));\n//     this.myList = ['Item 1', 'Item 2', 'Item 3'];\n//     this.$wait.end('my list is to load');\n//   },\n// };\n// </script>","lang":"typescript","description":"This quickstart demonstrates the setup of Vue-Wait in a Vue 3 application, showing how to instantiate and register the plugin globally. It also includes commented-out example Vue component code to illustrate how to use the `<v-wait>` component and the `$wait` service to manage and display loading states for an asynchronous operation."},"warnings":[{"fix":"For Vue 3, import `createVueWait` as a named export and use `app.use(createVueWait())`. For Vue 2, import `VueWait` as a default export and instantiate it within the Vue instance options: `new Vue({ wait: new VueWait() })`.","message":"Vue 3 applications require using the `createVueWait` named export for plugin instantiation, replacing the default export approach used for Vue 2. The plugin registration also changes from `new Vue({ wait: new VueWait() })` to `app.use(createVueWait())`.","severity":"breaking","affected_versions":">=1.5.0"},{"fix":"Replace all calls to `this.$wait.isWaiting('processName')` with `this.$wait.is('processName')`. An alias `waiting(waiter)` was added in v1.3.0.","message":"The method to check if a process is waiting was renamed from `isWaiting(waiter)` to `is(waiter)` to reduce code verbosity.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Initialize VueWait with `{ useVuex: true }`: `new VueWait({ useVuex: true })` or `createVueWait({ useVuex: true })`.","message":"When integrating with Vuex, `useVuex` must be explicitly set to `true` in the VueWait plugin options. It defaults to `false`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a declaration file (e.g., `vue-wait.d.ts`) to augment the Vue instance type:\n```typescript\ndeclare module '@vue/runtime-core' {\n  interface ComponentCustomProperties {\n    $wait: import('vue-wait').VueWaitInstance;\n  }\n}\n// For Vue 2 (if not using @vue/runtime-core):\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    $wait: import('vue-wait').VueWaitInstance;\n  }\n}\n```","message":"TypeScript users might encounter errors like 'Property '$wait' does not exist on type 'Vue'' because Vue-Wait adds a global property that TypeScript doesn't automatically recognize.","severity":"gotcha","affected_versions":">=1.3.3"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For Vue 2, ensure `new Vue({ ..., wait: new VueWait(), ... })` is present. For Vue 3, ensure `app.use(createVueWait())` is called after `createApp()`.","cause":"The VueWait plugin was not correctly registered with the Vue instance, or the `wait` option was omitted in Vue 2.","error":"TypeError: Cannot read properties of undefined (reading 'start') (or similar for $wait)"},{"fix":"Ensure `registerComponent: true` (which is the default) in the VueWait options. If `componentName` was changed, update your template accordingly (e.g., `<my-loader>`).","cause":"The `<v-wait>` component registration was disabled or the component name was customized without updating usage.","error":"Unknown custom element: <v-wait> - did you register the component correctly?"}],"ecosystem":"npm"}