feat: it works!

Author: antfu

examples/with-components/components/ClientAndServer.server.vue

@@ -4,3 +4,7 @@
     <slot />
   </div>
 </template>
+
+<script setup>
+console.log('Hi from Server Component!')
+</script>

examples/with-components/nuxt.config.ts

@@ -1,7 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  vite: true,
+  vite: false,
   components: {
     dirs: [
       '~/components',

packages/nuxt3/src/app/components/client-only.mjs

@@ -1,6 +1,6 @@
-import { ref, onMounted, defineComponent, createElementBlock } from 'vue'
+import { ref, onMounted, defineComponent, createElementBlock, h } from 'vue'
 
-export default defineComponent({
+const ClientOnly = defineComponent({
   name: 'ClientOnly',
   // eslint-disable-next-line vue/require-prop-types
   props: ['fallback', 'placeholder', 'placeholderTag', 'fallbackTag'],
@@ -17,3 +17,21 @@ export default defineComponent({
     }
   }
 })
+
+export function wrapClientOnly (component, mode) {
+  return defineComponent({
+    name: 'ClientOnlyWarpper',
+    setup (props, { attrs, slots }) {
+      const mounted = ref(false)
+      onMounted(() => { mounted.value = true })
+      return () => {
+        if (mounted.value === (mode !== 'server')) {
+          return h(component, { props, attrs }, slots)
+        }
+        return h('div')
+      }
+    }
+  })
+}
+
+export default ClientOnly

packages/nuxt3/src/app/components/nuxt-empty.mjs

@@ -0,0 +1,8 @@
+import { defineComponent, createElementBlock } from 'vue'
+
+export default defineComponent({
+  name: 'Empty',
+  render () {
+    return createElementBlock('div')
+  }
+})

packages/nuxt3/src/components/loader.ts

@@ -31,6 +31,7 @@ function transform (content: string, components: Component[], mode: 'server' | '
   let num = 0
   let imports = ''
   const map = new Map<Component, string>()
+  let hasEnvComponents = false
 
   // replace `_resolveComponent("...")` to direct import
   const newContent = content.replace(/ _resolveComponent\("(.*?)"\)/g, (full, name) => {
@@ -39,11 +40,19 @@ function transform (content: string, components: Component[], mode: 'server' | '
       const identifier = map.get(component) || `__nuxt_component_${num++}`
       map.set(component, identifier)
       imports += `import ${identifier} from "${getComponentPath(component, mode)}";`
+      if (component.envPaths) {
+        hasEnvComponents = true
+        return ` wrapClientOnly(${identifier}, '${mode}')`
+      }
       return ` ${identifier}`
     }
     // no matched
     return full
   })
 
+  if (hasEnvComponents) {
+    imports = 'import { wrapClientOnly } from \'#app/components/client-only\';' + imports
+  }
+
   return `${imports}\n${newContent}`
 }

packages/nuxt3/src/components/module.ts

@@ -66,24 +66,6 @@ export default defineNuxtModule<ComponentsOptions>({
         return
       }
 
-      // // Handle environment-specify components
-      // components.filter(i => i.envPaths).forEach((component) => {
-      //   const filename = `env-${component.pascalName}.vue`
-      //   component.filePath = `#build/${filename}`
-      //   component.shortPath = `#build/${filename}`
-      //   app.templates.push({
-      //     filename,
-      //     write: true,
-      //     getContents: () => getEnvComponentTemplate(component)
-      //   })
-      // })
-
-      app.templates.push({
-        filename: 'Empty.vue',
-        write: true,
-        getContents: () => '<template></template>'
-      })
-
       app.templates.push({
         ...componentsClientTemplate,
         options: { components }
@@ -130,14 +112,14 @@ export default defineNuxtModule<ComponentsOptions>({
       }))
     })
 
-    // TODO: webpack
     nuxt.hook('webpack:config', (configs) => {
       configs.forEach((config) => {
-        console.log(config)
+        config.plugins = config.plugins || []
+        config.plugins.push(loaderPlugin.webpack({
+          getComponents,
+          mode: config.name === 'client' ? 'client' : 'server'
+        }))
       })
     })
-
-    // addWebpackPlugin(loaderPlugin.webpack(loaderOptions))
-    // addVitePlugin(loaderPlugin.vite(loaderOptions))
   }
 })

packages/nuxt3/src/components/templates.ts

@@ -22,38 +22,30 @@ const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
   ].filter(Boolean).join(', ')
 }
 
-// export const getEnvComponentTemplate = (component: Component) => `
-// <script setup>
-// import Client from '${component.envPaths.client}'
-// ${component.envPaths.server ? `import Server from '${component.envPaths.server}'` : ''}
-// </script>
-
-// <template>
-//   <ClientOnly>
-//     <Client v-bind="$attrs"><slot/></Client>
-//     ${component.envPaths.server ? '<template #fallback><Server v-bind="$attrs"><slot/></Server></template>' : ''}
-//   </ClientOnly>
-// </template>
-// `
-
 export function getComponentPath (component: Component, mode?: NuxtPlugin['mode']) {
   if (!component.envPaths || !mode || mode === 'all') {
     return component.filePath
   }
-  return mode === 'client'
+  const envPath = mode === 'client'
     ? component.envPaths.client
-    : component.envPaths.server || '#build/Empty.vue'
+    : component.envPaths.server
+  return envPath || '#app/components/nuxt-empty'
 }
 
 function getComponentTemplate (components: Component[], mode: NuxtPlugin['mode']) {
-  return `import { defineAsyncComponent } from 'vue'
+  return `import { defineAsyncComponent, h as __h } from 'vue'
+import { wrapClientOnly } from '#app/components/client-only'
 
 const components = {
 ${components.filter(c => c.global !== false).map((c) => {
-  const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
+  let exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
   const magicComments = createImportMagicComments(c)
+  const path = getComponentPath(c, mode)
+  if (c.envPaths) {
+    exp = `wrapClientOnly(${exp}, '${mode}')`
+  }
 
-  return `  '${c.pascalName}': defineAsyncComponent(() => import('${getComponentPath(c, mode)}' /* ${magicComments} */).then(c => ${exp}))`
+  return `  '${c.pascalName}': defineAsyncComponent(() => import('${path}' /* ${magicComments} */).then(c => ${exp}))`
 }).join(',\n')}
 }