Vue Patterns

Vue 3 Patterns

Component Policies

Props - Use Type-Only Syntax

<script setup lang="ts">
const props = defineProps<{
  book: Book
  isActive?: boolean
}>()

// With defaults
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello'
})
</script>

Emits - Use Named Tuple Syntax (Vue 3.3+)

<script setup lang="ts">
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()
</script>

Two-Way Binding - Use defineModel

<script setup lang="ts">
const model = defineModel<string>()
const count = defineModel<number>('count', { default: 0 })
</script>

State Management Policies

Prefer ref over reactive

Always use ref for single values. Use reactive only for tightly-coupled object hierarchies where .value is unwieldy.

Provide/Inject - Always Use InjectionKey

export const UserKey: InjectionKey<UserContext> = Symbol('user')
provide(UserKey, context)
const ctx = inject(UserKey)

Reactivity Policies

watch vs watchEffect

Performance - Use shallowRef for Large Objects

const largeList = shallowRef<Item[]>([])
// Replace entirely instead of mutation
largeList.value = [...largeList.value, newItem]

Template Policies

Never Mix v-if with v-for

<!-- BAD -->
<li v-for="item in items" v-if="item.isActive">

<!-- GOOD: Use computed -->
<li v-for="item in activeItems">

Always Use :key with Unique ID

<li v-for="item in items" :key="item.id">

Use v-show for Frequent Toggles

v-show keeps element in DOM, v-if removes it.

Performance Policies

Scoped Style Policies

:deep() Selector - Use with Caution

Risks:

• Breaks component encapsulation
• Fragile: child component refactoring breaks styles
• Hard to trace style origins in large codebases

<style scoped>
/* Target third-party component internals only */
:deep(.third-party-class) {
  color: var(--custom-color);
}
</style>

Anti-Patterns