Wrong state on initial page load with SSR enabled

[jeffjfreeman]

Hi,

When using this module with SSR enabled, the Vuetify components are rendered in the wrong state on the initial page load. When disabling SSR, they are rendered as expected.

I created an example here: https://stackblitz.com/edit/nuxt-vuetify-ssr?file=app.vue

When the container loads, you'll notice none of the v-chips are rendered in active state, even though the v-model ref indicates the v-chips at index 1 and 4 should be in active state. If you disable SSR in nuxt.config.ts and reload the container, you'll notice the v-chips at index 1 and 4 are rendered in active state as expected.

[userquin]

I guess you should use useState: https://nuxt.com/docs/getting-started/state-management

[jeffjfreeman]

I guess you should use useState: https://nuxt.com/docs/getting-started/state-management

Hi, thank you for the quick reply! I'm actually using pinia in my project and having this issue. I updated the Stackblitz to use useState and the issue remains there as well.

[userquin]

Thats a problem with nuxt and pinia, once solved vuetify component should work, the state will be there unless vuetify components requires additional logic (I guess it should work, I will check your repro tmr)

Check this another ssr issue about theme: https://github.com/userquin/vuetify-nuxt-module/issues/58

[userquin]

https://pinia.vuejs.org/ssr/ https://pinia.vuejs.org/ssr/#state-hydration

[jeffjfreeman]

Thats a problem with nuxt and pinia, once solved vuetify component should work, the state will be there unless vuetify components requires additional logic (I guess it should work, I will check your repro tmr)

Check this another ssr issue about theme: #58

Unfortunately it's not specific to pinia. I have reproduced it with pinia, Vue ref, and Nuxt useState.

[userquin]

There is something failing in VChipGroup, check this repro using pinia: https://stackblitz.com/edit/nuxt-vuetify-ssr-xrmfb1

The chips cannot be selected, I guess the docs and the logic are wrong since the composable group is using the item.id to find the entry.

It seems isSelected is always false:

[userquin]

maybe you need to use a v-for with object notation

[jeffjfreeman]

Thanks for looking into this. I'll try opening an issue in the vuetify repo. It is definitely related to SSR because when I disable SSR everything works as expected.

[userquin]

Have you tried selecting the chips? There is no way with or without ssr

[jeffjfreeman]

In my Stackblitz they can be selected: https://stackblitz.com/edit/nuxt-vuetify-ssr?file=nuxt.config.ts

[GreyXor]

Thanks for looking into this. I'll try opening an issue in the vuetify repo. It is definitely related to SSR because when I disable SSR everything works as expected.

Hello, did you manage to fix/handle it?

[jeffjfreeman]

Thanks for looking into this. I'll try opening an issue in the vuetify repo. It is definitely related to SSR because when I disable SSR everything works as expected.

Hello, did you manage to fix/handle it?

Not yet, I haven't tried posting in the vuetify repo.

[AasmundN]

Hi, I have run into the same issue. Any updates?