Vue Single File Components (SFCs) are files with the .vue extension that encapsulate the template, logic, and styling of a Vue component in a single file. SFCs are a defining feature of Vue and are the recommended way to build components in most projects.
Vue.js
Beginner
10 min read
Vue Single File Components
Example
<template>
<div class="greeting">
<h2>Hello, {{ name }}!</h2>
<button @click="changeName">Change Name</button>
</div>
</template>
<script>
export default {
name: 'Greeting',
props: ['name'],
data() {
return { names: ['Alice', 'Bob', 'Charlie'], index: 0 }
},
methods: {
changeName() {
this.index = (this.index + 1) % this.names.length
this.$emit('update:name', this.names[this.index])
}
}
}
</script>
<style scoped>
.greeting { padding: 1rem; background: #f0f4f8; border-radius: 8px; }
</style>