fix(nuxt): allow configuring server components in modules (#27936)

packages/nuxt/src/components/module.ts

@@ -121,11 +121,7 @@ export default defineNuxtModule<ComponentsOptions>({
     // component-names.mjs
     addTemplate(componentNamesTemplate)
     // components.islands.mjs
-    if (nuxt.options.experimental.componentIslands) {
+    addTemplate({ ...componentsIslandsTemplate, filename: 'components.islands.mjs' })
-      addTemplate({ ...componentsIslandsTemplate, filename: 'components.islands.mjs' })
-    } else {
-      addTemplate({ filename: 'components.islands.mjs', getContents: () => 'export const islandComponents = {}' })
-    }
 
     if (componentOptions.generateMetadata) {
       addTemplate(componentsMetadataTemplate)

packages/nuxt/src/components/templates.ts

@@ -70,7 +70,11 @@ export const componentNamesTemplate: NuxtTemplate = {
 
 export const componentsIslandsTemplate: NuxtTemplate = {
   // components.islands.mjs'
-  getContents ({ app }) {
+  getContents ({ app, nuxt }) {
+    if (!nuxt.options.experimental.componentIslands) {
+      return 'export const islandComponents = {}'
+    }
+
     const components = app.components
     const pages = app.pages
     const islands = components.filter(component =>

packages/nuxt/src/core/nuxt.ts

@@ -472,21 +472,6 @@ async function initNuxt (nuxt: Nuxt) {
     })
   }
 
-  // Add <NuxtIsland>
-  if (nuxt.options.experimental.componentIslands) {
-    addComponent({
-      name: 'NuxtIsland',
-      priority: 10, // built-in that we do not expect the user to override
-      filePath: resolve(nuxt.options.appDir, 'components/nuxt-island'),
-    })
-
-    if (!nuxt.options.ssr && nuxt.options.experimental.componentIslands !== 'auto') {
-      nuxt.options.ssr = true
-      nuxt.options.nitro.routeRules ||= {}
-      nuxt.options.nitro.routeRules['/**'] = defu(nuxt.options.nitro.routeRules['/**'], { ssr: false })
-    }
-  }
-
   // Add stubs for <NuxtImg> and <NuxtPicture>
   for (const name of ['NuxtImg', 'NuxtPicture']) {
     addComponent({
@@ -499,38 +484,6 @@ async function initNuxt (nuxt: Nuxt) {
     })
   }
 
-  // Add prerender payload support
-  if (!nuxt.options.dev && nuxt.options.experimental.payloadExtraction) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client'))
-  }
-
-  // Add experimental cross-origin prefetch support using Speculation Rules API
-  if (nuxt.options.experimental.crossOriginPrefetch) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/cross-origin-prefetch.client'))
-  }
-
-  // Add experimental page reload support
-  if (nuxt.options.experimental.emitRouteChunkError === 'automatic') {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/chunk-reload.client'))
-  }
-  // Add experimental session restoration support
-  if (nuxt.options.experimental.restoreState) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/restore-state.client'))
-  }
-
-  // Add experimental automatic view transition api support
-  if (nuxt.options.experimental.viewTransition) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/view-transitions.client'))
-  }
-
-  // Add experimental support for custom types in JSON payload
-  if (nuxt.options.experimental.renderJsonPayloads) {
-    nuxt.hooks.hook('modules:done', () => {
-      addPlugin(resolve(nuxt.options.appDir, 'plugins/revive-payload.client'))
-      addPlugin(resolve(nuxt.options.appDir, 'plugins/revive-payload.server'))
-    })
-  }
-
   // Track components used to render for webpack
   if (nuxt.options.builder === '@nuxt/webpack-builder') {
     addPlugin(resolve(nuxt.options.appDir, 'plugins/preload.server'))
@@ -574,6 +527,51 @@ async function initNuxt (nuxt: Nuxt) {
 
   await nuxt.callHook('modules:done')
 
+  // Add <NuxtIsland>
+  if (nuxt.options.experimental.componentIslands) {
+    addComponent({
+      name: 'NuxtIsland',
+      priority: 10, // built-in that we do not expect the user to override
+      filePath: resolve(nuxt.options.appDir, 'components/nuxt-island'),
+    })
+
+    if (!nuxt.options.ssr && nuxt.options.experimental.componentIslands !== 'auto') {
+      nuxt.options.ssr = true
+      nuxt.options.nitro.routeRules ||= {}
+      nuxt.options.nitro.routeRules['/**'] = defu(nuxt.options.nitro.routeRules['/**'], { ssr: false })
+    }
+  }
+
+  // Add prerender payload support
+  if (!nuxt.options.dev && nuxt.options.experimental.payloadExtraction) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client'))
+  }
+
+  // Add experimental cross-origin prefetch support using Speculation Rules API
+  if (nuxt.options.experimental.crossOriginPrefetch) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/cross-origin-prefetch.client'))
+  }
+
+  // Add experimental page reload support
+  if (nuxt.options.experimental.emitRouteChunkError === 'automatic') {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/chunk-reload.client'))
+  }
+  // Add experimental session restoration support
+  if (nuxt.options.experimental.restoreState) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/restore-state.client'))
+  }
+
+  // Add experimental automatic view transition api support
+  if (nuxt.options.experimental.viewTransition) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/view-transitions.client'))
+  }
+
+  // Add experimental support for custom types in JSON payload
+  if (nuxt.options.experimental.renderJsonPayloads) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/revive-payload.client'))
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/revive-payload.server'))
+  }
+
   if (nuxt.options.experimental.appManifest) {
     addRouteMiddleware({
       name: 'manifest-route-rule',

packages/nuxt/test/app.test.ts

@@ -59,6 +59,10 @@ describe('resolveApp', () => {
             "mode": "client",
             "src": "<repoRoot>/packages/nuxt/src/app/plugins/revive-payload.client.ts",
           },
+          {
+            "mode": "client",
+            "src": "<repoRoot>/packages/nuxt/src/app/plugins/chunk-reload.client.ts",
+          },
           {
             "filename": "components.plugin.mjs",
             "getContents": [Function],
@@ -73,10 +77,6 @@ describe('resolveApp', () => {
             "mode": "all",
             "src": "<repoRoot>/packages/nuxt/src/app/plugins/router.ts",
           },
-          {
-            "mode": "client",
-            "src": "<repoRoot>/packages/nuxt/src/app/plugins/chunk-reload.client.ts",
-          },
         ],
         "rootComponent": "<repoRoot>/packages/nuxt/src/app/components/nuxt-root.vue",
         "templates": [],