{"id":12437,"library":"vue-component-type-helpers","title":"Vue Component Type Helpers","description":"vue-component-type-helpers is a utility library providing TypeScript type helpers to accurately extract various type definitions from Vue components. It enables developers to statically analyze and derive types for props, slots, attributes, emitted events, and exposed instance properties (via `defineExpose`) from `.vue` files. As of version 3.2.7, it is actively maintained as part of the official Vue.js Language Tools monorepo, receiving frequent updates, typically alongside new Vue Language Server or Volar releases. This library is entirely type-based, ships with its own TypeScript definitions, and has no runtime dependencies, making it a zero-overhead addition to any TypeScript-enabled Vue project. Its primary differentiation lies in providing robust, officially supported type inference for complex Vue component structures, crucial for strong type-checking and IDE support.","status":"active","version":"3.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/language-tools","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-component-type-helpers","lang":"bash","label":"npm"},{"cmd":"yarn add vue-component-type-helpers","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-component-type-helpers","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Always use `import type` for type-only imports to ensure proper tree-shaking and avoid potential bundle size issues or lint warnings.","wrong":"import { ComponentProps } => from 'vue-component-type-helpers';","symbol":"ComponentProps","correct":"import type { ComponentProps } from 'vue-component-type-helpers';"},{"note":"This library is TypeScript-only and designed for ESM environments; CommonJS `require` is not supported for type imports.","wrong":"const { ComponentSlots } = require('vue-component-type-helpers');","symbol":"ComponentSlots","correct":"import type { ComponentSlots } from 'vue-component-type-helpers';"},{"note":"This helper extracts the return type of `defineExpose` for component instance methods and properties.","symbol":"ComponentExposed","correct":"import type { ComponentExposed } from 'vue-component-type-helpers';"}],"quickstart":{"code":"import type { ComponentProps, ComponentSlots, ComponentEmit, ComponentExposed } from 'vue-component-type-helpers';\n\n// MyComponent.vue (imaginary file for type extraction)\n// <script setup lang=\"ts\">\n// defineProps<{\n//   title: string;\n//   count?: number;\n// }>();\n\n// defineEmits<{\n//   update: [value: string];\n//   close: [];\n// }>();\n\n// defineSlots<{\n//   default(props: { item: string }): any;\n//   header(): any;\n// }>();\n\n// const internalState = ref(0);\n// defineExpose({\n//   reset: () => { internalState.value = 0; },\n// });\n// </script>\n\n// Imagine 'MyComponent' is a Vue component imported from a .vue file\ndeclare const MyComponent: {\n  __VLS_TypeProps: { title: string; count?: number };\n  __VLS_TypeSlots: { default(props: { item: string }): any; header(): any };\n  __VLS_TypeEmits: { (e: 'update', value: string): void; (e: 'close'): void };\n  __VLS_TypeExposed: { reset: () => void };\n  // Simplified representation for type checking demonstration\n};\n\ntype Props = ComponentProps<typeof MyComponent>;\n// Expected: { title: string; count?: number }\n\ntype Slots = ComponentSlots<typeof MyComponent>;\n// Expected: { default(props: { item: string }): any; header(): any }\n\ntype Emit = ComponentEmit<typeof MyComponent>;\n// Expected: { (e: 'update', value: string): void; (e: 'close'): void }\n\ntype Exposed = ComponentExposed<typeof MyComponent>;\n// Expected: { reset: () => void }\n\nconsole.log('Props type example:', {} as Props);\nconsole.log('Slots type example:', {} as Slots);\nconsole.log('Emit type example:', {} as Emit);\nconsole.log('Exposed type example:', {} as Exposed);","lang":"typescript","description":"Demonstrates how to use `ComponentProps`, `ComponentSlots`, `ComponentEmit`, and `ComponentExposed` to extract types from a hypothetical Vue component."},"warnings":[{"fix":"Upgrade to `vue-component-type-helpers@3.2.2` or any later version to resolve the package integrity issue.","message":"Version 3.2.1 of `vue-component-type-helpers` was released with missing build files, preventing proper installation and usage.","severity":"breaking","affected_versions":"3.2.1"},{"fix":"Always use `import type { Symbol } from 'vue-component-type-helpers';` to ensure type-only imports, improving tree-shaking and adhering to best practices for TypeScript module resolution.","message":"As a TypeScript-only utility library, all imports from `vue-component-type-helpers` should use the `import type` syntax.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Regularly update all Vue Language Tools related packages (including `vue-component-type-helpers`) to their latest compatible versions to leverage the most accurate type inference and feature support.","message":"This library is part of the `vuejs/language-tools` monorepo. For optimal performance and correct type inference, ensure `vue-component-type-helpers` is kept in sync with the versions of `vue-tsc` and your VS Code Volar extension.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update `vue-component-type-helpers` to version `3.2.2` or higher: `npm install vue-component-type-helpers@latest`.","cause":"The package was installed, but its build artifacts were missing in version 3.2.1.","error":"Error: Cannot find module 'vue-component-type-helpers'"},{"fix":"Change `import { ComponentProps } from 'vue-component-type-helpers';` to `import type { ComponentProps } from 'vue-component-type-helpers';`.","cause":"Using a regular `import` statement for a type-only symbol, which is then removed during transpilation, causing linters to flag it as unused.","error":"ESLint: 'ComponentProps' is declared but its value is never read. (no-unused-vars)"}],"ecosystem":"npm"}