How to comment code in a vue.js file?

Question

I have the need to insert a comment inside a vue.js file for future references, but I don't find how you do this in the docs.

I have tried //, /**/, {{-- --}}, and {# #}, but none of them seem to work.

I am using Laravel's blade. So this is the sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}

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

Does anyone know how to insert a comment and / or how to comment pieces of code?

Answer 1

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

Answer 2

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>

Answer 3

I have just tested this:

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

Answer 4

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>

Answer 5

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>

Answer 6

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

Answer 7

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.

Answer 8

Try this

<template>
  <!-- Todo::  -->
</template>

Answer 9

In Vue file / .vue use

/*-- comment in Vue file */

Answer 10

Depending on specific desired behavior, here are things that works to add comments in the template section:

  <template>
              <!-- comment incorporated in the rendered output. -->
              <aside v-if="false">Some comment that won’t be in the output result.</aside>
  </template>

Of course for the latter there is no requirement to use aside tag, and any false evaluated value can do the trick. So <i v-if="0">Some comment</i> will work just as well.

Admittedly, this is a bit convoluted, but Vue doesn’t seems to provide more straight forward options.

Answer 11

I'm noob in Vue.js, but // should work because the code is javascript anyway. Looking in the docs I find this example. If you look the first 2 lines of javascript you will see comments with //.

example in javascript linked file:

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

...