A Vue 3 JavaScript port of vue-loadable.
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);
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.
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>
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,
);
- Adds
instance
to properties ofloadable
for use in Composition API components withscript setup
.
- Removes use of
this.$set
, since Vue 3 does not require them.
- Fixes
loadable
to work with Vue's Composition API with<script setup>
.