The loading Property

• Type: Boolean or Object or String

Out of the box, Nuxt.js gives you its own loading progress bar component that’s shown between routes. You can customize it, disable it or create your own component.

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.

During your page’s component’s mounting process, the $loading property may not be immediately available to access. 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)
    })
  }
}

Disable the Progress Bar

• Type: Boolean

If you don’t want to display the progress bar between the routes, simply add loading: false in your nuxt.config.js file:

export default {
  loading: false
}

Customizing the Progress Bar

• Type: Object

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'
  }
}

List of properties to customize the progress bar.

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 a guestimate 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 behaviour 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 start growing from 0% to 100% again, this repeats until the loading finishes.

Example of a continuous progress bar:

Using a Custom Loading Component

• Type: String

You can also create your own component that Nuxt.js will call instead of its 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.js.

Your component has to expose some of these methods:

We can create our custom component in components/loading.vue:

<template lang="html">
  <div class="loading-page" v-if="loading">
    <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, we update our nuxt.config.js to tell Nuxt.js to use our component:

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