vue-docgen-api

import { parseSource } from 'vue-docgen-api'; import { resolve } from 'path'; async function generateComponentDoc() { const componentSource = ` <template> <div>{{ message }} <button @click="increment">Click me</button></div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; /** * A simple counter component demonstrating props, emits, and methods. * @displayName MyCounterComponent */ export default defineComponent({ props: { /** * Initial count value for the component. */ initialCount: { type: Number, default: 0 }, /** * Message to display alongside the count. */ message: { type: String, required: true } }, emits: { /** * Emitted when the count value changes. * @property {number} newCount - The updated count value. */ 'update:count': (newCount: number) => newCount >= 0 }, setup(props, { emit }) { const count = ref(props.initialCount); /** * Increments the internal count and emits the updated value. */ function increment() { count.value++; emit('update:count', count.value); } return { count, increment }; } }); </script> `; try { // The second argument 'MyCounter.vue' is a dummy path used for resolution contexts. const componentInfo = await parseSource(componentSource, 'MyCounter.vue', { jsx: true, // Enable JSX parsing if your components use it alias: { '@': resolve(__dirname, './src') // Configure path aliases similar to webpack or tsconfig } }); console.log('Component Display Name:', componentInfo.displayName); console.log('Props:', componentInfo.props?.map(p => `${p.name} (${p.type?.name || 'any'})`)); console.log('Events:', componentInfo.events?.map(e => e.name)); // console.log(JSON.stringify(componentInfo, null, 2)); // Uncomment for full output } catch (error) { console.error('Error parsing component:', error); } } generateComponentDoc();