A way to work on server components as normal components only during development

Describe the feature

Server components are rendered only on the server, and the associated javascript is not shipped to the client (unless it has dynamic children), thereby is no hydration on the client.

The Problem

This means there is an impact to how we can test behaviour by updating props of server components in vue-devtools. Other impacts include ability to use the component inspector in nuxt-devtools and the similar feature in vue-devtools to identify child components within server components.

Proposed solution:

One way to make sure any current devtools experience is not compromised is to have a way (through some nuxt config flag) to serve the server-components as normal components during development.

https://github.com/ElMassimo/iles/discussions/47 Iles does something similar, where Iles apps are single-page-applications during development, so that developers get the best developer experience, and when building for production, outputs a SSG (mpa flavour similar to Astro). Even though they are quite similar, this is a significant difference between Iles & Astro when using Vue islands.

Nuxt could adopt a similar approach. One drawback of this approach is the obvious difference between development & production, so making this opt-in for the users will help with that.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

No implementation files or tests are named. Start by locating how Nuxt server components are handled in development and how the devtools component inspector discovers them; then define the opt-in configuration and verify that development exposes normal components while production behavior remains unchanged.