How to Comment Code in a Vue.js File?

In Vue.js files, comments can be added in different parts of the file depending on where you want to place them:

1. Inside Block:

• For HTML and Vue templates, use HTML-style comments.
• Syntax: ‘<!– comment here – ->’

<template>
  <div class="media">
    <!-- This is a comment inside the template block -->
    <like-button :post="post" v-if="post.likedByCurrentUser === false"></like-button>

    <div class="media-left">
      <a href="#">
        <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
      </a>
    </div>
    <div class="media-body">
      <strong>{{ post.user.name }}</strong>
      <p>{{ post.body }}</p>
      <p>{{ post.likeCount }} {{ pluralize('like', post.likeCount) }}</p>
    </div>
  </div>
</template>

Inside Block:

• Use JavaScript comments.
• Syntax for single-line comments: // comment here
• Syntax for multi-line comments: /* comment here */

Inside

Block:

• Use CSS comments if you are using scoped or global styles.
• Syntax for single-line comments: // comment here
• Syntax for multi-line comments: /* comment here *

Specific Issue in Your Example

You mentioned using Laravel’s Blade and having issues with Vue comments and Blade comments. In your case, the comment syntax for Vue template () should work. However, Blade comments are different and not valid within Vue’s .

Here is how you can comment properly inside your Vue component: