Nuxt.js: Allow layouts or the error layout to use fetch/asyncData

[luishdz1010]

What problem does this feature solve?

My error page lives in a layout that needs to pull data for menus/footer, since layouts can't have fetch/asyncData blocks I normally add the fetch logic to the pages that use a specific layout. However this workaround doesn't work for the error page since it is not a page, but a layout.

This can't be done on NuxtServerInit because:

a) requests dispatched in nuxtServerInit are blocking, i.e. nuxt waits until the promise returned from nuxtServerInit is resolved before continuing, which makes things x2 slower when a page has other requests to make (all requests can and should be run in parallel)
b) different layouts have different fetch needs
c) wouldn't work on SPA mode

Do you guys have any workaround for this? Currently, my 404 error pages render with an empty footer and menu.

What does the proposed changes look like?

Add fetch and/or asyncData support to layouts, or at least the error layout.

_{This feature request is available on Nuxt community (#c7606)}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[luishdz1010]

This is still a problem in v2

[domi91c]

Does anyone have a solution for this? I'm trying to get the item count for a shopping cart to put in my navbar.

[atmar]

Also looking for a solution for this problem. I have a profile layout that need to reload profile data every time the layout is loaded.

[Jesus82]

Hi, I solved my problem this way:

• In the layout page, in mounted(), I dispatch an action
• Then in the Vuex store, this action makes the Api call, and fires the mutation with the response
  So, instead of having to wait for several API calls before start loading the page with nuxtServerInit, with this approach, the calls are made after the page has started loading (so loading is much fasters if you have several calls).

[luishdz1010]

The solution above doesn't work for SSR

[hecktarzuli]

I would say since the docs say to treat error.vue as a page comp, then this is really a bug, not a feature request :) . I have the exact same problem.

[hecktarzuli]

@luishdz1010 - Word is on the street that with @pi0 's latest merges the next version of Nuxt should allow fetch() on layout (and hopefully should be resolved with the page fetch in async)

[hecktarzuli]

Apparently this is waiting on vue 2.6 https://github.com/vuejs/vue/pull/9017 :(

[jagreehal]

@manniL vue 2.6 is out now so can the 'waiting for dependency' label be removed?

[manniL]

@jagreehal Indeed!

[luishdz1010]

Seems to still be a problem in Nuxt 2.5 :(

[Almusamim]

Hi, I solved my problem this way:

• In the layout page, in mounted(), I dispatch an action
• Then in the Vuex store, this action makes the Api call, and fires the mutation with the response
  So, instead of having to wait for several API calls before start loading the page with nuxtServerInit, with this approach, the calls are made after the page has started loading (so loading is much fasters if you have several calls).

Is there any example to see the code for this?

[snoopy83101]

https://cmty.app/nuxt/nuxt.js/issues/c8926
Maybe my problem will be solved as a result!

[JereMiO]

hi, is there any update on this issue ?

[starikovm]

For everyone who is stuck with that issue, you can use serverPrefetch of Vue.js.
Since Layout is a Vue component it will work.
Check documentation here
https://ssr.vuejs.org/guide/data.html#logic-collocation-with-components

[w11th]

I use anonymous middle to fetch data in layout on SPA mode, it worked for me. https://nuxtjs.org/api/pages-middleware#anonymous-middleware

[ashokpokharel977]

Have anyone got the solution?
the fetch works on pages, but not on layouts

[quangvision]

Same problem for me here. To dispatch an actions on every pages could be cumbersome rather than doing it once on layout component.

[MarkSonn]

@manniL any chance this can be reopened please? Fetch on Nuxt >= 2.12 when called in layout breaks my other page/component level fetch calls

[MarkSonn]

Managed to temporarily fix by using fetchOnServer: false. The disadvantage, of course, is that now it makes this API call client side on my statically generated site (unideal).

Docs for fetchOnServer

[manniL]

@manniL any chance this can be reopened please? Fetch on Nuxt >= 2.12 when called in layout breaks my other page/component level fetch calls

please raise a new issue for that.