TypeScript with Vue: A Pragmatic Setup

The core patterns, quickly

• Props: defineProps<{ user: User; compact?: boolean }>(), with withDefaults when defaults matter. Interfaces beat runtime validators for expressiveness.
• Emits: defineEmits<{ save: [draft: Draft]; cancel: [] }>() gives every listener a typed payload.
• Refs: inference handles most cases; annotate the nullable ones explicitly, like ref<User | null>(null), and type template refs with the element or exposed component type.
• v-model: defineModel<string>() collapses the old props-plus-emit dance into one typed line.

Type the seams, infer the middle

The highest-value types sit at boundaries: API responses, composable signatures, store state, and component props. Inside a function, inference does the work, and annotating every local variable is ceremony without safety. Define API types once, ideally generated from your backend schema or validated at runtime with something like zod at the fetch boundary, so a field rename breaks the build instead of production.

Keep strictness honest

Turn on strict mode from day one on new projects; retrofitting it later is the expensive path. Treat any as a loan with interest, acceptable at a messy third-party boundary, corrosive in your own domain logic. In Nuxt, let the generated types work for you: typed useFetch returns, typed route params, and typed auto-imports come free once you stop fighting the defaults. The goal is not maximal typing; it is that the compiler catches the mistakes you were going to make anyway.