Understanding single-file components

As you may have guessed, the App.vue file mentioned before is a single-file component (SFC), one of the great contributions of Vue. In this type of file, we can describe the HTML, CSS, and JavaScript that defines the component. The web page is then composed in a hierarchy of components, starting from an entry point (traditionally named App.vue) down to the last customized button, if you will. We will discuss components in depth in Chapter 4, User Interface Composition with Components, but for now, keep in mind that this is the way to go, as prescribed by the framework. If you have experience in an object-oriented language, this may look familiar (and you wouldn’t be wrong).

An SFC is a plain text file with the .vue extension that contains the following sections:

<script setup>
    // Here we write our JavaScript
</scrip>
<template>
    <h1>Hello World! This is pure HTML...