Vue component anatomy

How one Vue 3 Single File Component is built on the inside. This is about the shape of a single .vue file: the order of its blocks, its macros, its script, and its styles. It is deliberately library-neutral. For how a feature is split across several components use vue-build-feature; for choosing UI components (if the project uses Flux) use flux-ui; project-specific rules live in the repo's CLAUDE.md / AGENTS.md.

Assume <script setup lang="ts"> and Vue 3.5+ unless the repo says otherwise.

1. SFC skeleton and template root