Vue 3 Development

Based on Vue 3.5+. Always use Composition API with <script setup lang="ts">.

Preferences

• Always <script setup lang="ts"> — no Options API
• TypeScript for all component logic
• Prefer shallowRef over ref when deep reactivity is not needed
• Prefer Tailwind utility classes over custom CSS
• Avoid reactive props destructure — use const props = defineProps<Props>()
• Function declarations (function handleClick()) over arrow functions for component methods
• Early returns over if/else blocks

Quick Template

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

onMounted(() => {
  // ...
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

References

Load only the file relevant to your current task:

Conventions

Topic	Description	Reference
Code Organization	Script setup ordering, template rules, styling, naming conventions	conventions

API

Topic	Description	Reference
Script Setup Macros	defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	macros
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, composable patterns, effect scope	reactivity

Patterns

Topic	Description	Reference
Component Patterns	Async emit callbacks, v-model patterns, slot usage, loading states	patterns

Gotchas

Topic	Description	Reference
Common Pitfalls	Reactivity traps, computed mistakes, watcher timing, TypeScript, Tailwind, performance	gotchas

When to Load

• Editing a .vue component → conventions + macros
• Writing a composable → reactivity
• Implementing parent-child communication → patterns
• Something isn't working as expected → gotchas

Do not load all references at once.