diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts index ce9f8ee088..6bb86c50fb 100644 --- a/packages/nuxt/src/components/templates.ts +++ b/packages/nuxt/src/components/templates.ts @@ -36,20 +36,25 @@ export default defineNuxtPlugin({ export const componentsPluginTemplate: NuxtPluginTemplate = { filename: 'components.plugin.mjs', getContents ({ app }) { - const globalComponents = new Set() + const lazyGlobalComponents = new Set() + const syncGlobalComponents = new Set() for (const component of app.components) { - if (component.global) { - globalComponents.add(component.pascalName) + if (component.global === 'sync') { + syncGlobalComponents.add(component.pascalName) + } else if (component.global) { + lazyGlobalComponents.add(component.pascalName) } } - if (!globalComponents.size) { return emptyComponentsPlugin } + if (!lazyGlobalComponents.size && !syncGlobalComponents.size) { return emptyComponentsPlugin } - const components = [...globalComponents] + const lazyComponents = [...lazyGlobalComponents] + const syncComponents = [...syncGlobalComponents] return `import { defineNuxtPlugin } from '#app/nuxt' -import { ${components.map(c => 'Lazy' + c).join(', ')} } from '#components' +import { ${[...lazyComponents.map(c => 'Lazy' + c), ...syncComponents].join(', ')} } from '#components' const lazyGlobalComponents = [ - ${components.map(c => `["${c}", Lazy${c}]`).join(',\n')} + ${lazyComponents.map(c => `["${c}", Lazy${c}]`).join(',\n')}, + ${syncComponents.map(c => `["${c}", ${c}]`).join(',\n')} ] export default defineNuxtPlugin({ diff --git a/packages/schema/src/types/components.ts b/packages/schema/src/types/components.ts index 64eef5be17..6ca1ab773f 100644 --- a/packages/schema/src/types/components.ts +++ b/packages/schema/src/types/components.ts @@ -7,7 +7,7 @@ export interface Component { chunkName: string prefetch: boolean preload: boolean - global?: boolean + global?: boolean | 'sync' island?: boolean mode?: 'client' | 'server' | 'all' /** diff --git a/test/basic.test.ts b/test/basic.test.ts index 9e07df313b..1051bc86ce 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -94,6 +94,7 @@ describe('pages', () => { // should register global components automatically expect(html).toContain('global component registered automatically') expect(html).toContain('global component via suffix') + expect(html).toContain('This is a synchronously registered global component') await expectNoClientErrors('/') }) diff --git a/test/fixtures/basic/components/GlobalSync.vue b/test/fixtures/basic/components/GlobalSync.vue new file mode 100644 index 0000000000..9e075fed9e --- /dev/null +++ b/test/fixtures/basic/components/GlobalSync.vue @@ -0,0 +1,5 @@ + diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts index 88b1ff5e6c..b4ca4d6c14 100644 --- a/test/fixtures/basic/nuxt.config.ts +++ b/test/fixtures/basic/nuxt.config.ts @@ -146,6 +146,13 @@ export default defineNuxtConfig({ filePath: '~/other-components-folder/named-export' }) }, + 'components:extend' (components) { + for (const comp of components) { + if (comp.pascalName === 'GlobalSync') { + comp.global = 'sync' + } + } + }, 'vite:extendConfig' (config) { config.plugins!.push({ name: 'nuxt:server', diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue index dd817783a6..eda06465a9 100644 --- a/test/fixtures/basic/pages/index.vue +++ b/test/fixtures/basic/pages/index.vue @@ -44,6 +44,7 @@ + Test