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 priteshbhoi18@gmail.com