What Is a Single-File Component in Vue?

Single-File Components (SFCs) are a file format used in Vue applications. The approach combines a component's HTML, JavaScript and CSS in one file. These files, saved with the .vue extension, are used throughout the Vue ecosystem.

The single-file component structure offers these advantages:

1. Organisation: keeping HTML, JavaScript and CSS in one file makes component-based development tidier and easier to manage.
2. Modularity: each component is isolated, which improves reuse and maintenance.
3. Ease of development: Vue's tooling (Vite, the Vue CLI and webpack setups) processes .vue files and integrates them into the application.

A single-file component usually has three sections:

• <template>: the component's HTML structure.
• <script>: the component definition and JavaScript code.
• <style>: the component's own CSS.

This structure supports Vue's reactive, component-based nature and makes building modern web applications more efficient. See What Is a Vue Component? for a complete single-file component you can run.