diff --git a/docs/3.api/5.kit/5.components.md b/docs/3.api/5.kit/5.components.md index 26e3e3d4a7..0740f0963a 100644 --- a/docs/3.api/5.kit/5.components.md +++ b/docs/3.api/5.kit/5.components.md @@ -41,6 +41,11 @@ interface ComponentsDir { transpile?: 'auto' | boolean } +// You can augment this interface (exported from `@nuxt/schema`) if needed +interface ComponentMeta { + [key: string]: unknown +} + interface Component { pascalName: string kebabName: string @@ -54,6 +59,7 @@ interface Component { island?: boolean mode?: 'client' | 'server' | 'all' priority?: number + meta?: ComponentMeta } ``` diff --git a/packages/kit/src/components.ts b/packages/kit/src/components.ts index 047da47f91..410f2feae4 100644 --- a/packages/kit/src/components.ts +++ b/packages/kit/src/components.ts @@ -48,6 +48,7 @@ export async function addComponent (opts: AddComponentOptions) { mode: 'all', shortPath: opts.filePath, priority: 0, + meta: {}, ...opts } diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts index f38acfe253..52248d0ad1 100644 --- a/packages/nuxt/src/components/module.ts +++ b/packages/nuxt/src/components/module.ts @@ -5,7 +5,7 @@ import type { Component, ComponentsDir, ComponentsOptions } from 'nuxt/schema' import { distDir } from '../dirs' import { clientFallbackAutoIdPlugin } from './client-fallback-auto-id' -import { componentNamesTemplate, componentsIslandsTemplate, componentsPluginTemplate, componentsTypeTemplate } from './templates' +import { componentNamesTemplate, componentsIslandsTemplate, componentsMetadataTemplate, componentsPluginTemplate, componentsTypeTemplate } from './templates' import { scanComponents } from './scan' import { loaderPlugin } from './loader' import { TreeShakeTemplatePlugin } from './tree-shake' @@ -127,6 +127,10 @@ export default defineNuxtModule({ addTemplate({ filename: 'components.islands.mjs', getContents: () => 'export const islandComponents = {}' }) } + if (componentOptions.generateMetadata) { + addTemplate(componentsMetadataTemplate) + } + const unpluginServer = createTransformPlugin(nuxt, getComponents, 'server') const unpluginClient = createTransformPlugin(nuxt, getComponents, 'client') diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts index 5d751a705d..8e3923c139 100644 --- a/packages/nuxt/src/components/templates.ts +++ b/packages/nuxt/src/components/templates.ts @@ -124,3 +124,9 @@ export const componentNames: string[] ` } } + +export const componentsMetadataTemplate: NuxtTemplate = { + filename: 'components.json', + write: true, + getContents: ({ app }) => JSON.stringify(app.components, null, 2) +} diff --git a/packages/schema/src/types/components.ts b/packages/schema/src/types/components.ts index 640119a941..d0a9507d04 100644 --- a/packages/schema/src/types/components.ts +++ b/packages/schema/src/types/components.ts @@ -1,3 +1,7 @@ +export interface ComponentMeta { + [key: string]: unknown +} + export interface Component { pascalName: string kebabName: string @@ -9,6 +13,7 @@ export interface Component { preload: boolean global?: boolean | 'sync' island?: boolean + meta?: ComponentMeta mode?: 'client' | 'server' | 'all' /** * This number allows configuring the behavior of overriding Nuxt components. @@ -114,6 +119,11 @@ export interface ComponentsOptions { * @default false */ global?: boolean + /** + * Whether to write metadata to the build directory with information about the components that + * are auto-registered in your app. + */ + generateMetadata?: boolean loader?: boolean transform?: {