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?
<!-- -->
. But it sounds like you're looking for inline commenting?
HTML
code! Thnx
{{! 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?
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>
<comment>Commenting here</comment
. You will have to add these to your webpack config. vue-loader.vuejs.org/guide/custom-blocks.html#example
<!-- ... multiple lines ... -->
I have just tested this:
<template>
{{ /* this is a comment */ }}
<h1>Hello world</h1>
</template>
Error parsing JavaScript expression: Unexpected token (1:24)
{{ /*<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.
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.
In Vue file / .vue use
/*-- comment in Vue file */
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.
...
template
tag, but inside the script
tag
Success story sharing