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 //.
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
