vue

Vue 3 Composition API with script setup, reactivity system, and built-in components for single-file components.

- Use <script setup lang="ts"> with TypeScript; leverage defineProps, defineEmits, defineModel, and other macros for type-safe component APIs

- Core reactivity includes ref, shallowRef, computed, watch, watchEffect, and lifecycle hooks; prefer shallowRef when deep reactivity isn't needed

- Built-in components cover Transition, Teleport, Suspense, KeepAlive, and directives like v-memo for advanced patterns

- Always use Composition API over Options API; avoid reactive props destructuring to maintain reactivity

Vue

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

Preferences

- Prefer TypeScript over JavaScript

- Prefer <script setup lang="ts"> over <script>

- For performance, prefer shallowRef over ref if deep reactivity is not needed

- Always use Composition API over Options API

- Discourage using Reactive Props Destructure

Core

Topic
Description
Reference

Script Setup & Macros
<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics
script-setup-macros

Reactivity & Lifecycle
ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables
core-new-apis