Back
VueEasyNew
What is a Single-File Component (SFC)?
.vue files with template, script, style blocks
Ideal Answer
A Single-File Component is a .vue file that encapsulates a component's template, logic, and styling in one file using three blocks:
JavaScript
<template>
<button @click="count++">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
button { color: blue; }
</style>SFCs require a build step (via Vite or Vue CLI) to compile into JavaScript, but provide component-scoped CSS, single-file colocated concerns, and full IDE tooling support.