Vue 3 Loading Indicator

Did you use nuxtjs before?. If so, you can use the following loading indicator: doc.
This library inspired by Nuxt Loading will bring a loading indicator to your application.

Installation

npm i @nguyenshort/vue3-loading-indicator

Initialization

// main.ts, main.js
import Vue from "vue";
import VueLoadingIndicator from '@nguyenshort/vue3-loading-indicator'

const app = createApp(App)

app.use(VueLoadingIndicator, {
    /* option */
    color?: string
    errorColor?: string
    duration?: number
    timeGap?: number
    throttle?: number
    skipDuplicate?: boolean
    autoFinish?: boolean
    delay?: number
})

Usage

Setup component

Don't use component inside the router-vue

<template>
  <!-- Your content -->
  <router-view></router-view>
  
  <!-- Your loading indicator -->
  <vue-loading-indicator />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'FooApp'
})
</script>

Loading Indicator Instance

To access the loading indicator instance, use the $loading property or inject it into your component.

Option API

export default defineComponent({
  name: 'BarPage',
    methods: {
      
        showLoading() {
            this.$loading.start()
            setTimeout(() => {
                this.$loading.finish()
            }, 3000)
        }
        
    }
})

Component API

import { useLoadingIndicator } from '@nguyenshort/vue3-loading-indicator'

const $loading = useLoadingIndicator() // VueLoadingIndicatorInstance

Axios Loading Indicator

If you want to use Vue Loading Indicator in axios, or plugins..., you can use the following code:

// main.ts, main.js
const app = createApp(App)

app.use(VueLoadingIndicator, {/* option */ })
// use apollo plugin after VueLoadingIndicator
app.use(apollo)

// in apollo plugin
const plugin = {
    install(app: App) {
        // VueLoadingIndicatorInstance
        const $loading = app.config.globalProperties.$loading

        const http = axios.create({
            // Options
        })

        http.interceptors.request.use(
            (config) => {
                // Start loading
                $loading?.start()
                return config
            },
            (error) => {
                console.log(error) // for debug
                Promise.reject(error)
            }
        )

        app.provide<AxiosInstance>('$axios', http)
        app.config.globalProperties.$axios = http
    }
}

Apollo Loading Indicator

For Apollo, you can use the following code:

const plugin = {
    install(app: App) {
        // VueLoadingIndicatorInstance
        app.provide(ApolloClients, {
            default: () => {

                const roundTripLink = new ApolloLink((operation, forward) => {
                    // Start the loading indicator
                    $loading?.start()

                    return forward(operation).map((data) => {
                        if (data.errors) {
                            // Show error loading indicator
                            $loading?.fail()
                        } else {
                            // Stop the loading indicator
                            $loading?.finish()
                        }
                        return data
                    })
                })

                return new ApolloClient({
                    link: roundTripLink.concat(/* others link */),
                    // some other options
                })
            }
        })
    }
}

Methods

| Method | Params | Description | |------------|-----------|---------------------| | start() | (options) | Start loading | | finish() | | Finish loading | | fail() | | Show error loading | | pause() | | Pause loading | | continue() | | Continue loading | | clear() | | Clear loading | | set | (num) | Set loading options | | inc | (num) | Inc loading process | | dec | (num) | Dec loading process |