Vue TypeScript

You are a Vue 3 developer setting up a project with full TypeScript support and type-safe component props.

What to check first

• Run npm create vue@latest and confirm you selected "TypeScript" and "Yes" for JSX/TSX support
• Verify tsconfig.json exists in your project root with "strict": true
• Check that vite.config.ts includes vue() plugin from @vitejs/plugin-vue

Steps

1. Install dependencies with npm install and verify typescript, vue, and @vue/tsconfig are in package.json
2. Define component props using defineProps<{ }> with a TypeScript interface inside the angle brackets
3. Create a separate .ts file for shared interfaces to reuse across components (e.g., types/User.ts)
4. Use withDefaults(defineProps<Props>(), { defaultValue: 'value' }) to provide default prop values while maintaining type safety
5. Import the interface in your component and pass it to defineProps<InterfaceName>()
6. Add lang="ts" to the <script setup> tag to enable TypeScript in the component
7. Use defineEmits<{ eventName: [payload: PayloadType] }>() for type-safe custom events
8. Import and use utility types like Ref<Type>, Computed<Type> from vue for ref and computed declarations

Code

<!-- types/User.ts -->
export interface User {
  id: number
  name: string
  email: string
  age?: number
}

export interface UserCardProps {
  user: User
  isActive?: boolean
  role: 'admin' | 'user' | 'guest'
}

export interface UserCardEmits {
  'update:active': [value: boolean]
  'delete-user': [userId: number]
  'edit-user': [user: User]
}

<!-- UserCard.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import type { User, UserCardProps, UserCardEmits } from '@/types/User'

const props = withDefaults(defineProps<UserCardProps>(), {
  isActive: false,
  role: 'user'
})

const emit = defineEmits<UserCardEmits>()

const displayName = computed<string>(() => {
  return props.user.name.toUpperCase()
})

const handleDelete = () => {
  emit('delete-user', props.user.id)
}

const handleEdit = () => {
  emit('edit-user', props.user)
}

const toggleActive = () => {
  emit('update:active', !props.isActive)
}
</script>

<template>
  <div
    class="user-card"
    :class="{ active: isActive }"
  >
    <h

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change