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?

Idolla

If you're looking for multi-line commenting, the standard html comment will work: <!-- -->. But it sounds like you're looking for inline commenting? – Protective

Ahh, I forgot to try that. It is indeed HTML code! Thnx – Idolla

By default HTML comments are removed by vue vuejs.org/v2/api/#comments – Estis

Vue’s templating syntax is very similar to Handlebars. It’s worth noting that Handlebars allows {{! comments like this }} and {{!-- comments {{like this}} that can contain double-braces --}}. These do not get rendered in the output, unlike <!-- html comments --> which do. I tried both {{! ... }} and {{!-- ... --}} with Vue, and unfortunately they’re not supported. Would you consider adding them to your question for users who stumble upon it? – Wysocki

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

Roughhouse

Afaict, they aren't stripped in Vue 3 🤷 – Myelitis

Yeah this is breaking my templates in Vue 3 – Siena

Any solution for Vue 3? The config "comments: true" doesn't work here. – Slunk

@Myelitis have you found a solution to strip out html comments in templates? – Woolley

@Myelitis - Using Vue 3.2, by default they are stripped for me when doing a production build, but not when I'm using the development server. This seems to follow the documentation - v3.vuejs.org/api/… – Barnett

Page section mentioned by @Barnett has moved to: vuejs.org/api/… – Stroganoff

i think a number of us are looking for multi line comments that also play nice with nested comments – Unionize

Yes, the HTML comments are indeed removed when, for example, building Vue 3.3 for production with Vite. That they are shown in dev mode seems useful and expected to me. – Isola

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>

Horseleech

This results in "Unexpected token (1:1)" with Vue 2.5.13. – Behalf

I used to comment outside the supported root tags and found it to cause issues depending on the content of the comments. I wish vue supported comments outside the root tags because it's the most sensible place to create READMEs and such, but oh well. – Trisa

Instead of using comments outside the supported root tabs, use valid tags there. <comment>Commenting here</comment. You will have to add these to your webpack config. vue-loader.vuejs.org/guide/custom-blocks.html#example – Derail

worth noting that html comments also work for <!-- ... multiple lines ... --> – Ettieettinger

Answer 3

I have just tested this:

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

Camass

Cool, it doesn't appear in html output. But only one-line-comments are supported with this syntax. – Ammo

Unfortunately, I cannot get this to work: Error parsing JavaScript expression: Unexpected token (1:24) – Myelitis

Finally! So simple I wonder how come I never thought of it before. Now my comments don't propagate to the final HTML. Thank you! @d9k, I don't see that. I have a multiline comment, precisely with links to SO answers — and including this very answer! — and it works great with the {{ /*<anything, including newlines>*/}} syntax. If, on the other hand, you go with // comments, which are single-line in JS, you'll have trouble with line breaks. – Inexcusable

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>

Piperonal

That is because the HTML comment is also a tag. It is breaking the markup. – Camass

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>

Noseband

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

Sipe

My VSCode used to know exactly which of those to use when I hit "Ctrl + /" depending on the area of the file I was working on... after messing with some React junk 😳. Any idea where that behavior is set? – Hispania

@Hispania unfortunately there doesn't seem to be any easy way to configure that. The only way I've seen is to create your own VSCode extension, I did that here for Shopify Liquid comments if it helps: github.com/Christopher-Hayes/liquid-comments The only thing is I did it based on file extension. For your use case may not work. You might also want to see what config options Volar provides. – Drudgery

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.

Ursula

Oh, this is super-cool and just what I was looking for!!!! – Auroora

IMHO, this is worth making a question, "How do I comment-out a code block" in HTML and self-answering, but perhaps that already exists. – Auroora

very cool - thanks! – Makeshift

I always does that because commenting mess with the code, it will escape things, sometimes replaces special chars by html entities and so on – Elayne

Answer 8

Try this

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

Gem

Answer 9

In Vue file / .vue use

/*-- comment in Vue file */

Monitorial

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.

Crosseyed

Answer 11

@launchoverit mentioned this in a comment, but it wasn't brought to the fore in an answer (as far as I can tell).

See the docs here >>

By default, Vue will remove the comments in production. Setting this option to true will force Vue to preserve comments even in production. Comments are always preserved during development. This option is typically used when Vue is used with other libraries that rely on HTML comments.

I haven't tested this. But it seems that if you put some HTML comments in your <template> section, and you're wondering (while developing) how to prevent those comments from being transmitted to your end-user's browser, then worry no more!! You're only seeing those comments in your Dev-tools in the Dev environment (apparently).

If you want to change this behaviour (and in the context of this question, you probably don't want to!!) then set property app.config.compilerOptions.comments = true (where app is your Vue Application created with createApp()):

const app = createApp({
  /* root component options, but presumably not compiler options as well (?) */
});
app.config.compilerOptions.comments = true;

Backwards

Answer 12

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.

...

Kela

However, this doesn't work inside the template tag, but inside the script tag – Entrails