vue3-composition

What problem does it solve?

It resolves confusion and bugs when building Vue 3 components with the Composition API in an SSR environment, especially around ref/reactivity, lifecycle timing, and composable patterns.

Core Features & Use Cases

• Reactivity primitives guidance: Explains when to use ref() vs reactive() (project standard: ref()), how computed() and watch() behave, and why .value and destructuring mistakes break updates.
• Lifecycle & SSR-safe patterns: Clarifies what runs on server vs client and ensures browser-only logic (DOM, window, document, localStorage) is placed in onMounted() with proper guards.
• Composable authoring conventions: Standardizes useXxx composable structure, returning reactive state plus methods, and keeping watchers explicit (no watchEffect()).
• <script setup> component syntax: Covers defineProps, defineEmits, defineModel, template refs, and common patterns for focusing DOM elements after render.

Quick Start

Ask: “How should I implement an SSR-safe composable that watches the route param id and fetches data when it changes, using the project’s ref() and watch() conventions?”