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

examples/with-components/app.vue

@@ -7,7 +7,11 @@
       <!-- Auto Imported Components -->
       <HelloWorld class="text-2xl" />
       <Nuxt3 class="text-2xl" />
-      <ParentFolderHello class="mt-6" />
+      <ParentFolderHello class="my-6" />
+      <ClientAndServer style="color: red">
+        <div>[Slot]</div>
+      </ClientAndServer>
+      <JustClient />
     </div>
 
     <template #tips>

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const width = window.innerWidth
+</script>
+
+<template>
+  <div>
+    Window width: {{ width }}
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    Loading width... (server fallback)
+    <slot />
+  </div>
+</template>
+
+<script setup>
+console.log('Hi from Server Component!')
+</script>

examples/with-components/components/JustClient.client.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const height = window.innerHeight
+</script>
+
+<template>
+  <div>
+    This is client only.
+    Window height: {{ height }}
+  </div>
+</template>

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent, createElementBlock } from 'vue'
+import { ref, onMounted, defineComponent, createElementBlock, h } from 'vue'
 
 export default defineComponent({
   name: 'ClientOnly',
@@ -17,3 +17,19 @@ export default defineComponent({
     }
   }
 })
+
+export function wrapClientOnly (component, mode) {
+  return defineComponent({
+    name: 'ClientOnlyWrapper',
+    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')
+      }
+    }
+  })
+}

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

@@ -4,9 +4,11 @@ import { parseQuery, parseURL } from 'ufo'
 import { Component } from '@nuxt/schema'
 import { genImport } from 'knitwork'
 import MagicString from 'magic-string'
+import { getComponentPath } from './templates'
 
 interface LoaderOptions {
   getComponents(): Component[]
+  mode: 'server' | 'client'
 }
 
 export const loaderPlugin = createUnplugin((options: LoaderOptions) => ({
@@ -20,33 +22,42 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => ({
     return pathname.endsWith('.vue') && (query.type === 'template' || !search)
   },
   transform (code, id) {
-    return transform(code, id, options.getComponents())
+    return transform(code, id, options.getComponents(), options.mode)
   }
 }))
 
 function findComponent (components: Component[], name:string) {
   return components.find(({ pascalName, kebabName }) => [pascalName, kebabName].includes(name))
 }
 
-function transform (code: string, id: string, components: Component[]) {
+function transform (code: string, id: string, components: Component[], mode: 'server' | 'client') {
   let num = 0
   let imports = ''
   const map = new Map<Component, string>()
   const s = new MagicString(code)
+  let hasEnvComponents = false
 
   // replace `_resolveComponent("...")` to direct import
   s.replace(/ _resolveComponent\("(.*?)"\)/g, (full, name) => {
     const component = findComponent(components, name)
     if (component) {
       const identifier = map.get(component) || `__nuxt_component_${num++}`
       map.set(component, identifier)
-      imports += genImport(component.filePath, [{ name: component.export, as: identifier }])
+      imports += genImport(getComponentPath(component, mode), [{ name: component.export, as: identifier }])
+      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
+  }
+
   if (imports) {
     s.prepend(imports + '\n')
   }

packages/nuxt3/src/components/module.ts

@@ -1,8 +1,8 @@
 import { statSync } from 'fs'
 import { resolve, basename } from 'pathe'
-import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin, addTemplate, addPluginTemplate } from '@nuxt/kit'
+import { defineNuxtModule, resolveAlias, addTemplate, addPluginTemplate } from '@nuxt/kit'
 import type { Component, ComponentsDir, ComponentsOptions } from '@nuxt/schema'
-import { componentsTemplate, componentsTypeTemplate } from './templates'
+import { componentsTypeTemplate, componentsClientTemplate, componentsServerTemplate } from './templates'
 import { scanComponents } from './scan'
 import { loaderPlugin } from './loader'
 
@@ -101,9 +101,12 @@ export default defineNuxtModule<ComponentsOptions>({
       ...componentsTypeTemplate,
       options
     })
-
     addPluginTemplate({
-      ...componentsTemplate,
+      ...componentsClientTemplate,
+      options
+    })
+    addPluginTemplate({
+      ...componentsServerTemplate,
       options
     })
 
@@ -128,8 +131,24 @@ export default defineNuxtModule<ComponentsOptions>({
       }
     })
 
-    const loaderOptions = { getComponents: () => options.components }
-    addWebpackPlugin(loaderPlugin.webpack(loaderOptions))
-    addVitePlugin(loaderPlugin.vite(loaderOptions))
+    const getComponents = () => options.components
+
+    nuxt.hook('vite:extendConfig', (config, { isClient }) => {
+      config.plugins = config.plugins || []
+      config.plugins.push(loaderPlugin.vite({
+        getComponents,
+        mode: isClient ? 'client' : 'server'
+      }))
+    })
+
+    nuxt.hook('webpack:config', (configs) => {
+      configs.forEach((config) => {
+        config.plugins = config.plugins || []
+        config.plugins.push(loaderPlugin.webpack({
+          getComponents,
+          mode: config.name === 'client' ? 'client' : 'server'
+        }))
+      })
+    })
   }
 })

packages/nuxt3/src/components/scan.ts

@@ -1,15 +1,34 @@
 import { basename, extname, join, dirname, relative } from 'pathe'
 import { globby } from 'globby'
 import { pascalCase, splitByCase } from 'scule'
-import type { Component, ComponentsDir } from '@nuxt/schema'
+import type { ScanDir, Component, ComponentsDir, ComponentEnv } from '@nuxt/schema'
 import { isIgnored } from '@nuxt/kit'
 
+export function sortDirsByPathLength ({ path: pathA }: ScanDir, { path: pathB }: ScanDir): number {
+  return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
+}
+
 // vue@2 src/shared/util.js
 // TODO: update to vue3?
 function hyphenate (str: string): string {
   return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
 }
 
+function resolveEnvComponent (fileName:string) {
+  const match = fileName.match(/^(.+)\.(client|server)$/)
+  if (match) {
+    return {
+      fileName: match[1],
+      env: match[2] as ComponentEnv
+    }
+  } else {
+    return {
+      fileName,
+      env: undefined
+    }
+  }
+}
+
 /**
  * Scan the components inside different components folders
  * and return a unique list of components
@@ -28,10 +47,7 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
   // All scanned paths
   const scannedPaths: string[] = []
 
-  for (const dir of dirs) {
-    // A map from resolved path to component name (used for making duplicate warning message)
-    const resolvedNames = new Map<string, string>()
-
+  for (const dir of dirs.sort(sortDirsByPathLength)) {
     for (const _file of await globby(dir.pattern!, { cwd: dir.path, ignore: dir.ignore })) {
       const filePath = join(dir.path, _file)
 
@@ -55,6 +71,7 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
         dir.prefix ? splitByCase(dir.prefix) : [],
         (dir.pathPrefix !== false) ? splitByCase(relative(dir.path, dirname(filePath))) : []
       )
+      let env: ComponentEnv | undefined
 
       /**
        * In case we have index as filename the component become the parent path
@@ -68,6 +85,8 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
       if (fileName.toLowerCase() === 'index') {
         fileName = dir.pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */
       }
+      // eslint-disable-next-line prefer-const
+      ({ env, fileName } = resolveEnvComponent(fileName))
 
       /**
        * Array of fileName parts splitted by case, / or -
@@ -86,16 +105,6 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
       }
 
       const componentName = pascalCase(componentNameParts) + pascalCase(fileNameParts)
-
-      if (resolvedNames.has(componentName)) {
-        console.warn(`Two component files resolving to the same name \`${componentName}\`:\n` +
-          `\n - ${filePath}` +
-          `\n - ${resolvedNames.get(componentName)}`
-        )
-        continue
-      }
-      resolvedNames.set(componentName, filePath)
-
       const pascalName = pascalCase(componentName).replace(/["']/g, '')
       const kebabName = hyphenate(componentName)
       const shortPath = relative(srcDir, filePath)
@@ -113,13 +122,33 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
         preload: Boolean(dir.preload)
       }
 
+      if (env) {
+        component.envPaths = {
+          [env]: filePath
+        }
+      }
+
       if (typeof dir.extendComponent === 'function') {
         component = (await dir.extendComponent(component)) || component
       }
 
-      // Ignore component if component is already defined
-      if (!components.find(c => c.pascalName === component.pascalName)) {
+      // Check if component is already defined
+      const definedComponent = components.find(c => c.pascalName === component.pascalName)
+      if (!definedComponent) {
+        // Not defined, add component
         components.push(component)
+      } else if (component.level < definedComponent.level) {
+        // Overwite if level is inferiour
+        Object.assign(definedComponent, component)
+      } else if (definedComponent.envPaths && component.envPaths) {
+        // Merge client and server component path
+        Object.assign(definedComponent.envPaths, component.envPaths)
+      } else {
+        // Naming conflict warning, ignore the later one
+        console.warn(`Two component files resolving to the same name \`${componentName}\`:\n` +
+          `\n - ${filePath}` +
+          `\n - ${definedComponent.filePath}`
+        )
       }
     }
     scannedPaths.push(dir.path)

packages/nuxt3/src/components/templates.ts

@@ -1,6 +1,6 @@
 
-import { isAbsolute, join, relative } from 'pathe'
-import type { Component } from '@nuxt/schema'
+import { relative, isAbsolute, join } from 'pathe'
+import type { Component, NuxtPlugin } from '@nuxt/schema'
 import { genDynamicImport, genObjectFromRawEntries } from 'knitwork'
 
 export type ComponentsTemplateOptions = {
@@ -23,16 +23,29 @@ const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
   ].filter(Boolean).join(', ')
 }
 
-export const componentsTemplate = {
-  filename: 'components.mjs',
-  getContents ({ options }: { options: ComponentsTemplateOptions }) {
-    return `import { defineAsyncComponent } from 'vue'
+export function getComponentPath (component: Component, mode?: NuxtPlugin['mode']) {
+  if (!component.envPaths || !mode || mode === 'all') {
+    return component.filePath
+  }
+  const envPath = mode === 'client'
+    ? component.envPaths.client
+    : component.envPaths.server
+  return envPath || '#app/components/nuxt-empty'
+}
+
+function getComponentTemplate (components: Component[], mode: NuxtPlugin['mode']) {
+  return `import { defineAsyncComponent, h as __h } from 'vue'
+import { wrapClientOnly } from '#app/components/client-only'
 
-const components = ${genObjectFromRawEntries(options.components.filter(c => c.global === true).map((c) => {
-  const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
+const components = ${genObjectFromRawEntries(components.filter(c => c.global === true).map((c) => {
+  let exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
   const comment = createImportMagicComments(c)
+  const path = getComponentPath(c, mode)
+  if (c.envPaths) {
+    exp = `wrapClientOnly(${exp}, '${mode}')`
+  }
 
-  return [c.pascalName, `defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`]
+  return [c.pascalName, `defineAsyncComponent(${genDynamicImport(path, { comment })}.then(c => ${exp}))`]
 }))}
 
 export default function (nuxtApp) {
@@ -42,6 +55,21 @@ export default function (nuxtApp) {
   }
 }
 `
+}
+
+export const componentsClientTemplate = {
+  filename: 'components-client.mjs',
+  mode: 'client' as const,
+  getContents ({ options }: { options: ComponentsTemplateOptions }) {
+    return getComponentTemplate(options.components, 'client')
+  }
+}
+
+export const componentsServerTemplate = {
+  filename: 'components-server.mjs',
+  mode: 'server' as const,
+  getContents ({ options }: { options: ComponentsTemplateOptions }) {
+    return getComponentTemplate(options.components, 'server')
   }
 }
 
@@ -50,7 +78,16 @@ export const componentsTypeTemplate = {
   getContents: ({ options }: { options: ComponentsTemplateOptions }) => `// Generated by components discovery
 declare module 'vue' {
   export interface GlobalComponents {
-${options.components.map(c => `    '${c.pascalName}': typeof ${genDynamicImport(isAbsolute(c.filePath) ? relative(join(options.buildDir, 'types'), c.filePath) : c.filePath, { wrapper: false })}['${c.export}']`).join(',\n')}
+${options.components
+  .map((c) => {
+    const filePath = c.envPaths?.client || c.filePath
+    const dynamicImport = genDynamicImport(isAbsolute(filePath)
+      ? relative(join(options.buildDir, 'types'), filePath)
+      : filePath, { wrapper: false })
+    return `    '${c.pascalName}': typeof ${dynamicImport}['${c.export}']`
+  })
+  .join(',\n')
+}
   }
 }
 export {}