Guide Vue 3 template syntax for SSR applications with directives and bindings.
npx skills add https://github.com/e-xode/vue-ssr --skill vue3-templates
Please help me install this Agent Skill. Skill: vue3-templates Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue3-templates Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue3-templates
It prevents common Vue 3 template mistakes that cause hydration issues, broken rendering, slow UI behavior, or incorrect form state—especially in an SSR context.
v-bind/:, v-on/@, and conditional rendering with v-if/v-else(-if) and visibility toggling with v-show.v-for usage with a mandatory stable :key, and avoiding illegal patterns like mixing v-if and v-for on the same element.v-model with .lazy, .number, and .trim.v-html unless sanitized).Ask the AI to review your Vue 3 SSR template and rewrite it to follow the project rules for v-for keys, v-if placement, native v-model modifiers, and event/class/style bindings.
High-intent search queries and answers about installing and using this skill.
Vue 3 SSR hydration breaks when templates violate deterministic rendering constraints, such as using unstable v-for keys or mixing v-if with v-for on the same element. Enforcing stable keys and safe text rendering prevents mismatched DOM trees.
Native v-model in Vue 3 templates supports .lazy, .number, and .trim modifiers to synchronize form input state. Binding directly to native elements ensures correct form state and avoids slow UI behavior during SSR rendering.
Rendering lists with v-for in an SSR application requires assigning a stable :key to each item. You must avoid mixing v-if and v-for on the same element to maintain deterministic output and prevent hydration mismatches.
Using v-html in Vue 3 server-side rendered components is discouraged unless the content is strictly sanitized. Unsafe v-html usage introduces security vulnerabilities and can break deterministic SSR rendering constraints.
Vue 3 binds classes and styles using the v-bind shorthand `:` directive. Correct usage ensures deterministic SSR rendering by applying stable class and style objects or arrays without relying on client-side only calculations.
Vue 3 prohibits using v-if and v-for on the same element. This illegal pattern causes incorrect conditional rendering and hydration errors, so you should separate them by wrapping the v-for loop in a computed property or a wrapper element.
e-xodeStandardize Vue 3 component APIs with props, emits, defineModel, slots, and provide/inject for SSR.
shaprisConfigure Angular v20+ server-side rendering with hydration and prerendering.
rnavarychGuide Vue.js 3 development with Composition API, Pinia, Vue Router, and Nuxt.js 3.
PatternsDevBuild Vue components programmatically using render functions and JSX.