Inside this page (https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators) says that I can create a custom loading indicator but not says how.
Somebody can help me - how to create and set this into to nuxt.config?
6 Answers
Here is a collection of default loading indicators in Nuxt.js source code.
Basically, you can specify the HTML template to use as a loadingIndicator in nuxt.config.js.
export default {
..., // Other Nuxt configuration
// Simple usage:
loadingIndicator: '~/custom-locading-indicator.html',
// Or with dynamic configuration variables passed via lodash template syntax
loadingIndicator: {
name: '~/custom-locading-indicator.html',
color: '#000',
background: '#fff'
}
}
Note, that indicators can have access to
6 Comments
user41495
it's another loading. I need for nuxtjs.org/api/configuration-loading-indicator not for nuxtjs.org/api/configuration-loading
user41495
The info that I wanted is for: Custom Loading Indicator
MontyTheMack
How can I use an image as the loader in this html template? @aBiscuit
aBiscuit
The same way you use in any HTML file - with an image tag (or background) and a link to the image. And place the image inside
static folder.
Amar Ratna Shakya
in my nuxt.config.js loadingIndicator: { name: '/loadingIndicator.html', }, and in static folder i have made on loadingIndicator.html file but it didn't work. the loader is not visible. but when i use collection of nuxt it work. custom didn't work.
|
Here is what you need :
You can create a component for your app. You can read about the Nuxt Loading Here
- Set the component has
loading: <your-component-path>Read more here The loading indicator Property. - For nuxt to load it on your pages, you need to add :
loadingIndicator: {
name: 'chasing-dots',
color: 'purple',
background: 'green'
}
Here is an example of how I configured the component in my app.
export default {
// LoadingBar component
loading: '~/path-to-your-loading-component/Loading.vue',
}
On the page you want to load, add this.
export default {
/*
** programmatically start the loader so we force the page to take x2seconds to load
*/
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 2000)
})
}
}
</script>
```
Comments
Nuxt also provides a $loading component so you can use it anywhere in your app, anyway you want to.
Using $nuxt.$loading.get() will return the current loading percentage.
For example:
<template>
<div>
<h1>Home page</h1>
<div v-show="$nuxt.$loading.get() > 0">
{{loadingIndicator}}%
</div>
</div>
</template>
<script>
export default {
computed: {
loadingIndicator() {
return this.$root.$loading.get()
}
}
}
</script>
1 Comment
vsync
I get an error:
$nuxt.$loading.get is not a functionfollowing @femanso I managed to customise my loading component with window.$nuxt.$root.$loading.percent instead of $nuxt.$loading.get()
computed: {
loadingIndicator() {
return window.$nuxt.$root.$loading.percent
}
},
Comments
If someone stumbles into this and wants to get the current loading progress from a vue component, you can use this:
EDIT: It worked until I restarted the dev server, then it stopped working. So not sure if this is a viable solution.
computed: {
nuxtLoading() {
return this.$nuxt.$loading.percent
},
},
Comments
Using Bootstrap 5 spinner (https://v5.getbootstrap.com/docs/5.0/components/spinners/), mode: 'universal'
In nuxt.config.js
loading: '~/components/loading.vue'
in components
<template>
<div
v-if="isLoading"
class="loader"
>
<div class="loader__spinner spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false
}
},
methods: {
start() {
this.isLoading = true
},
finish() {
this.isLoading = false
}
}
}
</script>
<style lang="scss" scoped>
.loader {
&__spinner {
position: fixed;
top: 10px;
left: 10px;
}
}
</style>
https://nuxtjs.org/guides/configuration-glossary/configuration-loading https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file=/components/loading.vue
Comments
