vue-is-loading

vue-is-loading

A Vue 3 JavaScript port of vue-loadable.

Installation

To add this package to your project, run:

yarn add vue-is-loading

Or:

npm install vue-is-loading

In your Vue setup file, add:

import IsLoading from 'vue-is-loading';

// ...

app.use(IsLoading);

Usage

This plugin exposes a global $isLoading function that you can check to see if a function that returns a promise has completed. Combined with a loading-spinner component or the disabled property, you can easily indicate to your user that a server-side action is still processing.

Options API

If you're still using the Vue 2-style options API, you can use the mapLoadableMethods helper:

<template>
  <div>
    <button
      :disabled="$isLoading('signup')"
      @click="submit"
    >
      Sign up
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { mapLoadableMethods } from 'vue-is-loading';

export default {
  methods: {
    isEmpty,

    ...mapLoadableMethods(
      mapActions('User', [
        'signup',
      ]),
    ),

    submit() {
      await this.signup();
    },
  },
};
</script>

Composition API

If you're using the new Vue 3-style Composition API, you can use the finer-grained loadable helper:

<template>
  <div>
    <button
      :disabled="$isLoading('signup')"
      @click="submit"
    >
      Sign up
    </button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { loadable } from 'vue-is-loading';

const store = useStore();

const signup = loadable(
  (values) => store.dispatch('Users/signup', values),
  'signup',
);
const submit = async () => {
  await signup();
};
</script>

If you want to use $isLoading as part of a computed() variable in a Composition API situation:

const agreeToTos = ref(false);

const instance = getCurrentInstance();
const submitDisabled = computed(
  () => instance.ctx.$isLoading('signup') || agreeToTos.value === false,
);