Unstyled v-autocomplete on ssr

[tiagoporto]

Environment

Vuetify Version: 3.7.6
Vue Version: 3.5.13
Browsers: Google Chrome, Safari, Chrome Android
OS: Mac OS 10.15.7

Steps to reproduce

I'm using nuxt@3.16.1 with SSR enabled and vuetify-nuxt-module@0.17.1.
I have a v-autocomplete component https://github.com/tiagoporto/svg-music-logos/blob/main/src/components/AppHeader/AppHeader.vue#L147
when loading, the component is unstyled.

Loading

Complete

The issue is happening on this page: https://svg-music-logos.tiagoporto.com/svg-music-logos/

Am I missing something?

[userquin]

There is nothing we can do if you don't enable http client hints: check https://nuxt.vuetifyjs.com/guide/server-side-rendering.html

Uhmmm, weird, the page seems to be fine on first request, check devtools (Chrome) response preview...

[userquin]

There is an hydration missmatch error in the console, maybe you'll need to use app:suspense:resolve to render that component once resolved.

[tiagoporto]

There is nothing we can do if you don't enable http client hints: check https://nuxt.vuetifyjs.com/guide/server-side-rendering.html

Uhmmm, weird, the page seems to be fine on first request, check devtools (Chrome) response preview...

Hi @userquin, thank you for your reply. I'm kind of new to Nuxt SSR, I've tried to enable ssrClientHints, but the documentation is unclear.

tiagoporto/svg-music-logos@f3445fa

Do you have an example?

Thanks

[userquin]

You should read the docs and update the entries in your app: https://github.com/vuetifyjs/nuxt-module/blob/main/playground/nuxt.config.ts#L44-L51

[tiagoporto]

@userquin I've set ssrClientHints, tiagoporto/svg-music-logos@5944f51

https://svg-music-logos.tiagoporto.com/svg-music-logos/

But I don't know what to expect. Should there be some error in the console?
The only log I see is vuetify:ready.

[userquin]

The hydration missmatch still there so the problem should be the v-autocomplete. I'll try to figure out what's going on with v-autocomplete in the afternoon.

Can you start dev server and check the devtools warnings on page refresh (without pwa)?

[tiagoporto]

Hi @userquin, there are no errors/warnings in the console.

[userquin]

looks like the problem seems to be the v-model, you should move the ref to useState instead, use import.meta.server to configure selected here https://github.com/tiagoporto/svg-music-logos/blob/main/src/components/AppHeader/AppHeader.vue#L17C1-L22C2

const selectedArtist = useState<Artist | null>('selected-artist', () => undefined)
if (import.meta.server && params.artistId) {
  // set it here: same logic
}

EDIT: you should check if you need to use await in both collections (useFetch)

[userquin]

I can still see the missmatch error here https://svg-music-logos.tiagoporto.com/svg-music-logos/:

[tiagoporto]

looks like the problem seems to be the v-model, you should move the ref to useState instead, use import.meta.server to configure selected here https://github.com/tiagoporto/svg-music-logos/blob/main/src/components/AppHeader/AppHeader.vue#L17C1-L22C2

const selectedArtist = useState<Artist | null>('selected-artist', () => undefined)
if (import.meta.server && params.artistId) {
// set it here: same logic
}
EDIT: you should check if you need to use await in both collections (useFetch)

I'll try, but the issue happened before adding the v-model.

[tiagoporto]

I can still see the missmatch error here https://svg-music-logos.tiagoporto.com/svg-music-logos/:

Some clue, why I cannot see this error in development?

[userquin]

In development you should see the missmatch error as a warning in the warnings tab, if missing then something is wrong between local dev and build: can you try building and running in your local using node preset?

[tiagoporto]

Hi @userquin, I did a few tests, and the issue persists.

• First of all, I've updated nuxt and vue to the latest.

• I've fixed the hydration https://svg-music-logos.tiagoporto.com.
  

• I've replaced ref with useState.

• In the last test, I've added a simple example from v-autocomplete:

  <v-autocomplete
    label="Autocomplete"
    :items="[
      'California',
      'Colorado',
      'Florida',
      'Georgia',
      'Texas',
      'Wyoming',
    ]"
  ></v-autocomplete>

Loading

Complete

• Building and running locally produces the same result as production.

[userquin]

Then looks like it is a problem with the top level await with useFetch or a problem/bug with v-autocomplete and SSR

[tiagoporto]

@userquin, I finally found the issue. The AppHeader component was inside a Nuxt Layout component, after moving it out, it's working.

After reading the documents, I guess this could be the root cause.

For best performance, components placed in this directory will be automatically loaded via asynchronous import when used.

Thank you so much for your help.