Vue Defaults
Core Vue / Nuxt patterns and conventions
Details
Language / Topic
TypeScriptCategory
framework
Compatible Frameworks
vue
Rules
balanced
- Use `<script setup lang="ts">` with Composition API for full type inference in Single File Components.
- Type props with `defineProps<{ title: string; count?: number }>()` and emits with `defineEmits<{ (e: 'update', value: string): void }>()`.
- Use typed refs: `ref<User | null>(null)`, `reactive<State>({ ... })`, and `computed<string>(() => ...)`.
- Use `defineModel<string>()` for typed two-way binding and `defineSlots<{ default(props: { item: T }): any }>()` for typed scoped slots.
- Type provide/inject with `InjectionKey<T>`: `const key: InjectionKey<UserStore> = Symbol()` for type-safe dependency injection across the component tree.
- Use `defineModel<string>()` for typed two-way binding in Vue 3.4+ instead of manual `modelValue` prop + emit patterns.
- Type template refs with `useTemplateRef<HTMLInputElement>('input')` or `ref<InstanceType<typeof MyComponent> | null>(null)` for component refs.
- Define composable return types explicitly: `function useAuth(): { user: Ref<User | null>; login: (creds: Credentials) => Promise<void> }`.
- Use `PropType<T>` only with Options API: `props: { items: { type: Array as PropType<Item[]>, required: true } }` — prefer `<script setup>` with `defineProps<T>` instead.