refactor(nuxt): add treeshakeClientOnly experimental flag (#5934)

* refactor(nuxt): add `treeshakeClientOnly` experimental flag

* test: enable flag for fixture

docs/content/2.guide/3.directory-structure/4.components.md

@@ -174,9 +174,10 @@ Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 </template>
 ```
 
-::alert{type=warning}
+<!-- TODO: Add back after passing treeshakeClientOnly experiment -->
+<!-- ::alert{type=warning}
 Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
-::
+:: -->
 
 ## Library Authors
 

packages/nuxt/src/components/module.ts

@@ -137,7 +137,9 @@ export default defineNuxtModule<ComponentsOptions>({
         getComponents,
         mode: isClient ? 'client' : 'server'
       }))
+      if (nuxt.options.experimental.treeshakeClientOnly) {
         config.plugins.push(TreeShakeTemplatePlugin.vite({ sourcemap: nuxt.options.sourcemap, getComponents }))
+      }
     })
     nuxt.hook('webpack:config', (configs) => {
       configs.forEach((config) => {
@@ -147,7 +149,9 @@ export default defineNuxtModule<ComponentsOptions>({
           getComponents,
           mode: config.name === 'client' ? 'client' : 'server'
         }))
+        if (nuxt.options.experimental.treeshakeClientOnly) {
           config.plugins.push(TreeShakeTemplatePlugin.webpack({ sourcemap: nuxt.options.sourcemap, getComponents }))
+        }
       })
     })
   }

packages/schema/src/config/experimental.ts

@@ -24,5 +24,11 @@ export default {
      * @see https://github.com/nuxt/framework/issues/4084
      */
     externalVue: false,
+
+    /**
+     * Tree shakes contents of client-only components from server bundle
+     * @see https://github.com/nuxt/framework/pull/5750
+     */
+    treeshakeClientOnly: false,
   }
 }

test/fixtures/basic/nuxt.config.ts

@@ -28,6 +28,7 @@ export default defineNuxtConfig({
     }
   },
   experimental: {
-    reactivityTransform: true
+    reactivityTransform: true,
+    treeshakeClientOnly: true
   }
 })