Vue 3 Architecture & Single-File Components

Single-File Component (SFC) Anatomy

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

const greeting = ref('Hello, Vue 3!')
const count = ref(0)

function increment() {
    count.value++
}
</script>

<template>
    <div class="counter-card">
        <h1>{{ greeting }}</h1>
        <button @click="increment">Count is: {{ count }}</button>
    </div>
</template>

<style scoped>
.counter-card {
    padding: 1.5rem;
    border-radius: 12px;
}
</style>