Clash Royale CLAN TAG

How to comment code in a vue.js file?

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:

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?

<!-- -->

HTML

3 Answers
3

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.

<template>

<!-- 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'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.

...


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.