Server doesnt have params when client does
So I'm using useAsyncData to fetch some data, when I navigate to this page via NuxtLink the client makes the request fine but the server doesn't get the params from the id
const { id } = route.params; // set on client but not on server by initial load
const { data, error } = await useAsyncData<GuildGetResponse>('guild', () => $api(/api/guild/${id}/full));
HOWEVER when i refresh the page the server has access, my thought is that it doesnt have the id as it fetches before page load but surely it works?
4 Replies
still not sure whats the cause of this issue
Turns out NuxtLayout runs before a page loads, which means it doesnt have the route data properly,
https://stackoverflow.com/questions/76127659/route-params-are-undefined-in-layouts-components-in-nuxt-3
Stack Overflow
Route params are undefined in layouts/components in Nuxt 3
I'm having problems with route params being undefined in components/layouts in Nuxt 3. It seems like a bug but it would be such a critical bug, that I almost don't believe it can be a bug.
Consider...
I'm not sure if you can destructure route params like that you might need to call
route.params.id if you want to get id. Also, you might need to watch id
good shout didnt try a watch but got it solved :)