framework
framework copied to clipboard
nuxt
Lazy .client components are not mounted or cause hydration issues
Environment
- Operating System:
Windows_NT - Node Version:
v16.11.1 - Nuxt Version:
3.0.0-rc.9 - Package Manager:
[email protected] - Builder:
vite - User Config:
- - Runtime Modules:
- - Build Modules:
-
Reproduction
https://stackblitz.com/edit/nuxt-starter-fmrgzt?file=app.vue,components%2FWorld.client.vue,components%2FFoo.client.vue,components%2FHello.vue
Describe the bug
Hi! lazy importing component does not work with .client components. Using direct import from "#components" cause hydration issue and calling the component using auto-import does not mount the component even if v-if is set to true.
On the stackblitz, the component World is being mounted when changing count due to App being re-rendered client-side (https://github.com/nuxt/framework/issues/7226).
But after the PR https://github.com/nuxt/framework/pull/7245 that fixed the issue (i'm currently testing this on https://github.com/nuxt/framework/commit/b68bfb0a24c6ae6eaf9b127d56ba4a04672db692 ), the component World is not being mounted.
Additional context
No response
Logs
No response
There's a warning in the docs saying this won't work (for the import part): https://v3.nuxtjs.org/guide/directory-structure/components#client-components
The rest of the issue seems a valid problem
yes about the explicit import there's currently a PR, the linked issue is https://github.com/nuxt/framework/issues/7085