vue-loadable
vue-loadable
improves your loading state flow by providing methods and helpers to manage it.
Initializing... <!-- Loaded content... -->
Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
npm install --save vue-loadable # Use the command below if you're using Yarn. yarn add vue-loadable
Installation from CDN
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
Installation on Vue
vue-loadable
need to be installed to enable loadable methods, loadable
decorator and mapLoadableMethods
helper.
To install globally, just pass default exported object as argment to Vue.use
.
;; Vue;
You can install it locally instead with LoadableMixin
mixin.
<script>import { LoadableMixin } from 'vue-loadable'; export default { mixins: [LoadableMixin],};</script>
API
-
loadable
decorates a function to change loading state during its execution. It sets the state as loading when function inits and unsets when it throws an error, when it resolves or when it returns a value.Second argument is the loading state name, is
"unknown"
when it's not defined.Vue;It passes down the function arguments, rejects the errors and resolves the returned value.
;TypeScript type definitions.
;;; -
mapLoadableMethods
maps methods into loadable ones that triggers loading states, it works pretty well with Vuex.It uses method's names as loading state name.
<template><div v-if="$isLoading('signInUser')">Carregando...</div><div v-else><SignedUserArea /></div></template><script>import { mapActions } from 'vuex';import { mapLoadableMethods } from 'vue-loadable';export default {methods: mapLoadableMethods(mapActions(['signInUser','signUpUser']))};TypeScript type definitions.
// `Method` and `LoadableMethod` are defined at `loadable` type definitions.;;; -
$isLoading
is a method to check if a state is loading.Argument is the loading state name, is
"unknown"
when it's not defined.<template><v-spinner v-if="$isLoading('initialize')" /><sign-in-form v-else @click="onClickSignIn" ... /></template><script>// ...export default {methods: {...,onClickSignIn () {if (!this.$isLoading('signIn')) // Call `signIn` only if its not loading.return;this.signIn();}}};TypeScript type definitions.
-
$isLoadingAny
is a method to check if any state is loading.<template><v-spinner v-if="$isLoadingAny()" /><div><sign-in-or-sign-up-form @signIn="onSignIn" @signUp="onSignUp" /></div></template><script>// ...export default {methods: {...,onSignUp () {if (!this.$isLoadingAny())return;this.signUp();},onSignIn () {if (!this.$isLoadingAny())return;this.signIn();}}};TypeScript type definitions.
-
$setLoading
is a method to set state as loading.Argument is the loading state name, is
"unknown"
when it's not defined.methods:...async {this; // set submission state as loading.await services;};TypeScript type definitions.
-
$unsetLoading
is a method to unset state as loading.Argument is the loading state name, is
"unknown"
when it's not defined.methods:...async {tryawait services;catch {}this; // unset submission state as loading.};TypeScript type definitions.
License
Released under MIT License.