vue-component-meta
Advanced tools
vue-component-meta allows you to extract the meta-data like props, slots, events, etc from your components via static code analysis. You can even generate description for your props from your source code. This helps document your components via automation. Please refer to the reference section for references.
First of all, you need to create a component meta checker using createChecker:
import * as url from 'url'
import path from 'path'
import type { MetaCheckerOptions } from 'vue-component-meta'
import { createChecker } from 'vue-component-meta'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const checkerOptions: MetaCheckerOptions = {
forceUseTs: true,
schema: { ignore: ['MyIgnoredNestedProps'] },
printer: { newLine: 1 },
}
const tsconfigChecker = createChecker(
// Write your tsconfig path
path.join(__dirname, 'path-to-tsconfig'),
checkerOptions,
)
Now, you can extract the component meta using getComponentMeta method of checker:
import * as url from 'url'
import path from 'path'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const componentPath = path.join(__dirname, 'path-to-component');
const meta = checker.getComponentMeta(componentPath);
This meta contains really useful stuff like component props, slots, events and more. You can refer to its type definition for more details.
vue-component-meta will automatically extract the prop details like its name, default value, is required or not, etc. Additionally, you can even write prop description in source code via JSDoc comment for that prop.
/**
* Hide/Show alert based on v-model value
*/
modelValue: {
type: Boolean,
default: null,
},
When you extract the component meta and extract the description property of that prop it will be "Hide/Show alert based on v-model value" 😍
Warning
Do note that
meta.propswill be array of props so you can't access it viameta.props.<prop-name>. Moreover,meta.propswill also contain some global prop which you can identify viaprop.globalproperty.
You can use it to document your component as you build your project without writing additional documentation.
As vue-component-meta uses static code analysis, it can't extract the dynamic prop definition.
vue-component-meta won't be able to extract default value for prop as props can't be analyzed.
props: {
// Props definition by function execution
...useLayerProps({
color: {
default: 'primary',
},
variant: {
default: 'light',
},
}),
}
In this scenario, to get the correct default value you can let vue-component-meta know it by writing them explicitly:
props: {
// let vue-component-meta found it
color: { default: 'primary' },
variant: { default: 'light' },
// Props definition by function execution
...useLayerProps({
color: {
default: 'primary',
},
variant: {
default: 'light',
},
}),
}
Same as above scenario you might have issue with description not generating when prop definition is dynamic. In this case writing prop description can be tricky.
When it's function execution, write prop description in function definition:
export const useLayerProp = (...) => {
const props = {
/**
* Layer variant
*/
variant: {
type: String,
default: 'text',
},
}
export { props }
}
For generating the correct required value for props like below:
// @/composables/useProps.ts
export const disabled = {
type: Boolean,
default: false,
}
import { disabled } from '@/composables/useProps'
export default defineComponent({
props: {
disabled,
},
})
You need to add as const to variable definition:
export const disabled = {
type: Boolean,
default: false,
- }
+ } as const
vue-component-meta to generate components' API via automation.3.0.0 (2025-07-01)
strictVModel option (#5229) - Thanks to @KazariEX!v-on syntax (#5275) - Thanks to @KazariEX!strictCssModules option (#5164) - Thanks to @KazariEX!ComponentAttrs type for attribute extractiontypescript.sortImports, typescript.removeUnusedImports commands (#5444)zh-CN, zh-TW, ru and ja (#5330, #5340, #5404) - Thanks to @KazariEX, @PurplePlanen and @zyoshoka!typescript-language-features module loading race condition (#5260)defineModels (#5273) - Thanks to @KazariEX!data- attribute completion from sfc level nodes - Thanks to @KazariEX!undefined from optional prop type with default in template (#5339) - Thanks to @Dylancyclone!navigation: true (#5378) - Thanks to @KazariEX!v-for (#5399) - Thanks to @KazariEX!semantic code feature on first argument of useCssModule and useTemplateRef - Thanks to @KazariEX!updateFile (#5438) - Thanks to @Akryum!Prettify<T> breaks generics inferencing (#5424) - Thanks to @so1ve!var instead of let to declare attrsVar that may be hoisted - Thanks to @KazariEX!directory path in package.json (#5283) - Thanks to @zyoshoka!vue_language_server_path in nvim setup example (#5391) - Thanks to @menuRivera!typescript.tsdk initialization option (#5409)defineProp support (#5415) - Thanks to @KazariEX!complete to suggest for clarityFAQs
Unknown package
The npm package vue-component-meta receives a total of 335,767 weekly downloads. As such, vue-component-meta popularity was classified as popular.
We found that vue-component-meta demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.
Research
/Security News
Two npm packages masquerading as WhatsApp developer libraries include a kill switch that deletes all files if the phone number isn’t whitelisted.