Home

Looking at Nuxt’s request/navigation schema (and after some debugging) I discovered that a Page component’s asyncData and fetch methods are called after the validate method.

Would it be possible to flip this order so that validate is called after asyncData and fetch?

Here is my use case:

1. All of my app’s data is stored in the Vuex store
2. When navigating to posts/_id, I use the route param id to fetch some data from an API
3. I do so using the posts/_id.vue page component’s fetch method, passing along the route param id —something like: store.dispatch('fetchPost', route.params.id)
4. An async fetchPost action in the Vuex store calls my API with the payload id, returns a post record and then that record is committed to the store into a posts collection/array
5. Assuming that the call to the API was successful and a post exists for the provided id, I will now have my post record in my Vuex store.state.posts collection
6. I would then like to be able to validate my dynamic Post page by finding my post record in the store’s posts collection (again using the route.params.id)
7. However since validate is called before fetch, my store’s posts collection will be empty so that lookup returns no record and the validation fails

The only way around this is to use the nuxtServerInit action which does get called before a page’s validate method. However, this then means that this action will get quite cumbersome as I move or duplicate my route specific async calls to my API to within this action.

If validate were called after fetch then this wouldn’t be necessary and the nuxtServerInit action could remain relatively pure and simple.

Perhaps there is a reason why validate is called before that I am not aware of—either way, I would appreciate any help/suggestions.

BTW Nuxt is literally the best thing since sliced bread. Fantastic work 🎉