Commenting code is a simple but important part of writing clean, maintainable Vue.js components. Since a .vue file combines template, script, and style sections, each part has its own comment syntax.

Here’s a quick guide on how to add single-line and multi-line comments in all parts of a Vue single-file component (SFC).

Commenting in the <template> Section

In the HTML-like <template> part, use HTML comments:

<template>  <div>

    <!– This is a single-line comment –>

    <h1>Hello, Vue!</h1>

    <!– 

      This is a multi-line comment.

      It can span multiple lines.

    –>

  </div>

</template>

Note: Vue strips template comments when rendering to the DOM, they won’t appear in the final HTML.

Commenting in the <script> Section

In <script>, use standard JavaScript comment syntax:

<script setup>// This is a single-line comment

 

/*

  This is a multi-line comment.

  Useful for longer notes.

*/

 

const message = ‘Hello Vue’

</script>

Tip: Use comments to explain logic, props, emits, or Composition API hooks.

Also Read: The Vue JS Best Practices In Detail

Commenting in the <style> Section

In the <style> block, use CSS comment syntax:

<style scoped>/* This is a CSS comment */

 

h1 {

  color: blue; /* Inline comment */

}

</style>

Note: CSS only supports multi-line comments, not //.

Also Read: How to Access External JSON File Objects in Vue.js Application

Key Takeaway

Each section in a .vue file uses the comment syntax of its respective language:

  • <template>: <!– –>
  • <script>: // or /* */
  • <style>: /* */

Clean comments help keep your Vue code understandable for you and your team.

Related Resources