Single-File Components

An SFC bundles a component's template, logic, and styles into one .vue file with three top-level blocks.

4 min read Level 1/5 #vue#sfc#components

What you'll learn

Read the three-block .vue structure
Use `<script setup>` syntax
Add scoped styles

A Single-File Component (SFC) is a .vue file with three blocks: <template> for HTML, <script> for JavaScript or TypeScript, and <style> for CSS. Each block is bundled together but compiled separately.

The Three Blocks

<template>
  <p class="greeting">{{ msg }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('Hi from Vue')
</script>

<style scoped>
.greeting {
  color: green;
  font-weight: 600;
}
</style>

Top-level consts in <script setup> are automatically available in the template — no return needed.

Scoped Styles

Add scoped to a <style> block and Vue attaches a unique data attribute, so the rules apply only to this component:

<style scoped>
p { color: green }  /* matches only <p> in this component */
</style>

Without scoped, the styles are global. You can also use <style module> for CSS Modules.

Why SFCs Win

Co-location: template, logic, and styles for one component live together.
Tooling: Vite, Volar (VS Code), and TypeScript understand SFCs natively.
Pre-processors: add lang="ts", lang="scss", or lang="pug" to any block.

Template Syntax →