# vue-component-type-helpers

Latest version **3.3.11** (published 2026-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-component-type-helpers
pnpm add vue-component-type-helpers
yarn add vue-component-type-helpers
bun add vue-component-type-helpers
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 3.3.11 |
| Published | 2026-08-21 |
| First published | 2023-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6718 |
| Maintainers | johnsoncodehk, kazariex |

## Links

- npm: https://www.npmjs.com/package/vue-component-type-helpers
- Repository: https://github.com/vuejs/language-tools
- Homepage: https://github.com/vuejs/language-tools#readme
- Issues: https://github.com/vuejs/language-tools/issues
- npm.io page: https://npm.io/package/vue-component-type-helpers

## Recent versions

- 3.3.11 (latest) — 2026-08-21
- 3.0.11 (v3.0) — 2026-06-08
- 3.3.10 — 2026-08-15
- 3.3.9 — 2026-07-31
- 3.3.8 — 2026-07-22
- 3.3.7 — 2026-07-08
- 3.3.6 — 2026-06-30
- 3.3.5 — 2026-06-13
- 3.3.4 — 2026-06-08
- 3.3.3 — 2026-05-30
- 3.3.2 — 2026-05-25
- 3.3.1 — 2026-05-19
- 3.3.0 — 2026-05-18
- 3.2.9 — 2026-05-13
- 3.2.8 — 2026-05-04
- … 158 more at https://npm.io/package/vue-component-type-helpers/versions

## README

# vue-component-type-helpers

<p>
  <a href="https://www.npmjs.com/package/vue-component-type-helpers"><img src="https://img.shields.io/npm/v/vue-component-type-helpers.svg?labelColor=18181B&color=1584FC" alt="NPM version"></a>
  <a href="https://github.com/vuejs/language-tools/blob/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
</p>

Helper utilities for extracting types such as props, slots, attrs, emit, and exposed from Vue component types. No runtime dependencies; provides TypeScript type definitions only.

## Installation

```bash
npm install vue-component-type-helpers
```

## Type Helpers

### `ComponentProps<T>`

Extracts the props type of a component.

```typescript
import type { ComponentProps } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Props = ComponentProps<typeof MyComponent>;
```

### `ComponentSlots<T>`

Extracts the slots type of a component.

```typescript
import type { ComponentSlots } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Slots = ComponentSlots<typeof MyComponent>;
```

### `ComponentAttrs<T>`

Extracts the attrs type of a component.

```typescript
import type { ComponentAttrs } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Attrs = ComponentAttrs<typeof MyComponent>;
```

### `ComponentEmit<T>`

Extracts the emit function type of a component.

```typescript
import type { ComponentEmit } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Emit = ComponentEmit<typeof MyComponent>;
```

### `ComponentExposed<T>`

Extracts the instance type exposed via `defineExpose`.

```typescript
import type { ComponentExposed } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Exposed = ComponentExposed<typeof MyComponent>;
```

## Example

Given the following component:

```vue
<!-- MyComponent.vue -->
<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>
```

Using type helpers:

```typescript
import type { ComponentProps, ComponentSlots, ComponentEmit, ComponentExposed } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

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

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

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

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

## License

[MIT](https://github.com/vuejs/language-tools/blob/master/LICENSE) License

---
_Source: https://npm.io/package/vue-component-type-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._