DEV Community

loading...
Cover image for How to Use Nuxt.js Loading Progress Bar

How to Use Nuxt.js Loading Progress Bar

Md Aminur Islam
I am Aminur Islam Arnob, Web Designer & Developer from Dhaka, Bangladesh. I have been working for the last 5 years on multiple Web Based Technologies.
・2 min read

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Then go to nuxt.config.js file and add your custom loading component to the loading property.

export default {
  loading: '~/components/LoadingBar.vue'
}
Enter fullscreen mode Exit fullscreen mode

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

Useful Links:

Discussion (0)