Single-File Components

SFC Structure

An .vue file typically has <script>, <template>, and optional <style> blocks.

<script setup> is sugar for Composition API in SFCs.

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<style scoped>
button { font: inherit; }
</style>

Complete tiny SFC with scoped CSS.

Blocks

script/setup, template, style scoped/module

• Prefer Vue 3 + Composition API.
• Use script setup for SFCs.
• Keep components focused.
• Lean on official docs.

Single-File Components Cheatsheet

Quick reference for patterns covered in this lesson.

Scoped CSS

Attributes prevent styles leaking; deep selectors exist when needed.

Common Mistakes

• Unscoped app-wide styles by accident.
• Giant SFCs with multiple responsibilities.

Key Takeaways

• Single-File Components is a core Vue skill.
• Practice in a Vite app.
• Prefer clarity.
• Revisit docs for edge cases.