@@ -27,6 +27,8 @@ export default defineNuxtConfig({
27
27
28
28
## Usage
29
29
30
+ ### In Nuxt Applications
31
+
30
32
``` html
31
33
<template >
32
34
<div >
@@ -42,12 +44,89 @@ const { data: meta } = await useAsyncData('my-component', () => $fetch('/api/com
42
44
</script >
43
45
```
44
46
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
+
45
122
## Nightly Builds
46
123
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:
48
127
49
128
``` bash
50
- npm i nuxt-component-meta@nightly
129
+ npm i https://pkg.pr.new/nuxtlabs/ nuxt-component-meta@< commit-hash >
51
130
```
52
131
53
132
<!-- Badges -->
0 commit comments