Nuxt.js - make API call only when component is rendered in layout

nuxt

#1

Hi, I have an user case where I want to load elements from 3 different API calls in order to populate a menu. This menu is not visible at the initial load, and it is shared by every page (so I have it as a component within the layout page).

Right now, I have it working by having that 3 requests in Vuex, in the nuxtServerInit hook, but that makes the initial load very slow. Is there any way to make the API call just when the menu component is rendered? (or to make it a lazy call, so the page can start rendering without having to wait for those calls to be finished)

Thanks in advance


#2

You could put your requests in the mounted of that one component of layout. Mounted is only executed client side, and it could update component data or store


#3

Hi, thanks for your reply. My problem is still how to do that from the layout page, as fetch/asyncData are not allowed there (as also described in this issue) https://github.com/nuxt/nuxt.js/issues/3776


#4

Finally solved it by dispatching Vuex actions from the layout component. The actions then make the api calls, but they do it after the inital page render, so it doesn’t block the load as if you put it in nuxtServerInit