Guide Vue 3 Composition API reactivity and lifecycle patterns for SSR.
npx skills add https://github.com/e-xode/vue-ssr --skill vue3-composition
Please help me install this Agent Skill. Skill: vue3-composition Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue3-composition Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue3-composition
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.
ref() vs reactive() (project standard: ref()), how computed() and watch() behave, and why .value and destructuring mistakes break updates.window, document, localStorage) is placed in onMounted() with proper guards.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.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?”
High-intent search queries and answers about installing and using this skill.
To write an SSR-safe Vue 3 composable, use `ref()` for state and explicit `watch()` for route param changes, ensuring browser-only logic like data fetching guards are placed inside `onMounted()` to prevent server-side execution errors.
Vue 3 reactivity breaks on destructuring because it loses the reactive reference. You must use `ref()` exclusively and access state via `.value` to maintain reactivity, avoiding `reactive()` and the implicit tracking of `watchEffect()`.
The best way to handle browser-only APIs in Vue 3 SSR is to wrap `window`, `document`, or `localStorage` access inside `onMounted()` lifecycle hooks with proper guards, ensuring this code only executes on the client.
You need to use `ref()` instead of `reactive()` as the project standard for Vue 3 Composition API state management to avoid destructuring issues and ensure `.value` access maintains consistent reactivity across SSR and client environments.
Yes, Vue 3 `<script setup>` supports `defineModel` for two-way binding and template refs to focus DOM elements after render, requiring SSR-safe guards to ensure DOM access logic only runs during client-side `onMounted()`.
The limitation of `watchEffect()` in Vue 3 SSR composable patterns is its implicit dependency tracking, which can cause unexpected server-side execution; explicit `watch()` is enforced to ensure reactivity behaves safely across server and client.
thesaifalitaiBuild Vue 3 apps with Composition API scripts, Pinia stores, and TypeScript props.
jonathanbeloloImplement Composable Svelte SSR with renderToHTML and hydrateStore.
lamb92009Generate Vue 3 project skeletons with Composition API, Pinia, and Vite.
vallafedericoExplain SolidJS reactivity primitives including signals, effects, stores, and memos.