Nuxt•2y ago

asyncData updates before page transition is done

I am usign the /server/api and asyncData to fetch the data. Here is an example from my /pages/[slug].vue:

const route = useRoute();

const { data: page } = await useAsyncData("page", () =>
  $fetch(`/api/${route?.params?.slug}`)
);

const route = useRoute();

const { data: page } = await useAsyncData("page", () =>
  $fetch(`/api/${route?.params?.slug}`)
);

however, when I am routing, the content is already changing while the page transition is still running. page transition is in out-in mode though. Anyone knows why this is happening? (I am on "nuxt": "^3.4.2") Thanks!

5 Replies

Cue•2y ago

Try using a unique key.

tierraOP•2y ago

This won't help. If I add a key I see both contents. I just did a test with useLazyAsyncData which works as I would expect in terms of navigation.

Cue•2y ago

What do you mean add? You’re already using a key.

tierraOP•2y ago

I am not sure what you meant with the unique key; I added :key="page._id" at the first div in my template. But this did not help. After adding this key, I was seeing both (old and new) content during the page transition. It is like as if the fetching of new data does not work until the page transition is faded out

Cue•2y ago

useAsyncData(`page${route.params?.slug ?? ''}`, …)

Gaming

Programming

asyncData updates before page transition is done