nuxt can I manually show the loading indicator?

Question

I would like to use the loading indicator that is displayed in nuxt when I navigate between routes for all my ajax calls.

Can I somehow trigger the indicator to show?

Answer 1

methods: {
  async onSubmit() {
    try {
      this.$root.$loading.start();
      const result = await someAsyncMethod();
    } catch (err) { 
      // this.$toast.error(err.message);
    } finally { 
      this.$root.$loading.finish(); 
    }
},

This could be a typical async method using the default loading indicator.

Answer 2

In new versions, it's this.$nuxt.loading.start()

methods: {
  search() {
    this.$nuxt.$loading.start() //STARTS LOADING
    this.$axios
      .get('/api/product')
      .then((response) => {
        this.$nuxt.$loading.finish() //STOPS LOADING
        this.results = response.data
      })
      .catch((err) => {
        this.$store.commit('snackbar/add', err.response.data)
    })
  }
}

NOTE

If you have set dark to false then the progress bar will be showing in white color and in white background, it will not be visible. remember to change the color of progress in nuxt.config.js