Simplified Debugging : One little gem in the latest version of Vue 3.3

The recent release of Vue.js 3.3 has brought a range of new features that significantly enhance the development experience (DX).

Among them, there is a small powerful improvement: the ability to use console.log directly in templates.

Previously, using console.log in Vue.js templates would cause this frustrating error 🤯 : TypeError: Cannot read properties of undefined (reading 'log')

However, Vue.js 3.3 has resolved this issue by enabling the use of console.log without generating errors.

How to use console.log in the template

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="console.log(++count)">++</button>
</template>

Test the example in the Vue Playground.

Now when you click on the button, you will see the value of count in your console 🥳