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 |