How can I create a custom loading indicator in Nuxt.js?

Question

Inside this page (https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators) says that I can create a custom loading indicator but not says how.

Somebody can help me - how to create and set this into to nuxt.config?

Answer 1

Here is a collection of default loading indicators in Nuxt.js source code.

Basically, you can specify the HTML template to use as a loadingIndicator in nuxt.config.js.

export default {
  ..., // Other Nuxt configuration

  // Simple usage:
  loadingIndicator: '~/custom-locading-indicator.html',

  // Or with dynamic configuration variables passed via lodash template syntax
  loadingIndicator: {
    name: '~/custom-locading-indicator.html',
    color: '#000',
    background: '#fff'
  }
}

Note, that indicators can have access to

Answer 2

Here is what you need :

You can create a component for your app. You can read about the Nuxt Loading Here

• Set the component has loading: <your-component-path> Read more here The loading indicator Property.
• For nuxt to load it on your pages, you need to add :

  loadingIndicator: {
    name: 'chasing-dots',
    color: 'purple',
    background: 'green'
  }

Here is an example of how I configured the component in my app.

export default {

  // LoadingBar component
  loading: '~/path-to-your-loading-component/Loading.vue',
}

On the page you want to load, add this.

export default {
  /*
   ** programmatically start the loader so we force the page to take x2seconds to load
   */
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  }
}
</script>
```

Answer 3

Nuxt also provides a $loading component so you can use it anywhere in your app, anyway you want to. Using $nuxt.$loading.get() will return the current loading percentage.

For example:

<template>
  <div>
    <h1>Home page</h1>
    <div v-show="$nuxt.$loading.get() > 0">
      {{loadingIndicator}}%
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    loadingIndicator() {
      return this.$root.$loading.get()
    }
  }
}
</script>

Answer 4

following @femanso I managed to customise my loading component with window.$nuxt.$root.$loading.percent instead of $nuxt.$loading.get()

computed: {
    loadingIndicator() {
      return  window.$nuxt.$root.$loading.percent
    }
  },

Answer 5

If someone stumbles into this and wants to get the current loading progress from a vue component, you can use this:

EDIT: It worked until I restarted the dev server, then it stopped working. So not sure if this is a viable solution.

  computed: {
    nuxtLoading() {
      return this.$nuxt.$loading.percent
    },
  },

Answer 6

Using Bootstrap 5 spinner (https://v5.getbootstrap.com/docs/5.0/components/spinners/), mode: 'universal'

In nuxt.config.js

loading: '~/components/loading.vue'

in components

<template>
  <div 
    v-if="isLoading"
    class="loader"
  >
    <div class="loader__spinner spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    start() {
      this.isLoading = true
    },
    finish() {
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.loader {
  &__spinner {
    position: fixed;
    top: 10px;
    left: 10px;
  }
}
</style>

https://nuxtjs.org/guides/configuration-glossary/configuration-loading https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file=/components/loading.vue