← All notes

Answer: A Vue single-file component (SFC, a *.vue file) encapsulates the template, logic, and styling of a component in one file. The <template>, <script>, and <style> blocks colocate the view, logic, and styling. SFCs need a build step.

Parsed form

parse() takes source and options and returns SFCParseResult. If parseCache already has sourceKey, parse returns that result. SFCDescriptor holds filename, source, template, script, scriptSetup, styles, and customBlocks. It also records whether the SFC uses the :slotted() modifier, used as a compiler optimization hint.

See also

• vue-template-syntax
• vue-composables

Claims

• id: C1 claim: An SFC encapsulates a component's template, logic, and styling. source: S1 evidence: "allows us to encapsulate the template, logic, and styling"

• id: C2 claim: template, script, and style blocks colocate those parts in one file. source: S1 evidence: "The <template>, <script>, and <style> blocks encapsulate and colocate"

• id: C3 claim: compiler-sfc parse() turns SFC source into a descriptor. source: S2 evidence: "export function parse("

• id: C4 claim: SFCDescriptor is the parsed form of an SFC. source: S2 evidence: "export interface SFCDescriptor {"

Sources

• [S1] Single-File Components. Vue.js docs. https://vuejs.org/guide/scaling-up/sfc.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] compiler-sfc parse. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/parse.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_6eg9v1jt,
  author = {{iinventedlight}},
  title = {{Vue single-file components colocate template, script, and style}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-single-file-components/},
  note = {Permanent ID iil:note:6eg9v1jt. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-single-file-components.md.