#title Weekly Vue News #84 - Debugging in Templates #preview Ready for your weekly Vue & Nuxt dose?
Debugging in Templates
I've teamed up with the Vue.js Live Conference to raffle two full tickets to the conference on May 12 & 15, 2023, online and in London.
Hi 👋
I'm thrilled to have reached 1000+ subscribers on this newsletter 🥳
Thank you to every one of you for your support and positive feedback.
Last week, I integrated
In my spare free time, I'm preparing upcoming newsletter issues and improving
Have a lovely week ☀️
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
Probably you already tried to add a JavaScript expression like console.log(message) in your template:
1 <script setup lang="ts">
2 import { ref } from 'vue'
3
4 const message = ref('Hello World')
5 </script>
6
7 <template>
8 <span>{{ console.log(message) }}</span>
9 </template>
Your app will throw the following error:
Cannot read properties of undefined (reading 'log')
It does not work because console is unavailable on the component instance. A quick fix would be to add a log method to the component:
1 <script setup lang="ts">
2 import { ref } from 'vue'
3
4 const message = ref('Hello World')
5
6 function log(message: string) {
7 console.log(message)
8 }
9 </script>
10
11 <template>
12 <span>{{ log(message) }}</span>
13 </template>
You don't want to add that function to every component you want to debug. Therefore let's add console.log to the global properties that can be accessed on any component instance inside your application:
1 import { createApp } from 'vue'
2 import './style.css'
3 import App from './App.vue'
4
5 const app = createApp(App)
6
7 app.config.globalProperties.$log = console.log
8
9 app.mount('#app')
Finally, you can use $log in every one of your components:
1 <script setup lang="ts">
2 import { ref } from 'vue'
3
4 const message = ref('Hello World')
5 </script>
6
7 <template>
8 <span>{{ $log(message) || message }}</span>
9 </template>
👉🏻 VueSchool opens its massive library of over 900 lessons about Vue & Nuxt.
vueschool.io👉🏻 In this article, Michael Thiessen explores how to write a composable in Nuxt that can be used to cache data when using fetch.
masteringnuxt.com👉🏻 Daniel explains how "Vue Draggable" can be used to support drag and drop in a Vue application.
vueschool.io| 👉🏻 Schedule jobs within Nuxt 3. |
| 👉🏻 A server-side task scheduler for Nuxt, which depends on node-cron. |
| 👉🏻 Standalone server components will always be rendered on the server. |
| 👉🏻 They are currently experimental. |
👉🏻 A journey down a performance rabbit hole.
www.builder.io👉🏻 Val Town is an interesting, rather minimalist platform for running JavaScript in the cloud.
healeycodes.com👉🏻 Julia explains why she (usually) don’t use build systems and why she finds it frustrating that some frontend Javascript libraries require that you use a build system.
jvns.ca👉🏻 This is a write up of the ensuing investigation along with the improvements that slashed test running time.
blog.bitsrc.io| 👉🏻 Support for container queries and container query units are now in all three major browser engines. |
| 👉🏻 They’re handy for responsive design and reusable components. |
| With ts-reset: |
| 👉🏻 .json (in fetch) and JSON.parse both return unknown. |
| 👉🏻 .filter(Boolean) behaves EXACTLY how you expect. |
| 👉🏻 array.includes is widened to be more ergonomic. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
