Commenting out code in Vue.js

In this tutorial, you’ll learn how to comment out code in Vue.js templates.

Comment out code HTML templates in Vue.js

To comment out code in HTML templates you can use HTML comment tag <--! Your comment -->. HTML comments will only be visible to the developer, they won’t appear in the page source code.

Code example

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <!--
          {{ todo.text }}
        -->
      </label>
    </li>
  </ol>
</div>

Comment out code in Vue.js script part

Since Vue.js is written in JavaScript, you can use JavaScript syntax to comment out code.

Comment out a single line

methods: {
  toggle (todo) {
    todo.done = !todo.done
    // todo.text = ''
  }
}

Comment out multiple lines

methods: {
  toggle (todo) {
    /*todo.done = !todo.done
    todo.text = ''*/
  }
}

You can also use this syntax to leave code comments, like so:

methods: {
  toggle (todo) {
    // TODO: remove in the future release
    todo.done = !todo.done
  }
}

Full example

<!-- Comment -->
<template>
  <div>
      <!-- Html Comment -->
      Hello There!
  </div>
</template>

<!-- Commenting here -->

<script>
  // Single line comment

  /**
    * Commenting multiple lines
    * Commenting multiple lines
    */
</script>

<style><style>

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-comment-out-code

PS: Make sure you check other Vue.js tutorials, e.g. useful Vue.js filters, how to stop mouse event propagation in Vue.js and remove duplicate values from Vue.js array using ES6.