DEV Community 👩‍💻👨‍💻

Pritesh Bhoi
Pritesh Bhoi

Posted on • Originally published at

Vue Js 3 - Single-File Component

Vue Single-File Components is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.

Here's an example Single-File Component:

export default {
  data() {
    return {
      greeting: 'Hello World!'

  <p class="greeting">{{ greeting }}</p>

.greeting {
  color: red;
  font-weight: bold;
Enter fullscreen mode Exit fullscreen mode

Why Single-File Component

  • Build modular components using familiar HTML, CSS and JavaScript syntax
  • Collocation of intrinsically related problems
  • Compiled templates
  • CSS with component scope
  • More ergonomic syntax when working with the Composition API
  • Further optimization at compile time via cross parsing of templates and scripts
  • IDE support with autocompletion and type checking for template expressions
  • Ready to use Heat Module Replacement (HMR) support.

How It Works

Vue SFC is a framework-specific file format and must be pre-compiled into standard JavaScript and CSS by @vue/compiler-Single-File Component. The compiled Single-File Component is a standard JavaScript (ES) module - meaning that with the proper build settings, you can import Single-File Component as a module:

import MyComponent from './MyComponent.vue'

export default {
  components: {
Enter fullscreen mode Exit fullscreen mode

Image description

Connect with us

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content