Single File Component

---

title: “Single File Component” description: “Learn about Single File Component in Vue.js”

---

title: “single file component” description: “Description for single file component”

Single File Components (SFC)

Vue’s Single File Components (.vue files) encapsulate template, logic, and styles in one file.

Example

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: ['msg']
}
</script>

<style scoped>
h1 { color: green; }
</style>