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:

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

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

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

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: {
    MyComponent
  }
}

---

Connect with us [e-mail]