gt-agent-company/.agents/skills/vue-best-practices/rules/extract-component-props.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Extract Component Props	HIGH	extract props, emits, slots types from .vue components	capability	typescript, props, emits, slots, vue-component-type-helpers, wrapper, ComponentProps

Extract Component Props

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

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

npm install -D vue-component-type-helpers

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

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

// ❌ 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