# nuxt-component-meta

> [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href]

Latest version **0.18.0** (published 2026-07-13) · MIT license · 0 weekly downloads

## Install

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

Provides the command `nuxt-component-meta`.

## Health

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

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2026-07-13 |
| First published | 2021-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 84.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91 |
| Maintainers | atinux, farnabaz, tahul |
| Keywords | vue, nuxt, vue component, nuxt component |

## Links

- npm: https://www.npmjs.com/package/nuxt-component-meta
- Repository: https://github.com/nuxt-content/nuxt-component-meta
- Homepage: https://github.com/nuxt-content/nuxt-component-meta#readme
- Issues: https://github.com/nuxt-content/nuxt-component-meta/issues
- npm.io page: https://npm.io/package/nuxt-component-meta

## Dependencies (15)

- [ufo](https://npm.io/package/ufo.md) ^1.6.4
- [defu](https://npm.io/package/defu.md) ^6.1.7
- [jiti](https://npm.io/package/jiti.md) ^2.7.0
- [mlly](https://npm.io/package/mlly.md) ^1.8.2
- [citty](https://npm.io/package/citty.md) ^0.2.2
- [ohash](https://npm.io/package/ohash.md) ^2.0.11
- [pathe](https://npm.io/package/pathe.md) ^2.0.3
- [scule](https://npm.io/package/scule.md) ^1.3.0
- [unplugin](https://npm.io/package/unplugin.md) ^2.3.11
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.4.8
- [oxc-parser](https://npm.io/package/oxc-parser.md) ^0.139.0
- [oxc-walker](https://npm.io/package/oxc-walker.md) ^1.0.0
- [typescript](https://npm.io/package/typescript.md) ^5.9.3
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.21
- [vue-component-meta](https://npm.io/package/vue-component-meta.md) ^3.3.7

## Recent versions

- 0.18.0 (latest) — 2026-07-13
- 0.9.1-20241029-123556-a6efba4 (nightly) — 2024-10-29
- 0.3.2 (beta) — 2022-09-18
- 0.17.2 — 2026-02-09
- 0.17.1 — 2026-01-15
- 0.17.0 — 2026-01-15
- 0.16.0 — 2025-12-23
- 0.15.0 — 2025-11-27
- 0.14.2 — 2025-11-13
- 0.14.1 — 2025-10-17
- 0.14.0 — 2025-09-10
- 0.13.1 — 2025-08-05
- 0.13.0 — 2025-07-23
- 0.12.2 — 2025-07-23
- 0.12.1 — 2025-07-02
- … 79 more at https://npm.io/package/nuxt-component-meta/versions

## README

# Nuxt Component Meta

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]

Gather components metadata on build time and make them available on production. This module is developed to give a visual Markdown Editor with Vue Components in it for [Nuxt Studio](https://nuxt.studio).

## Quick Setup

1. Add `nuxt-component-meta` dependency to your project:

```bash
# Using PNPM
pnpm add nuxt-component-meta

# Using NPM
npm install nuxt-component-meta
```

2. Add `nuxt-component-meta` to the `modules` section of your `nuxt.config.ts`

```ts
export default defineNuxtConfig({
  modules: ['nuxt-component-meta']
})
```

## Usage

### In Nuxt Applications

```html
<template>
  <div>
    <h2>`MyComponent` metadata</h2>
    <pre>
      {{ meta }}
    </pre>
  </div>
</template>

<script script>
const { data: meta } = await useAsyncData('my-component', () => $fetch('/api/component-meta/my-component'))
</script>
```

### Standalone Usage with `getComponentMeta`

You can also use the `getComponentMeta` utility directly to extract component metadata programmatically:

```ts
import { getComponentMeta } from 'nuxt-component-meta/parser'

// Basic usage
const meta = getComponentMeta('components/MyComponent.vue')

// With options
const meta = getComponentMeta('components/MyComponent.vue', {
  rootDir: '/path/to/project',
  cache: true,
  cacheDir: '.component-meta-cache'
})

// Access component metadata
console.log(meta.props)    // Component props
console.log(meta.slots)    // Component slots  
console.log(meta.events)   // Component events
console.log(meta.exposed)  // Exposed properties
```

#### Options

- `rootDir` - Project root directory (defaults to `process.cwd()`)
- `cache` - Enable caching to improve performance (defaults to `false`)
- `cacheDir` - Directory for cache files (defaults to `.data/nuxt-component-meta`)

### Schema Generation with `propsToJsonSchema`

The `propsToJsonSchema` utility converts Vue component props metadata into JSON Schema format, enabling validation and type checking:

```ts
import { getComponentMeta } from 'nuxt-component-meta/parser'
import { propsToJsonSchema } from 'nuxt-component-meta/utils'

// Get component metadata
const meta = getComponentMeta('components/MyComponent.vue')

// Convert props to JSON Schema
const jsonSchema = propsToJsonSchema(meta.props)

console.log(jsonSchema)
// Output:
// {
//   "type": "object",
//   "properties": {
//     "title": { "type": "string", "description": "Component title" },
//     "count": { "type": "number", "default": 0 },
//     "enabled": { "type": "boolean", "default": true }
//   },
//   "required": ["title"]
// }
```

#### Integration with Validation Libraries

The generated JSON Schema can be used with popular validation libraries:

```ts
import { jsonSchemaToZod } from 'json-schema-to-zod'
import Ajv from 'ajv'

// With Zod
const zodString = jsonSchemaToZod(jsonSchema)
const zodSchema = eval(zodString)
const result = zodSchema.safeParse(componentProps)

// With AJV
const ajv = new Ajv()
const validate = ajv.compile(jsonSchema)
const isValid = validate(componentProps)
```

## Nightly Builds

This module uses [pkg.pr.new](https://pkg.pr.new) for continuous releases. Each commit to the main branch automatically publishes a new version with its own unique URL, allowing you to test the latest changes before they're officially released.

You can install a specific commit using its unique URL:

```bash
npm i https://pkg.pr.new/nuxt-content/nuxt-component-meta@<commit-hash>
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/nuxt-component-meta/latest.svg?style=flat&colorA=002438&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-component-meta

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-component-meta.svg?style=flat&colorA=002438&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-component-meta

## Development

1. Clone this repository
2. Install dependencies using `pnpm install`
3. Start dev server using `pnpm dev`

## License

[MIT License](https://github.com/nuxt-content/nuxt-component-meta/blob/main/LICENSE)

Copyright (c) NuxtLabs

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