# 2916 Extract Component Props 3bcedb0d

> Extract Component Props

- Skill: `tools-only/2916-extract-component-props-3bcedb0d` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/2916-extract-component-props-3bcedb0d`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/2916-extract-component-props-3bcedb0d/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/2916-extract-component-props-3bcedb0d

---


# Extract Component Props

**Impact: HIGH** - extract props, emits, slots types from .vue components

Use `vue-component-type-helpers` to extract types from `.vue` components:

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

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

type Props = ComponentProps<typeof MyButton>
type Emits = ComponentEmit<typeof MyButton>
type Slots = ComponentSlots<typeof MyButton>
type Exposed = ComponentExposed<typeof MyButton>
```

## Wrapper Component Pattern

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

type BaseProps = ComponentProps<typeof BaseButton>

interface Props extends BaseProps {
  size: 'sm' | 'md' | 'lg'
}

defineProps<Props>()
```

## Do NOT Use

```typescript
// ❌ Includes Vue internal properties (onUpdate:*, class, style, etc.)
type Props = InstanceType<typeof MyButton>['$props']
```

## Note

Vue's built-in `ExtractPropTypes` is for runtime props objects (`props: { foo: String }`), not for `.vue` components.

## Reference

- [vue-component-type-helpers](https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers)