feat(components): .client.vue / .server.vue convention

[antfu]

🔗 Linked issue

nuxt/nuxt#11884

Continues from #1853

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR bring .client.vue and .server.vue conversion for components directly. This PR is focus on .client.vue client only components with optional .server.vue as SSR fallback. Server-only components will be left to future PRs.

How it works

When we do the component scanning, components with suffixes will be treated as one component entry with two file paths. Then we create a virtual component using templates with the wrapper by <ClientOnly>. This way we could use the component as normal but be able to do environment-specific logic.

Progress

• Scanning for .server.vue and .client.vue
• Virutal component
• Optimize bundling

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✔️ Deploy Preview for nuxt3-docs canceled.

🔨 Explore the source changes: 399f944

🔍 Inspect the deploy log: https://app.netlify.com/sites/nuxt3-docs/deploys/6232552869a46b0008f21714

[pi0]

Hi @antfu do you mind to fix merge conflicts?

[antfu]

For the bundle optimization, for now, I can see two ways of doing it:

• We create two "virtual components" that and generate two components plugin templates for client / server
• We create a stub virtual component and add two transform plugins for server/client to transform the stub into env-specific components

Do you have any idea on them? Thanks

[pi0]

Some improvement suggestions:

• We can simplify component interface with path: { [env: 'client' | 'server' | 'default']: string }
• Instead of always using a virtual component wrapping with <ClientOnly>, we can configure aliases for server/client bundlers differently that resolves to env specific version (unless there is missing pair of component for env)

[antfu]

We can simplify component interface with path: { [env: 'client' | 'server' | 'default']: string }

My initial idea is that filePath could serve the path virtual module so the rest of the code could remove as-is. Also it would be easier to check if a component has multiple versions by if(component.envPaths). This interface you proposal could also do, but is that ok as I guess it will be a breaking change?

Instead of always using a virtual component wrapping with , we can configure aliases for server/client bundlers differently that resolves to env specific version (unless there is missing pair of component for env)

I'd love to, but I guess that's more like the initial approach that we faced the hydration errors - and that's why we introduced the <ClientOnly> component. I have given another try based on the work of this PR on branch https://github.com/nuxt/framework/tree/feat/client-server-components-redirects , but unfortunately, the hydration does not seem to like it.

[antfu]

Guess what, I made it work! 🚀d093fa9 - Pushed to this branch

[andysay]

hello, when it will be merged??

[antfu]

Marked as draft

Global mode probably won't work due to the latest refactor of how components been resolved. Working with @danielroe on this.

[antfu]

Resolved :)

[atinux]

New conflicts again 😅

What do we do about this PR? If agree, I think next step if to update the docs in https://v3.nuxtjs.org/docs/directory-structure/components#clientonly-component in order to merge.

[pi0]

I think will finally have to rework this PR. Idea is nice but implementation needs to be revised with simpler component options.

[pi0]

Thank you again @antfu for working on this. Since PR is stalled with conflicts and I expect a simpler interface for implementation, let's track this via nuxt/nuxt#11884. We are also closer with nitro to support server-only components 🤞🏼