How to comment code in a vue.js file?

Question

You'd want to use standard HTML comments in the <template> tag in your situation. They'll be stripped from the output as well which is nice.

<!-- Comment -->

As Bill Criswell said we can use HTML comment syntax.

<!-- Comment -->

But, It will work outside the template tag too, comment.vue

<!-- Testing comments, this will work too. -->

<template>
    <!-- This will work too -->

    <div>
        <!-- Html Comments -->
        Hello There!
    </div>
</template>

<style><style>

<!-- Commenting here -->

<script>
    // Commenting only 1 line

    /**
      * Commenting multiple lines
      * Commenting multiple lines
      */
</script>

I have just tested this:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>

I noticed that you can't comment when you are inside a tag:

<!-- make sure it is outside a tag -->

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>

If it is useful for your projects, you can put plain text above the template with no adornment. It is completely ignored when you render your component.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>

Vue Styleguidist contains best practices and shows examples of how to comment your components. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

But in General...

In the template or HTML section use HTML comments

<!-- Comment -->

In script section use Javascript comments

// Comment
/* Comment */

In style section use CSS comments

/* comment */

The following tip is not so much about commenting (as in documenting) code per se, but rather about allowing you to temporarily skip chunks of code during development.

When comments require opening and closing tags, the way that the parser matches them can be inconvenient. For instance the following

<!-- I want to comment this <!-- this --> and that --> 

will output and that -->. Similarly /* this will be commented /* and so will this */ but not this */.

My solution is to use v-if="false" to specify which blocks I want to (temporarily) skip.

<template>
<div>
    Hello
    <div v-if="false">
        Vue will not process whatever's in here.
    </div>
    World!
</div>
</template>

Note that this should not be used in replacement of proper comments to document your code. It's just a convenient way to have more control over blocks that you want to skip during the development.