Skip to content

Commit b6bcde8

Browse files
committed
docs: add utility functions
1 parent a5c42b9 commit b6bcde8

File tree

1 file changed

+81
-2
lines changed

1 file changed

+81
-2
lines changed

README.md

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export default defineNuxtConfig({
2727

2828
## Usage
2929

30+
### In Nuxt Applications
31+
3032
```html
3133
<template>
3234
<div>
@@ -42,12 +44,89 @@ const { data: meta } = await useAsyncData('my-component', () => $fetch('/api/com
4244
</script>
4345
```
4446

47+
### Standalone Usage with `getComponentMeta`
48+
49+
You can also use the `getComponentMeta` utility directly to extract component metadata programmatically:
50+
51+
```ts
52+
import { getComponentMeta } from 'nuxt-component-meta'
53+
54+
// Basic usage
55+
const meta = getComponentMeta('components/MyComponent.vue')
56+
57+
// With options
58+
const meta = getComponentMeta('components/MyComponent.vue', {
59+
rootDir: '/path/to/project',
60+
cache: true,
61+
cacheDir: '.component-meta-cache'
62+
})
63+
64+
// Access component metadata
65+
console.log(meta.props) // Component props
66+
console.log(meta.slots) // Component slots
67+
console.log(meta.events) // Component events
68+
console.log(meta.exposed) // Exposed properties
69+
```
70+
71+
#### Options
72+
73+
- `rootDir` - Project root directory (defaults to `process.cwd()`)
74+
- `cache` - Enable caching to improve performance (defaults to `false`)
75+
- `cacheDir` - Directory for cache files (defaults to `.data/nuxt-component-meta`)
76+
77+
### Schema Generation with `propsToJsonSchema`
78+
79+
The `propsToJsonSchema` utility converts Vue component props metadata into JSON Schema format, enabling validation and type checking:
80+
81+
```ts
82+
import { getComponentMeta, propsToJsonSchema } from 'nuxt-component-meta'
83+
84+
// Get component metadata
85+
const meta = getComponentMeta('components/MyComponent.vue')
86+
87+
// Convert props to JSON Schema
88+
const jsonSchema = propsToJsonSchema(meta.props)
89+
90+
console.log(jsonSchema)
91+
// Output:
92+
// {
93+
// "type": "object",
94+
// "properties": {
95+
// "title": { "type": "string", "description": "Component title" },
96+
// "count": { "type": "number", "default": 0 },
97+
// "enabled": { "type": "boolean", "default": true }
98+
// },
99+
// "required": ["title"]
100+
// }
101+
```
102+
103+
#### Integration with Validation Libraries
104+
105+
The generated JSON Schema can be used with popular validation libraries:
106+
107+
```ts
108+
import { jsonSchemaToZod } from 'json-schema-to-zod'
109+
import Ajv from 'ajv'
110+
111+
// With Zod
112+
const zodString = jsonSchemaToZod(jsonSchema)
113+
const zodSchema = eval(zodString)
114+
const result = zodSchema.safeParse(componentProps)
115+
116+
// With AJV
117+
const ajv = new Ajv()
118+
const validate = ajv.compile(jsonSchema)
119+
const isValid = validate(componentProps)
120+
```
121+
45122
## Nightly Builds
46123

47-
You can install the latest nightly build of the Studio module by running:
124+
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.
125+
126+
You can install a specific commit using its unique URL:
48127

49128
```bash
50-
npm i nuxt-component-meta@nightly
129+
npm i https://pkg.pr.new/nuxtlabs/nuxt-component-meta@<commit-hash>
51130
```
52131

53132
<!-- Badges -->

0 commit comments

Comments
 (0)