Several Elements and Comments

Look at the templates you've written so far: a heading, paragraphs and buttons side by side, with no element around them all. That's fine: a template can have several elements at the top level, and Vue puts them all into #app. (In Vue 2, the older version, a template needed exactly one element at the top, so older code often wraps everything in a <div>.)

Comments in a template are written as in HTML, between <!-- and -->. The browser doesn't show them:

<template>
    <!-- Prices change every season. -->
    <p>Cheesecake, €{{ price }}</p>
</template>

Each part of a .vue file has the comments of its language: in <script setup>, JavaScript's // for the rest of the line and /* */ for several lines, and in <style>, CSS's /* */.

Comments explain what isn't clear from the code itself. They can also switch a part of the template off for a while: an element inside a comment isn't on the page, but it's still in the code, ready to come back. Programmers call that commenting it out.

Typical mistakes:

• JavaScript's // doesn't work in a template. There, it's ordinary text, and the page shows it.