The loading property

Nuxt uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component.


  • Type: Boolean or Object or String
  1. export default {
  2. mounted() {
  3. this.$nextTick(() => {
  4. this.$nuxt.$loading.start()
  5. setTimeout(() => this.$nuxt.$loading.finish(), 500)
  6. })
  7. }
  8. }

Disable the Progress Bar

  • Type: Boolean

nuxt.config.js

  1. export default {
  2. loading: false
  3. }

Customizing the Progress Bar

  • Type: Object
  1. export default {
  2. loading: {
  3. color: 'blue',
  4. height: '5px'
  5. }
  6. }

List of properties to customize the progress bar.

KeyTypeDefaultDescription
colorString‘black’CSS color of the progress bar
failedColorString‘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).
heightString‘2px’Height of the progress bar (used in the style property of the progress bar)
throttleNumber200In ms, wait for the specified time before displaying the progress bar. Useful for preventing the bar from flashing.
durationNumber5000In ms, the maximum duration of the progress bar, Nuxt assumes that the route will be rendered before 5 seconds.
continuousBooleanfalseKeep animating progress bar when loading takes longer than duration.
cssBooleantrueSet to false to remove default progress bar styles (and add your own).
rtlBooleanfalseSet the direction of the progress bar from right to left.

Using a Custom Loading Component

  • Type: String

Your component has to expose some of these methods:

MethodRequiredDescription
start()RequiredCalled when a route changes, this is where you display your component.
finish()RequiredCalled when a route is loaded (and data fetched), this is where you hide your component.
fail(error)OptionalCalled when a route couldn’t be loaded (failed to fetch data for example).
increase(num)OptionalCalled during loading the route component, num is an Integer < 100.

components/loading.vue

  1. <template lang="html">
  2. <div class="loading-page" v-if="loading">
  3. <p>Loading...</p>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data: () => ({
  9. loading: false
  10. }),
  11. methods: {
  12. start() {
  13. this.loading = true
  14. },
  15. finish() {
  16. this.loading = false
  17. }
  18. }
  19. }
  20. </script>
  21. <style scoped>
  22. .loading-page {
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background: rgba(255, 255, 255, 0.8);
  29. text-align: center;
  30. padding-top: 200px;
  31. font-size: 30px;
  32. font-family: sans-serif;
  33. }
  34. </style>

nuxt.config.js

  1. export default {
  2. loading: '~/components/loading.vue'
  3. }