@@ -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