# vue-component-meta

Latest version **3.3.11** (published 2026-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-component-meta
pnpm add vue-component-meta
yarn add vue-component-meta
bun add vue-component-meta
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 3.3.11 |
| Published | 2026-08-21 |
| First published | 2022-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 55 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6715 |
| Maintainers | johnsoncodehk, kazariex |

## Links

- npm: https://www.npmjs.com/package/vue-component-meta
- Repository: https://github.com/vuejs/language-tools
- Homepage: https://github.com/vuejs/language-tools#readme
- Issues: https://github.com/vuejs/language-tools/issues
- npm.io page: https://npm.io/package/vue-component-meta

## Dependencies (3)

- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@volar/typescript](https://npm.io/package/@volar/typescript.md) 2.4.28
- [@vue/language-core](https://npm.io/package/@vue/language-core.md) 3.3.11

## Recent versions

- 3.3.11 (latest) — 2026-08-21
- 3.0.11 (v3.0) — 2026-06-08
- 3.3.10 — 2026-08-15
- 3.3.9 — 2026-07-31
- 3.3.8 — 2026-07-22
- 3.3.7 — 2026-07-08
- 3.3.6 — 2026-06-30
- 3.3.5 — 2026-06-13
- 3.3.4 — 2026-06-08
- 3.3.3 — 2026-05-30
- 3.3.2 — 2026-05-25
- 3.3.1 — 2026-05-19
- 3.3.0 — 2026-05-18
- 3.2.9 — 2026-05-13
- 3.2.8 — 2026-05-04
- … 241 more at https://npm.io/package/vue-component-meta/versions

## README

# vue-component-meta

<p>
  <a href="https://www.npmjs.com/package/vue-component-meta"><img src="https://img.shields.io/npm/v/vue-component-meta.svg?labelColor=18181B&color=1584FC" alt="NPM version"></a>
  <a href="https://github.com/vuejs/language-tools/blob/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
</p>

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.

## Installation

```bash
npm install vue-component-meta typescript
```

## Usage

### Create a Checker from tsconfig.json

```typescript
import { 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');
```

### Create a Checker from JSON Configuration

```typescript
import { createCheckerByJson } from 'vue-component-meta';

const checker = createCheckerByJson('/project/root', {
  include: ['src/**/*.vue'],
  compilerOptions: { /* ... */ },
  vueCompilerOptions: { /* ... */ },
});
```

## API

### `checker.getComponentMeta(filePath, exportName?)`

Get the metadata of a component. `exportName` defaults to `'default'`.

The returned `ComponentMeta` object contains:

```typescript
interface ComponentMeta {
  name?: string;
  description?: string;
  type: TypeMeta;
  props: PropertyMeta[];
  events: EventMeta[];
  slots: SlotMeta[];
  exposed: ExposeMeta[];
}
```

### `checker.getExportNames(filePath)`

Get all export names of a file.

### `checker.updateFile(filePath, content)`

Update file content (for virtual files or live editing).

### `checker.deleteFile(filePath)`

Remove a file from the project.

### `checker.reload()`

Reload the tsconfig.json configuration.

### `checker.clearCache()`

Clear cached file content.

### `checker.getProgram()`

Get the underlying TypeScript Program instance.

## Metadata Structures

### PropertyMeta (Props)

```typescript
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;
}
```

### EventMeta

```typescript
interface EventMeta {
  name: string;
  description: string;
  type: string;
  signature: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema[];
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type | undefined;
}
```

### SlotMeta

```typescript
interface SlotMeta {
  name: string;
  description: string;
  type: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema;
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type;
}
```

### ExposeMeta

```typescript
interface ExposeMeta {
  name: string;
  description: string;
  type: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema;
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type;
}
```

## Options

```typescript
interface MetaCheckerOptions {
  schema?: boolean | {
    ignore?: (string | ((name: string, type: ts.Type, typeChecker: ts.TypeChecker) => boolean))[];
  };
  printer?: ts.PrinterOptions;
}
```

### `schema`

Controls whether to parse the schema structure of types. Set to `true` to enable, or pass an object to configure types to ignore.

```typescript
const checker = createChecker(tsconfig, {
  schema: {
    ignore: ['HTMLElement', (name) => name.startsWith('Internal')],
  },
});
```

## Related Packages

- [`vue-component-type-helpers`](../component-type-helpers) - Type helper utilities

## License

[MIT](https://github.com/vuejs/language-tools/blob/master/LICENSE) License

---
_Source: https://npm.io/package/vue-component-meta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._