Vue Single File Components

A Single File Component (SFC) is a .vue file that combines template, logic, and styles into one self-contained unit — the standard way to write Vue components.

Anatomy of a .vue File

<!-- src/components/UserCard.vue -->
<template>
  <div class="card">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
    <button @click="greet">Say Hello</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  user: { type: Object, required: true }
})

function greet() {
  alert(`Hello, ${props.user.name}!`)
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}
</style>

Using the Component

<script setup>
import UserCard from './components/UserCard.vue'

const user = { name: 'Alice', email: '[email protected]' }
</script>

<template>
  <UserCard :user="user" />
</template>

Scoped Styles

The scoped attribute on <style> ensures styles only apply to elements in that component — no global leakage.