vue3-templates

What problem does it solve?

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.

Core Features & Use Cases

• Correct directive usage: interpolation, v-bind/:, v-on/@, and conditional rendering with v-if/v-else(-if) and visibility toggling with v-show.
• Reliable list rendering: proper v-for usage with a mandatory stable :key, and avoiding illegal patterns like mixing v-if and v-for on the same element.
• Safe bindings and events: class/style binding mechanics, event handling with modifiers, and native-element v-model with .lazy, .number, and .trim.
• Rendering best practices: SSR determinism guidance and safer text rendering rules (avoid v-html unless sanitized).

Quick Start

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.