Statically extract metadata such as props, events, slots, and exposed from Vue components. Useful for auto-generating component documentation or displaying component APIs in tools like Storybook.
npm install vue-component-meta typescriptimport { createChecker } from 'vue-component-meta'; const checker = createChecker('/path/to/tsconfig.json', { schema: true, // Enable schema parsing }); const meta = checker.getComponentMeta('/path/to/MyComponent.vue');import { createCheckerByJson } from 'vue-component-meta'; const checker = createCheckerByJson('/project/root', { include: ['src/**/*.vue'], compilerOptions: { /* ... */ }, vueCompilerOptions: { /* ... */ }, });Get the metadata of a component. exportName defaults to 'default'.
The returned ComponentMeta object contains:
interface ComponentMeta { name?: string; description?: string; type: TypeMeta; props: PropertyMeta[]; events: EventMeta[]; slots: SlotMeta[]; exposed: ExposeMeta[]; }Get all export names of a file.
Update file content (for virtual files or live editing).
Remove a file from the project.
Reload the tsconfig.json configuration.
Clear cached file content.
Get the underlying TypeScript Program instance.
interface PropertyMeta { name: string; description: string; // Read from JSDoc type: string; // Type string default?: string; // Default value required: boolean; global: boolean; // Whether it's a global prop tags: { name: string; text?: string }[]; // JSDoc tags schema: PropertyMetaSchema; getDeclarations(): Declaration[]; getTypeObject(): ts.Type; }interface EventMeta { name: string; description: string; type: string; signature: string; tags: { name: string; text?: string }[]; schema: PropertyMetaSchema[]; getDeclarations(): Declaration[]; getTypeObject(): ts.Type | undefined; }interface SlotMeta { name: string; description: string; type: string; tags: { name: string; text?: string }[]; schema: PropertyMetaSchema; getDeclarations(): Declaration[]; getTypeObject(): ts.Type; }interface ExposeMeta { name: string; description: string; type: string; tags: { name: string; text?: string }[]; schema: PropertyMetaSchema; getDeclarations(): Declaration[]; getTypeObject(): ts.Type; }interface MetaCheckerOptions { schema?: boolean | { ignore?: (string | ((name: string, type: ts.Type, typeChecker: ts.TypeChecker) => boolean))[]; }; printer?: ts.PrinterOptions; }Controls whether to parse the schema structure of types. Set to true to enable, or pass an object to configure types to ignore.
const checker = createChecker(tsconfig, { schema: { ignore: ['HTMLElement', (name) => name.startsWith('Internal')], }, });vue-component-type-helpers- Type helper utilities
MIT License