Slices on pages get rendered in the wrong order

Developing with Prismic
1

Hey everyone! I'm facing a rather weird behaviour on a rather simple Nuxt 3 site;
When initially navigating to a route, the slices of that route seem to get rendered in the wrong order (reverse).
I just can't figure why this is happening? It's also not happening always, just sometimes, but mostly on navigating to a route for the first time.
Has anybody experienced something similar?

Thanks in advance!

3

Hi @fsyntax,

This is very strange and I haven't heard of this happening before. Hopefully, we can sort out why this occurring and get it fixed quickly.

I suspect that this is an issue with your Nuxt 3 application, but I'd like to take a look at your Prismic API endpoint to rule out the possibility of this being an issue on the Prismic side of things. Can you provide me with the URL for your Prismic repo? If you don't want to share it publicly, you can send me a DM or raise this as a ticket from our support portal.

Assuming everything is working correctly on the Prismic side, then the next step would be to replicate the issue. Are you able to share your website code with me? Again, you can send it to me in a DM to keep it from being public. If not, then it would be helpful if you could create a minimal project that you're able to share that replicates this issue. Then we can troubleshoot and try to sort out what is going on.

Let me know if you have any questions about this.

4

Hi @Levi, thanks for reaching out! I'll send you a DM over :slight_smile:

6

Hi @fsyntax,

Thanks for sending over your Prismic repo URL. I poked around your API for a bit and all your slices seemed to be returned in the correct order there. So it looks like it isn't an issue on the Prismic side of things.

Good luck troubleshooting the issue in your app. If you manage to find what's causing it, it would be great if you could share what you find here in case anyone else ends up in the same situation.

7

Hey there!
So I got it working, I can't exactly tell what the issue was, but it must have been something with rendering modes.

1 Like
8

Can you tell us a bit more? Where do you change rendering modes?

10

Hi @fsyntax,

It seems we had a wrong snippet in our doc (totally our fault on that), can you try updating the async data on your nav links to something like this so it's unique across pages?

const { data: page } = useAsyncData(`programm/${route.params.uid}`, () =>
  prismic.client.getByUID("page", route.params.uid as string)
);

Thanks.

12

Hey @Phil! This is how my snippets look:

const { data: page } = useAsyncData(`[${route.params.uid}]` ?? '[home]', () =>
  prismic.client.getByUID('page', route.params.uid as string ?? 'home'),
)

But I already had the useAsyncData like that when the issue was present. I also think it wasn't because of the way I rendered these pages (i.e. either prerendered or in SSR). What I noticed that actually made a difference, is a conditional v-if on the SliceZone component, so that it remounts:

// [uid].vue
<template>
  <div>
    <SliceZone
      v-if="page?.data.slices" <-- This
      wrapper="main"
      :slices="page?.data.slices"
      :components="components"
    />
  </div>
</template>

Thanks for the follow up!

1 Like