diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts index e2990cfed6f5..9f609fc5f664 100644 --- a/packages/nuxt/src/app/components/nuxt-island.ts +++ b/packages/nuxt/src/app/components/nuxt-island.ts @@ -13,6 +13,9 @@ import { getFragmentHTML, getSlotProps } from './utils' import { useNuxtApp, useRuntimeConfig } from '#app/nuxt' import { useRequestEvent } from '#app/composables/ssr' +// @ts-expect-error virtual file +import { remoteComponentIslands } from '#build/nuxt.config.mjs' + const pKey = '_islandPromises' const SSR_UID_RE = /nuxt-ssr-component-uid="([^"]*)"/ const UID_ATTR = /nuxt-ssr-component-uid(="([^"]*)")?/ @@ -106,7 +109,7 @@ export default defineComponent({ const key = `${props.name}_${hashId.value}` if (nuxtApp.payload.data[key] && !force) { return nuxtApp.payload.data[key] } - const url = props.source ? new URL(`/__nuxt_island/${key}`, props.source).href : `/__nuxt_island/${key}` + const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}`, props.source).href : `/__nuxt_island/${key}` if (process.server && process.env.prerender) { // Hint to Nitro to prerender the island component diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts index 94ecdac4762b..d9a638872f18 100644 --- a/packages/nuxt/src/components/module.ts +++ b/packages/nuxt/src/components/module.ts @@ -221,7 +221,7 @@ export default defineNuxtModule({ getComponents, mode, transform: typeof nuxt.options.components === 'object' && !Array.isArray(nuxt.options.components) ? nuxt.options.components.transform : undefined, - experimentalComponentIslands: nuxt.options.experimental.componentIslands + experimentalComponentIslands: !!nuxt.options.experimental.componentIslands })) if (isServer && nuxt.options.experimental.componentIslands) { @@ -265,7 +265,7 @@ export default defineNuxtModule({ getComponents, mode, transform: typeof nuxt.options.components === 'object' && !Array.isArray(nuxt.options.components) ? nuxt.options.components.transform : undefined, - experimentalComponentIslands: nuxt.options.experimental.componentIslands + experimentalComponentIslands: !!nuxt.options.experimental.componentIslands })) if (nuxt.options.experimental.componentIslands && mode === 'server') { diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts index 55f3013dd280..4442da78efd8 100644 --- a/packages/nuxt/src/core/templates.ts +++ b/packages/nuxt/src/core/templates.ts @@ -329,6 +329,7 @@ export const nuxtConfigTemplate = { ...Object.entries(ctx.nuxt.options.app).map(([k, v]) => `export const ${camelCase('app-' + k)} = ${JSON.stringify(v)}`), `export const renderJsonPayloads = ${!!ctx.nuxt.options.experimental.renderJsonPayloads}`, `export const componentIslands = ${!!ctx.nuxt.options.experimental.componentIslands}`, + `export const remoteComponentIslands = ${ctx.nuxt.options.experimental.componentIslands === 'local+remote'}`, `export const devPagesDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.dir.pages) : 'null'}`, `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}` ].join('\n\n') diff --git a/packages/schema/src/config/experimental.ts b/packages/schema/src/config/experimental.ts index 17507c8f4eca..5399ed772425 100644 --- a/packages/schema/src/config/experimental.ts +++ b/packages/schema/src/config/experimental.ts @@ -137,8 +137,15 @@ export default defineUntypedSchema({ /** * Experimental component islands support with and .island.vue files. + * @type {true | 'local' | 'local+remote' | false} */ - componentIslands: false, + componentIslands: { + $resolve: (val) => { + if (typeof val === 'string') { return val } + if (val === true) { return 'local' } + return false + } + }, /** * Config schema support