Vue Component Type Helpers

3.2.7 · active · verified Sun Apr 19

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.

Common errors

```
Error: Cannot find module 'vue-component-type-helpers'
```
cause The package was installed, but its build artifacts were missing in version 3.2.1.

fix Update `vue-component-type-helpers` to version `3.2.2` or higher: `npm install vue-component-type-helpers@latest`.
```
ESLint: 'ComponentProps' is declared but its value is never read. (no-unused-vars)
```
cause Using a regular `import` statement for a type-only symbol, which is then removed during transpilation, causing linters to flag it as unused.

fix Change `import { ComponentProps } from 'vue-component-type-helpers';` to `import type { ComponentProps } from 'vue-component-type-helpers';`.

Warnings

breaking Version 3.2.1 of `vue-component-type-helpers` was released with missing build files, preventing proper installation and usage.
Fix: Upgrade to `vue-component-type-helpers@3.2.2` or any later version to resolve the package integrity issue.
gotcha As a TypeScript-only utility library, all imports from `vue-component-type-helpers` should use the `import type` syntax.
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.
gotcha 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.
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.

Install

npm install vue-component-type-helpers npm
yarn add vue-component-type-helpers yarn
pnpm add vue-component-type-helpers pnpm

Imports

ComponentProps
wrong:
```
import { ComponentProps } => from 'vue-component-type-helpers';
```
correct:
```
import type { ComponentProps } from 'vue-component-type-helpers';
```
Always use `import type` for type-only imports to ensure proper tree-shaking and avoid potential bundle size issues or lint warnings.
ComponentSlots
wrong:
```
const { ComponentSlots } = require('vue-component-type-helpers');
```
correct:
```
import type { ComponentSlots } from 'vue-component-type-helpers';
```
This library is TypeScript-only and designed for ESM environments; CommonJS `require` is not supported for type imports.
ComponentExposed
```
import type { ComponentExposed } from 'vue-component-type-helpers';
```
This helper extracts the return type of `defineExpose` for component instance methods and properties.

Quickstart

Demonstrates how to use `ComponentProps`, `ComponentSlots`, `ComponentEmit`, and `ComponentExposed` to extract types from a hypothetical Vue component.

import type { ComponentProps, ComponentSlots, ComponentEmit, ComponentExposed } from 'vue-component-type-helpers';

// MyComponent.vue (imaginary file for type extraction)
// <script setup lang="ts">
// defineProps<{
//   title: string;
//   count?: number;
// }>();

// defineEmits<{
//   update: [value: string];
//   close: [];
// }>();

// defineSlots<{
//   default(props: { item: string }): any;
//   header(): any;
// }>();

// const internalState = ref(0);
// defineExpose({
//   reset: () => { internalState.value = 0; },
// });
// </script>

// Imagine 'MyComponent' is a Vue component imported from a .vue file
declare const MyComponent: {
  __VLS_TypeProps: { title: string; count?: number };
  __VLS_TypeSlots: { default(props: { item: string }): any; header(): any };
  __VLS_TypeEmits: { (e: 'update', value: string): void; (e: 'close'): void };
  __VLS_TypeExposed: { reset: () => void };
  // Simplified representation for type checking demonstration
};

type Props = ComponentProps<typeof MyComponent>;
// Expected: { title: string; count?: number }

type Slots = ComponentSlots<typeof MyComponent>;
// Expected: { default(props: { item: string }): any; header(): any }

type Emit = ComponentEmit<typeof MyComponent>;
// Expected: { (e: 'update', value: string): void; (e: 'close'): void }

type Exposed = ComponentExposed<typeof MyComponent>;
// Expected: { reset: () => void }

console.log('Props type example:', {} as Props);
console.log('Slots type example:', {} as Slots);
console.log('Emit type example:', {} as Emit);
console.log('Exposed type example:', {} as Exposed);

view raw JSON →