{"_id":"@chronotruck/vue-wait","_rev":"3-629781e0e381ea2f7f6f5afc25da5981","name":"@chronotruck/vue-wait","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@chronotruck/vue-wait","version":"1.0.0","keywords":["vue","vuex","nuxt","plugin","loading","loader"],"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","_id":"@chronotruck/vue-wait@1.0.0","maintainers":[{"name":"williamdasilva","email":"william.da.silva@outlook.com"},{"name":"maffpool","email":"matthieu.verrecchia@chronotruck.com"}],"homepage":"https://github.com/f/vue-wait#readme","bugs":{"url":"https://github.com/f/vue-wait/issues"},"dist":{"shasum":"0bcbad4ff5d1790d5b119aef5e56810ffd9942da","tarball":"https://registry.npmjs.org/@chronotruck/vue-wait/-/vue-wait-1.0.0.tgz","fileCount":16,"integrity":"sha512-Ug9wHn02/9yke2LdaskJusoLKNxkh2Zrl2jHtl4ACaTuCiE+LURjdnqIhq6awJeLzaf0y5o0aTUmoiW5zRRYHw==","signatures":[{"sig":"MEUCIGDalHTr//yoPuYd+DS1mstkV/9H1ncEXezQB3/jsLk7AiEAgsU0ak8fYXxdbugoluHr6wleY3k9REDpGzaMuIaUTEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRY82ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJCRAAm1luWH4kf8tBCXMRkvIcADEP34knuXVwB+uTjVkTBavBikCo\r\nEM04GQC+E36QyMjL3pcXc7rngdeH/AjS/vtYGtkcDsDQ6TFZYw/cul42PbD6\r\nMlKK0MqhH/PapTACEKTKFhp2wUhULUa+FyeCJzCeMY3TiyYlxwDCBIwtQr6h\r\n6crnx5oNwZoPT7y8SAqetC3wDqxSwCQpKQcKRL4d4cUV/eREIhe051dWZwU6\r\nQUwX+YjEHQcmc9/UNkx6Ir9IfooNBkXP3huDXQH+DbWYIaV8l8rl1nyrcoOR\r\ne7nATVmGxPJHjN2GUkMCxbbMYyjKjSeG9UPbgF1aQBxkGfFjIp6/0T7WzHoi\r\naHVVd3I/ColEC8x+mUvm+JJIuSmwDZZ9EgwItSevpKmKKKUVbAosJztEuFxQ\r\nj64myym0i77k1iBfd3KO3kyfSWVI/e7KOGsKtfMOcOHVfU6JA5Y/oEDLYfV9\r\nXJfupV6rdfRu49MJ9cFXPpNMCLekJjFSI06rkoAE/3YrlUDgV2XAgYMtRVqo\r\nFRxtRtLha7O9T3KrjfM81I8kWTtqSyoxM23+qR+IHJzFduzKP0KvuLj4otCq\r\n+WEM8nC9EPT9JnzfgXf2CcraQNSru4/7i9Dnciuejyp2WBv+mDtvi5Pe62kO\r\nmbRfRGHtgShFbpq1pqjEkI92T7vzZQwVv3U=\r\n=LWfp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","types":"src/types/index.d.ts","gitHead":"a76afbde43c778ffa7487a0867c1464042e511c6","scripts":{"test":"exit 0;","build":"cross-env NODE_ENV=production webpack --config webpack.config.js","bundle":"npm run build; npm run build -- --env=v3","dev-vue":"poi examples/vue-example/index.js","dev-vuex":"poi examples/vuex-example/index.js","dev-wrap":"poi examples/wrap-example/index.js","precommit":"lint-staged","build-gh-pages":"poi build --out-dir=/tmp/gh-pages examples/vuex-example/index.js","dev-transition":"poi examples/transition-example/index.js"},"_npmUser":{"name":"williamdasilva","email":"william.da.silva@outlook.com"},"repository":{"url":"git+https://github.com/f/vue-wait.git","type":"git"},"_npmVersion":"8.5.2","description":"Vue Plugin for Global Loading Management","directories":{},"lint-staged":{"src/**/*.js":["prettier --single-quote --write","git add"],"examples/**/*.js":["prettier --single-quote --write","git add"]},"_nodeVersion":"17.7.0","_hasShrinkwrap":false,"devDependencies":{"poi":"^10.2.3","vuex":"^4.0.2","husky":"^0.14.3","eslint":"^4.2.0","webpack":"^5.74.0","prettier":"^1.1.0","cross-env":"^5.1.3","css-loader":"^0.28.11","vue-loader":"^17.0.0","@babel/core":"^7.19.3","lint-staged":"^7.1.3","webpack-cli":"^4.10.0","babel-loader":"^8.2.5","epic-spinners":"^2.0.0","vue-html-loader":"^1.2.4","vue-style-loader":"^4.1.3","@babel/preset-env":"^7.19.4","escape-string-regexp":"^1.0.5","vue-template-compiler":"^2.7.11","@babel/plugin-transform-runtime":"^7.19.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-wait_1.0.0_1665503030257_0.8996509903595535","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@chronotruck/vue-wait","version":"1.0.1","keywords":["vue","vuex","nuxt","plugin","loading","loader"],"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","_id":"@chronotruck/vue-wait@1.0.1","maintainers":[{"name":"williamdasilva","email":"william.da.silva@outlook.com"},{"name":"maffpool","email":"matthieu.verrecchia@chronotruck.com"}],"homepage":"https://github.com/f/vue-wait#readme","bugs":{"url":"https://github.com/f/vue-wait/issues"},"dist":{"shasum":"2a165d96535f53cfa14511bdf7e41b589856b5d2","tarball":"https://registry.npmjs.org/@chronotruck/vue-wait/-/vue-wait-1.0.1.tgz","fileCount":16,"integrity":"sha512-CPfxZ2Oa/DCb6iVmJHUSPn/wrGn8HL6xdNKqw9ZXW/GkS1ACm/XQN04Vi/z5iIk7R/42dvgrNxpANOvlICFxHQ==","signatures":[{"sig":"MEUCIAZHpnv2Ef/H5yQjQPZL3Hcmrg6IKxRfq49cHZ03nZyUAiEA+r45ahkz978iPE+1mI4XcvWKeNQxZWlA0NbzAaYh+xM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRZEoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDoA//V7y+TdRkbjMjwaFTdnz1yLoGpFw8fuGGjt9SkAXqrf/gmGCC\r\nlOLC7wMv3g0Uur8/4KbtwvDiNcrPskploPL0q1chmlEO0+8FQxnc3X+guO+T\r\nND19DwTVsD9AdTu4Y643UBzsPqjqBsjp9vk5Ciu+Gvn89/PIXlpB8Q3QMkHv\r\nmJMtoihLcITVyzuT+zPppi0gAlDDMT4n0gtLr660PEta0ihPRVpm8GTK0kl/\r\nxQAOM5AB1681gCxMKuQS8WtU/OLHcSlLpOdGQiJ/C3mCqCrApADWc/2wKw1x\r\nUNlsQGppLlDEkR1G5ZzPydJBlyiDfDSKNoIz5Sz0cqrb9lDtKaXvVimU6Cp0\r\n2NIiFbORcKMIV8UmIZvoVZe+QAkeOSwXNbtQELr4nHqLEAyoCIrDnu6pzZyA\r\nFAcCOLXEUJlZnGFjIcsc8/w7hanXSuJUwxT01+9dpnVfvg2i5X0RT69bW5zZ\r\nOPvyJO4AhnTj0xr3jkq3xWgSsqYian+ji91W1qaiWzlWbzxJT0Qyqp7OsG+D\r\nuCnQW+my3iWDl1AoJ4OZvSz4RAjcU3s0aZZFEMfOUgZGtNO7DTT40mZmftJC\r\n7dBAnCEhZ8k77pAH54nNxonszqUv6JsISuh6ZpZpD/53S4whD7aTsAjlVPOT\r\nIPDF3SdmOGt0miLlpUw7ioGCqszs2P6e5s4=\r\n=ItRK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","types":"src/types/index.d.ts","gitHead":"21945599ff777799abed9ce3d3b86cd21979b1d5","scripts":{"test":"exit 0;","build":"cross-env NODE_ENV=production webpack --config webpack.config.js","bundle":"npm run build; npm run build -- --env=v3","dev-vue":"poi examples/vue-example/index.js","dev-vuex":"poi examples/vuex-example/index.js","dev-wrap":"poi examples/wrap-example/index.js","precommit":"lint-staged","build-gh-pages":"poi build --out-dir=/tmp/gh-pages examples/vuex-example/index.js","dev-transition":"poi examples/transition-example/index.js"},"_npmUser":{"name":"williamdasilva","email":"william.da.silva@outlook.com"},"repository":{"url":"git+https://github.com/f/vue-wait.git","type":"git"},"_npmVersion":"8.19.2","description":"Vue Plugin for Global Loading Management","directories":{},"lint-staged":{"src/**/*.js":["prettier --single-quote --write","git add"],"examples/**/*.js":["prettier --single-quote --write","git add"]},"_nodeVersion":"18.10.0","_hasShrinkwrap":false,"devDependencies":{"poi":"^10.2.3","vuex":"^4.0.2","husky":"^0.14.3","eslint":"^4.2.0","webpack":"^5.74.0","prettier":"^1.1.0","cross-env":"^5.1.3","css-loader":"^0.28.11","vue-loader":"^17.0.0","@babel/core":"^7.19.3","lint-staged":"^7.1.3","webpack-cli":"^4.10.0","babel-loader":"^8.2.5","epic-spinners":"^2.0.0","vue-html-loader":"^1.2.4","vue-style-loader":"^4.1.3","@babel/preset-env":"^7.19.4","escape-string-regexp":"^1.0.5","vue-template-compiler":"^2.7.11","@babel/plugin-transform-runtime":"^7.19.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-wait_1.0.1_1665503528119_0.19598180415352373","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-10-11T15:43:50.187Z","modified":"2025-12-03T13:17:23.161Z","1.0.0":"2022-10-11T15:43:50.503Z","1.0.1":"2022-10-11T15:52:08.322Z"},"bugs":{"url":"https://github.com/f/vue-wait/issues"},"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","homepage":"https://github.com/f/vue-wait#readme","keywords":["vue","vuex","nuxt","plugin","loading","loader"],"repository":{"url":"git+https://github.com/f/vue-wait.git","type":"git"},"description":"Vue Plugin for Global Loading Management","maintainers":[{"email":"william.da.silva@outlook.com","name":"williamdasilva"},{"email":"matthieu.verrecchia@chronotruck.com","name":"maffpool"},{"email":"vincent.piganaux@cevalogistics.com","name":"vincentpiganaux"}],"readme":"

\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[![npm version](https://badge.fury.io/js/vue-wait.svg)](https://badge.fury.io/js/vue-wait)\n\n---\n\n![vue-wait](https://user-images.githubusercontent.com/196477/42170484-4d91e36a-7e1f-11e8-9cee-816bfe857db2.gif)\n\n> [Play with demo above](https://f.github.io/vue-wait/).\n\nFork of VueWait for Vue 3 compatibility. Test. **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[![Edit VueWait Sandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](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\n\n```\n\n> **vue-wait has more abilities to make the management easier, please read the complete documentation.**\n\n# ▶️Detailed Start\n\n## 📦 Requirements\n\n- [Vue.js](https://vuejs.org) (v2.0.0+)\n\n## 🚀 Power Supplies\n- [Vuex](http://vuex.vuejs.org), optionally (v2.0.0+)\n\n## 🔧 Installation\n\nvia CLI:\n\n```bash\n$ yarn add vue-wait\n# or if you using npm\n$ npm install vue-wait\n```\n\nvia Vue UI:\n\n\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', // component name, you can set `my-loader` etc.\n\n registerDirective: true, // Registers `v-wait` directive\n directiveName: 'wait', // directive name, you can set `my-loader` etc.\n\n }),\n});\n```\n\n## ♻️ Usage with Vuex\n\nSimply set `useVuex` parameter to `true` and optionally override\n`vuexModuleName`\n\n```js\nimport VueWait from 'vue-wait'\n\nVue.use(Vuex)\nVue.use(VueWait) // add VueWait as Vue plugin\n```\n\nThen you should register `VueWait` module:\n\n```js\nnew Vue({\n el: '#app',\n store,\n wait: new VueWait({\n useVuex: true, // You must pass this option `true` to use Vuex\n vuexModuleName: 'vuex-example-module' // It's optional, `wait` by default.\n }),\n});\n```\n\nNow `VueWait` will use `Vuex` store for data management which can be traced in `Vue DevTools > Vuex`\n\n## ♻️ Usage with Nuxt.js\n\nAdd `vue-wait/nuxt` to modules section of `nuxt.config.js`\n\n```js\n{\n modules: [\n // Simple usage\n 'vue-wait/nuxt'\n\n // Optionally passing options in module configuration\n ['vue-wait/nuxt', { useVuex: true }]\n ],\n\n // Optionally passing options in module top level configuration\n wait: { useVuex: true }\n}\n```\n\n## 🔁 `VueWait` Options\n\nYou can use this options for customize VueWait behavior.\n\n| Option Name | Type | Default | Description |\n| ----------- | ---- | ------- | ----------- |\n| `accessorName` | `String` | `\"$wait\"` | You can change this value to rename the accessor. E.g. if you rename this to `$w`, your `VueWait` methods will be accessible by `$w.waits(..)` etc. |\n| `useVuex` | `Boolean` | `false` | Use this value for enabling integration with `Vuex` store. When this value is true `VueWait` will store data in `Vuex` store and all changes to this data will be made by dispatching actions to store |\n| `vuexModuleName` | `String` | `\"wait\"` | Name for `Vuex` store if `useVuex` set to true, otherwise not used. |\n| `registerComponent` | `Boolean` | `true` | Registers `v-wait` component. |\n| `componentName` | `String` | `\"v-wait\"` | Changes `v-wait` component name. |\n| `registerDirective` | `Boolean` | `true` | Registers `v-wait` directive. |\n| `directiveName` | `String` | `\"v-wait\"` | Changes `v-wait` directive name. |\n\n## 🌈 Global Template Helpers\n\n**vue-wait** provides some helpers to you to use in your templates.\nAll features can be obtained from $wait property in Vue components.\n\n#### `.any`\n\nReturns boolean value if any loader exists in page.\n\n```vue\n\n```\n\n#### `.is(loader String | Matcher)` or `.waiting(loader String | Matcher)`\n\nReturns boolean value if given loader exists in page.\n\n```vue\n\n```\n\nYou can use **`waiting`** alias instead of **`is`**.\n\n```vue\n\n```\n\nAlso you can use matcher to make it more flexible:\n\nPlease see [matcher](https://github.com/sindresorhus/matcher/) library to see how to use matchers.\n\n```vue\n\n```\n\n#### `.is(loaders Array)` or `.waiting(loaders Array)`\n\nReturns boolean value if some of given loaders exists in page.\n\n```vue\n\n```\n\n#### `.start(loader String)`\n\nStarts the given loader.\n\n```vue\n\n```\n\n#### `.end(loader String)`\n\nStops the given loader.\n\n```vue\n\n```\n\n#### `.progress(loader String, current [, total = 100])`\n\nSets the progress of the given loader.\n\n```vue\n\n```\n\n##### Completing the Progress\n\nTo complete the progress, `current` value should be set bigger than `100`.\nIf you `total` is given, `current` must be bigger than `total`.\n\n```vue\n\n```\n\nor\n\n```vue\n\n```\n\n#### `.percent(loader String)`\n\nReturns the percentage of the given loader.\n\n```vue\n\n```\n\n## 🏹 Directives\n\nYou can use directives to make your template cleaner.\n\n#### `v-wait:visible='\"loader name\"'`\n\nShows if the given loader is loading.\n\n```vue\n\n```\n\n#### `v-wait:hidden='\"loader name\"'` or `v-wait:visible.not='\"loader name\"'`\n\nHides if the given loader is loading.\n\n```vue\n\n```\n\n#### `v-wait:disabled='\"loader name\"'`\n\nSets `disabled=\"disabled\"` attribute to element if the given loader is loading.\n\n```vue\n\n```\n\n#### `v-wait:enabled='\"loader name\"'` or `v-wait:disabled.not='\"loader name\"'`\n\nRemoves `disabled=\"disabled\"` attribute to element if the given loader is loading.\n\n```vue\n\n```\n\n#### `v-wait:click.start='\"loader name\"'`\n\nStarts given loader on click.\n\n```vue\n\n```\n\n#### `v-wait:click.end='\"loader name\"'`\n\nEnds given loader on click.\n\n```vue\n\n```\n\n#### `v-wait:toggle='\"loader name\"'`\n\nToggles given loader on click.\n\n```vue\n\n```\n\n#### `v-wait:click.progress='[\"loader name\", 80]'`\n\nSets the progress of given loader on click.\n\n```vue\n\n```\n\n## 🔌 Loading Action and Getter Mappers\n\n**vue-wait** provides `mapWaitingActions` and `mapWaitingGetters` mapper to be used with your Vuex stores.\n\nLet's assume you have a store and async **action**s called `createUser` and `updateUser`.\nIt will call the methods you map and will start loaders while action is resolved.\n\n```js\nimport { mapWaitingActions, mapWaitingGetters } from 'vue-wait'\n\n// ...\n methods: {\n ...mapWaitingActions('users', {\n getUsers: 'loading users',\n createUser: 'creating user',\n updateUser: 'updating user',\n }),\n },\n computed: {\n ...mapWaitingGetters({\n somethingWithUsers: [\n 'loading users',\n 'creating user',\n 'updating user',\n ],\n deletingUser: 'deleting user',\n }),\n }\n// ...\n```\n\nYou can also map **action** to custom method and customize loader name like in example below:\n\n```js\nimport { mapWaitingActions, mapWaitingGetters } from 'vue-wait'\n\n// ...\n methods: {\n ...mapWaitingActions('users', {\n getUsers: { action: 'getUsers', loader: 'loading users' },\n createUser: { action: 'createUser', loader: 'creating user'},\n createSuperUser: { action: 'createUser', loader: 'creating super user' },\n }),\n },\n// ...\n```\n\nThere is also possibility to use array as a second argument to mapWaitingActions:\n```js\n// ...\n methods: {\n ...mapWaitingActions('users', [\n 'getUsers',\n { method: 'createUser', action: 'createUser', loader: 'creating user'},\n { method: 'createSuperUser', action: 'createUser', loader: 'creating super user' },\n ]),\n },\n// ...\n\n\n```\n\n### ☢️Advanced Getters and Actions Usage\n\n> The Vuex module name is `wait` by default. If you've changed on config, you should get it by `rootGetters['/is']` or `rootGetters['/any']`.\n\nYou can access `vue-wait`'s Vuex getters using `rootGetters` in Vuex.\n\n```js\ngetters: {\n cartOperationInProgress(state, getters, rootState, rootGetters) {\n return rootGetters['wait/is']('cart.*');\n }\n},\n```\n\nAnd you can start and end loaders using `wait` actions. You must pass `root: true` option to the `dispatch` method.\n\n```js\nactions: {\n async addItemToCart({ dispatch }, item) {\n dispatch('wait/start', 'cart.addItem', { root: true });\n await CartService.addItem(item);\n dispatch('wait/end', 'cart.addItem', { root: true });\n }\n},\n```\n\n#### `waitFor(loader String, func Function [,forceSync = false])`\n\nDecorator that wraps function, will trigger a loading and will end loader after the original function (`func` argument) is finished.\n\nBy default `waitFor` return async function, if you want to wrap default sync function pass `true` in last argument\n\n_Example using with async function_\n\n```js\nimport { waitFor } from 'vue-wait';\n\n...\nmethods: {\n fetchDataFromApi: waitFor('fetch data', async function () {\n function sleep(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n // do work here\n await sleep(3000);\n // simulate some api call\n this.fetchResponse = Math.random()\n })\n}\n...\n```\n\nSee also `examples/wrap-example`\n\n## 💧 Using `v-wait` Component\n\nIf you disable `registerComponent` option then import and add `v-wait` into components\n\n```js\nimport vLoading from 'vue-wait/src/components/v-wait.vue'\ncomponents: {\n 'v-wait': vLoading\n}\n```\n\nIn template, you should wrap your content with `v-wait` component to show loading on it.\n\n```vue\n\n \n\n This will be shown when \"fetching data\" loader ends.\n\n```\n\nBetter example for a `button` with loading state:\n\n```vue\n\n```\n\n## 🔁 Transitions\n\nYou can use transitions with `v-wait` component.\n\nJust pass `` props and listeners to the `v-wait` with `transition` prop.\n\n```vue\n\n \n My content\n\n```\n\n## ⚡️ Making Reusable Loader Components\n\nWith reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better **user loading experience**.\n\n\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```\n\nYou may want to design your own reusable loader for your project. You better create a wrapper component called `my-waiter`:\n\n```vue\n\n\n tr:\n loading: Yükleniyor...\n en:\n loading: Loading...\n\n\n\n\n\n```\n\nNow you can use your spinner everywhere using `slot='waiting'` attribute:\n\n```vue\n\n```\n\n## 📦 Using with external spinner libraries\n\nYou can use `vue-wait` with another spinner libraries like [epic-spinners](https://github.com/epicmaxco/epic-spinners) or other libraries. You just need to add `slot=\"waiting\"` to the component and Vue handles rest of the work.\n\nFirst register the component,\n```js\nimport { OrbitSpinner } from 'epic-spinners';\nVue.component('orbit-spinner', OrbitSpinner);\n```\n\nThen use it in your as a `v-wait`'s `waiting` slot.\n```vue\n\n \n\n```\n\n... and done!\n\nFor other libraries you can use, please see [Loaders section of **vuejs/awesome-vue**](https://github.com/vuejs/awesome-vue#loader).\n\n## 🚌 Run example\n\nUse `npm run dev-vuex`, `npm run dev-vue` or `npm run dev-wrap` commands.\nfor running examples locally.\n\n## ✔ Testing components\n\nYou can test components using `vue-wait` but it requires configuration. Let's take a basic component for instance:\n\n```vue\n\n \n
    \n
  • {{ suggestion.Name }}
    • \n
\n\n```\n\n```js\nconst localVue = createLocalVue();\nlocalVue.use(Vuex); // optionally when you use Vuex integration\n\nit('uses vue-wait component', () => {\n const wrapper = shallowMount(Suggestions, { localVue });\n expect(wrapper.find('.suggestions').exists()).toBe(true);\n});\n```\n\n`vue-test-utils` will replace `v-wait` component with an empty `div`, making it difficult to test correctly.\n\nFirst, make your local Vue instance use `vue-wait`,\n\n```js\nconst localVue = createLocalVue();\nlocalVue.use(Vuex); // optionally when you use Vuex integration\nlocalVue.use(VueWait);\n```\n\nThen inject the `wait` property using `VueWait` constructor,\n\n```js\nit('uses vue-wait component', () => {\n const wrapper = shallowMount(SuggestedAddresses, {\n localVue,\n wait: new VueWait()\n });\n expect(wrapper.find('.suggestions').exists()).toBe(true); // it works!\n});\n```\n\n## For Development on vue-wait\nInstall packages\n```bash\n$ yarn install\n# or if you using npm\n$ npm install\n```\n\nBundle it\n```bash\n$ yarn bundle\n# or if you using npm\n$ npm run bundle\n```\n\n## 🎯 Contributors\n\n - Fatih Kadir Akın, (creator)\n - Igor, (maintainer, made Vuex-free)\n\n## 🔗 Other Implementations\n\nSince **vue-wait** based on a very simple idea, it can be implemented on other frameworks.\n\n - [react-wait](https://github.com/f/react-wait): Multiple Process Loader Management for React.\n - [dom-wait](https://github.com/f/dom-wait): Multiple Process Loader Management for vanilla JavaScript.\n\n## 🔑 License\n\nMIT © [Fatih Kadir Akın](https://github.com/f)\n","readmeFilename":"README.md"}