[Vuejs]-Navbar not sending to the right place

by

0👍

In Nuxt you can wait for a promise to get resolved and after then, return the server-side rendered app to the client. In order to do this you can try the following asyncData hook which is just like mounted hook.

IMPORTANT: This can be used ONLY in page components – the ones in your pages/ folder

export default {
  props: ['someProp'],
  ...
  async asyncData() {
     await new Promise(resolve => {
       setTimeout(() => {
         resolve();
       }, 5000)
     });
  }
}

In this case I’ve used a simple Promise which gets resolved after 5 seconds. If you now go on the page that uses this, you will see on the browser tab a spinner loading for 5 seconds until the Promise is resolved.

You can do this when fetching as well, just remember to await it.

Highly suggest to check the Nuxt docs on this – Nuxt Data Fetching

Leave a comment