Vue component conventions

Target Vue 3.5+ SFCs and composables, including framework pages and layouts. Follow explicit project instructions and enforced lint rules when they differ from this skill. Use nearby code for details that instructions leave open.

Apply web interface conventions to framework-independent HTML, CSS, accessibility, content, and user behavior when available.

First pass

• Before editing, inspect the target SFC or composable, relevant callers or children, and a similar nearby file when available.
• Decide whether the change belongs in an SFC, composable, route, store, or test. Keep this skill focused on Vue mechanics in SFCs and composables.
• Identify which props the script needs and which rendering values can be prepared before rendering.
• Preserve public props, defaults, emits, models, slots, and Vue-specific styling hooks unless the task requires changing them.
• Reuse existing local composables and matching Vue component APIs before adding a new Vue abstraction.
• Use direct template markup for a small, fixed set of elements. Use data-driven rendering for dynamic or repeated structures.

Single-file component shape