Single-File Components

In this section, we will introduce an important format widely used in the creation of real production Vue apps.

Vue has its own format call Single-File Component (SFC). This format was created by the Vue team, and the file extension is .vue. It allows you to write one component per file, with both the template, and the logic and styling of this component in one place. The main advantage here is that each component is clearly self-contained, more maintainable, and easily shared.

An SFC describes a Vue component with an HTML-like syntax. It can contain three types of root blocks:

• <template>, which describes the template of the component with the template syntax we already used
• <script>, which contains the JavaScript code of the component
• <style>, which contains the style used by the component

Here's an example of an SFC:

<template...