vue-is-loading

    1.0.5 • Public • Published

    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,
    );

    Changelog

    1.0.5

    • Adds instance to properties of loadable for use in Composition API components with script setup.

    1.0.4

    • Removes use of this.$set, since Vue 3 does not require them.

    1.0.3

    • Fixes loadable to work with Vue's Composition API with <script setup>.

    Install

    npm i vue-is-loading

    DownloadsWeekly Downloads

    11

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    6.77 kB

    Total Files

    5

    Last publish

    Collaborators

    • danhulton