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

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.

...

Answer 6

If you need to comment out an entire html block you can use v-if="false" to "blind" vue to the chunk of code that follows.

<template>
<div>
    Hello
    <div v-if="false">
        This part will be skipped.
    </div>
    World!
</div>
</template>