Vue / Router: How do I correctly fetch data before rendering page content?

Spider :

I'm using Nuxt with Vue Router and Axios. I see Vue Router has this fantastic feature called Navigation Guards.

Unfortunately, in the example below, my beforeRouteEnter() function is called but seems to exit and switch pages before my manual next() method is called in fetchPageData(next).

What is the correct pattern here?

export default {
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.fetchPageData(next);
        });
    },
    methods: {
        async fetchPageData(next) {
            const result = await this.$axios.$get('/api/v2/inventory/3906?apiKey=f54761e0-673e-4baf-86c1-0b85a6c8c118');
            this.$store.commit('property/setProperty', result[0]);
            next();
        }
    }
}

I assume that my first call to next(vm => {}) is running asynchronously, allowing execution to continue, resulting in a page change before I (most likely incorrectly) try to callback next().

Michal Levý :

You are right, calling next() second time is incorrect. Your first call to next() tells Router "go on, you can proceed with changing active component (create/mount/render) and when the component is created, call my callback (passed as an argument to next())

You can follow guidance in Data fetching - fetching before navigation Docs ie. fetching data first and call next() after but that requires to extract fetch logic from the component itself.

Generally I find easier to write all component in the way assuming data are not here on 1st render and are coming later when all async calls resolve...

UPDATE Nuxt async data fetching options

As you are using Nuxt.js you have some other options how to use async data:

1. nuxtServerInit - useful to fill client-side Vuex store with data from server side
2. fetch method - The fetch method is used to fill the store before rendering the page. It's like the asyncData method except it doesn't set the component data and allows you to put the data into the store. Returning Promise from fetch method will make Nuxt wait for promise to resolve before it renders the component...
3. asyncData method can be used to to fetch data and put it inside component's data. Returning Promise from asyncData method will make Nuxt wait for promise to resolve before it renders the component...

export default {
  async fetch({store, $axios}) {
    const result = await $axios.$get('/api/v2/inventory/3906');
    store.commit('property/setProperty', result[0]);
  }
}