vue-loadable


vue-loadable improves your loading state flow by providing methods and helpers to manage it.

``html



`

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.

`js
import Vue from 'vue';
import Loadable from 'vue-loadable';

Vue.use(Loadable);
`

You can install it locally instead with LoadableMixin mixin.

`vue

`

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.

`js
Vue.component('SignInForm', {
methods: {
signIn: loadable(async function(name) {
// ...
}, 'signIn'),
},

async mounted() {
this.$isLoading('signIn');
//=> false

const promise = this.signIn('Vitor');

this.$isLoading('signIn');
//=> true

await promise;

this.$isLoading('signIn');
//=> false
},
});
`

> It passes down the function arguments, rejects the errors and resolves the returned value.
>
> `ts
> async function confirmUsername(username: string): Promise {
> // ...
> }
>
> export default {
> methods: {
> // Returns a function with same signature, but handling loading states.
> confirm: loadable(confirmUsername, 'confirmation'),
> },
> async mounted(): Promise {
> try {
> const isConfirmed = await this.confirm('VitorLuizC');
> this.$router.push(isConfirmed ? '/checkout' : '/confirmation');
> } catch (error) {
> new Rollbar.Error(error).send();
> }
> },
> };
> `

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

`vue