How to do comments in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today, I am going to show you How do you do comment in VueJS?

Table of Content

• Setup the Vue (Optional)
• Create FirstComponent.vue and import it into App.js
• Comment outside the template

This article will guide you to how do I do comment in vueJS.

Setup the Vue (Optional)

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation.

How to Install the VueJS project?

Create FirstComponent.vue and import it into App.js

Create the new component in the src/components/ components folder. the component name is FirstComponent.vue and imported into the App.js file:

App.js

<template>
  <div id="app">
    <FirstComponent />
  </div>
</template>

<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
  name: "App",
  components: {
    FirstComponent,
  },
};
</script>

Comment outside the template

To comment the outside the template we are going to use this syntax <!-- comment outside the template -->.Let’s see the code example:

FirstComponent.js

<!-- comment outside the template -->
<template>
  <div>
    comment outside the template 
  </div>
</template>

<script>
export default {
  name: "FirstComponent",
};
</script>

Comment inside the template

To complete the inside of the template we are going to use this syntax <!-- comment outside the template --> and {{/* comment outside the template */}}.Let’s see the code example:

FirstComponent.js

<template>
  <div>
    <!-- comment outside the template -->
    {{ /* this is a comment */ }}
  </div>
</template>

<script>
export default {
  name: "FirstComponent",
};
</script>

single line comment inside script

To comment on the single line inside the script we are going to use this syntax // single line comment.And for multiple lines we are going to use /* multiple line comment */.Let’s see the code example:

FirstComponent.js

<template>
  <div id="app">
    <!-- comment inside the template -->
    <h1>Welcome to sortoutcode.com</h1>
  </div>
</template>

<script>
export default {
  name: "FirstComponent",
  mounted(){
    // single line comment inside the script

    /* 
    multiple line comment 
    inside the script
    */ 
  }
};
</script>

All the best 👍.