So you want to know how to comment code in a Vue file? Well, there are actually quite a few rules you need to follow to do this. In this article, we are going to show you the best practice ways to add comments in Vue.js, as well as some alternatives you could use.
So without further ado, let’s jump right in.
Best Practices: How To Comment Code In Vue
According to the Vue documentation, the best way to comment out code in Vue.js is with standard HTML, CSS, and JavaScript code comments.
In the template section, you want to use an HTML comment. Unlike raw HTML, these comments will be removed from the output and not visible in the production code.
<template>
<!-- Comment -->
</template>In the style section, you want to use a CSS comment
<style>
/* Comment */
</style>Finally, in the JavaScript section, we can use single or multi-line comments.
<script>
// Single Line Comment
/*
* Multi-Line
* Comment
*/
</script>Altogether, this is the best practice way to make comments in Vue.
<template>
<!-- Comment -->
</template>
<style>
/* Comment */
</style>
<script>
// Single Line Comment
/*
* Multi-Line
* Comment
*/
</script>Additional Ways To Write Comments In Vue
JavaScript Inside Template Tags
If you are utilizing JavaScript within your template tags, you can utilize the JavaScript comments above like so:
<template>
{{ // this is a single line comment }}
<h1>Hello world</h1>
{{ /* this is a multi
line comment */ }}
</template>Comments Outside of Tags
You can also write comments outside of tags and they will be completely ignored when rendered to your browser.
This is a comment about the entire file
- none of this will be included in the output file
- however, it may be bad practice
<template></template>
<script></script>
<style></style>Personally, I think writing plain text is bad practice and you should include one of the mentioned coding comment styles above to write comments outside of your tags. Here is an example with the HTML comment tags
<!--
This is a comment about the entire file
- none of this will be included in the output file
- including it in a comment tag is a better practice
-->
<template></template>
<script></script>
<style></style>Summary: How To Comment Code In Vue
In summary, there are a lot of ways to comment out Vue code depending upon which tag you are in. Generally, you want to follow the code comments used in HTML, CSS & JavaScript within your <template>, <style>, & <script> tags respectively.
Additionally, you can write JavaScript comments inside your template tags with “{{ }}” and it will also comment out your code. Any text outside of these three tags will also always be excluded.
So that’s about it! New to Vue and want to become a master? Check out this best-selling udemy course.
