How to Use Nuxt.js Loading Progress Bar

Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that's shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own loading progress bar.

Active & Customize Progress Bar:

You can activate the progress bar on your Nuxt.js application by adding the loading property of the nuxt.config.js inside the export default { //code here } with the corresponding properties.

To set a green progress bar with a height of 5px, add the following code inside your project nuxt.config.js file.

export default {
  loading: {
    color: 'green',
    height: '5px',
    throttle: 0
  }
}

You can customize many things, you can change color(color name/color hex code), height, duration, direction for rtl sites, keep animating progress bar when loading takes longer than duration.

export default {
  loading: {
    color: 'green',
    height: '5px',
    duration: 1000,
    rtl: true,
    continuous: true
  }
}

Disable the Progress Bar:

You can disable the progress bar globally or locally. If you want to disable the progress bar globally then add loading: false in your nuxt.config.js file:

export default {
  loading: false
}

Your can also disable the progress bar for specific page. Add loading: false in the specific page.

<template>
  <h1>Contact Us Page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

Custom Loading Progress Bar:

You can also create your own custom loading progress bar. Inside the component directory create your custom component in 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 go to nuxt.config.js file and add your custom loading component to the loading property.

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

It’s very simple, right? Now you can see your own custom loading bar between routes changing.

Useful Links:

• Nuxt Loading Docs.
• Custom loading component example.