Loading
Out of the box, Nuxt gives you its own loading progress bar component that's shown between routes. You can customize it, disable it or even create your own loading component.
Customizing the Progress Bar
Among other properties, the color, size, duration and direction of the progress bar can be customized to suit your application's needs. This is done by updating the loading
property of the nuxt.config.js
with the corresponding properties.
For example, to set a blue progress bar with a height of 5px, we update the nuxt.config.js
to the following:
export default {
loading: {
color: 'blue',
height: '5px'
}
}
throttle: 0
.List of properties to customize the progress bar.
Key | Type | Default | Description | |
---|---|---|---|---|
color | String | 'black' | CSS color of the progress bar | |
failedColor | String | 'red' | CSS color of the progress bar when an error appended while rendering the route (if data or fetch sent back an error, for example). | |
height | String | '2px' | Height of the progress bar (used in the style property of the progress bar) | |
throttle | Number | 200 | In ms, wait for the specified time before displaying the progress bar. Useful for preventing the bar from flashing. | |
duration | Number | 5000 | In ms, the maximum duration of the progress bar, Nuxt assumes that the route will be rendered before 5 seconds. | |
continuous | Boolean | false | Keep animating progress bar when loading takes longer than duration. | |
css | Boolean | true | Set to false to remove default progress bar styles (and add your own). | |
rtl | Boolean | false | Set the direction of the progress bar from right to left. |
Disable the Progress Bar
If you don't want to display the progress bar between the routes, add loading: false
in your nuxt.config.js
file:
export default {
loading: false
}
The loading property gives you the option to disable the default loading progress bar on a specific page.
<template>
<h1>My page</h1>
</template>
<script>
export default {
loading: false
}
</script>
Programmatically starting the loading bar
The loading bar can also be programmatically started in your components by calling this.$nuxt.$loading.start()
to start the loading bar and this.$nuxt.$loading.finish()
to finish it.
The $loading
property may not be immediately available to be used during your page component's mounting process. To work around this, if you want to start the loader in the mounted
method, make sure to wrap your $loading
method calls inside this.$nextTick
as shown below.
export default {
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 500)
})
}
}
Internals of the Progress Bar
Unfortunately, it is not possible for the Loading component to know in advance how long loading a new page will take. Therefore, it is not possible to accurately animate the progress bar to 100% of the loading time.
Nuxt's loading component partially solves this by letting you set the duration
, this should be set to an estimate of how long the loading process will take. Unless you use a custom loading component, the progress bar will always move from 0% to 100% in duration
time (regardless of actual progression). When the loading takes longer than duration
time, the progress bar will stay at 100% until the loading finishes.
You can change the default behavior by setting continuous
to true. Then after reaching 100%, the progress bar will start shrinking back to 0% again in duration
time. When the loading is still not finished after reaching 0%, it will grow from 0% to 100% again. The process repeats until the loading finishes.
export default {
loading: {
continuous: true
}
}
Example of a continuous progress bar:
Using a Custom Loading Component
You can also create your own component that Nuxt will call instead of the default loading progress bar component. To do so, you need to give a path to your component in the loading
option. Then, your component will be called directly by Nuxt.
Your component has to expose some of these methods:
Method | Required | Description |
---|---|---|
start() | Required | Called when a route changes, this is where you display your component. |
finish() | Required | Called when a route is loaded (and data fetched), this is where you hide your component. |
fail(error) | Optional | Called when a route couldn't be loaded (failed to fetch data for example). |
increase(num) | Optional | Called during loading the route component, num is an Integer < 100. |
You can create your custom component in components/LoadingBar.vue
:
<template>
<div v-if="loading" class="loading-page">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start() {
this.loading = true
},
finish() {
this.loading = false
}
}
}
</script>
<style scoped>
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
text-align: center;
padding-top: 200px;
font-size: 30px;
font-family: sans-serif;
}
</style>
Then, you update your nuxt.config.js
to tell Nuxt to use your component:
export default {
loading: '~/components/LoadingBar.vue'
}
The loading indicator Property
When running Nuxt in SPA mode, there is no content from the server side on the first page load. So, instead of showing a blank page while the page loads, Nuxt gives you a spinner which you can customize to add your own colors or background and even change the the indicator.
export default {
loadingIndicator: {
name: 'circle',
color: '#3B8070',
background: 'white'
}
}
Built-in indicators
These indicators are imported from the awesome SpinKit project. You can check out its demo page to preview the spinners. In order to use one of these spinners all you have to do is add its name to the name property. No need to import or install anything. Here is a list of built in indicators you can use.
- circle
- cube-grid
- fading-circle
- folding-cube
- chasing-dots
- nuxt
- pulse
- rectangle-bounce
- rotating-plane
- three-bounce
- wandering-cubes
Built-in indicators support color
and background
options.
Custom indicators
If you need your own special indicator, a String value or Name key can also be a path to an HTML template of indicator source code! All of the options are passed to the template, too.
Nuxt's built-in source code is also available if you need a base!
![Sébastien Chopin](/_nuxt/image/841744.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/add3e2.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)