Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #84 - Debugging in Templates #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #84

Debugging in Templates

SponsoredWin a FREE ticket to attend the Vue.js Live Conference 2023

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 BrandBird in the CodeSnap.dev editor. Give it a try; it's now effortless to create stunning visuals of your code snippets using CodeSnap.

In my spare free time, I'm preparing upcoming newsletter issues and improving weekly-vue.news and CodeSnap.dev. I'm busy because we're preparing for the arrival of our baby 🐣.

Have a lovely week β˜€οΈ


To support me:

Vue Tip: Debugging in Templates

Probably you already tried to add a JavaScript expression like console.log(message) in your template:

App.vue
1<script setup lang="ts">
2import { ref } from 'vue'
3
4const 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:

App.vue
1<script setup lang="ts">
2import { ref } from 'vue'
3
4const message = ref('Hello World')
5
6function 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:

main.js
1import { createApp } from 'vue'
2import './style.css'
3import App from './App.vue'
4
5const app = createApp(App)
6
7app.config.globalProperties.$log = console.log
8
9app.mount('#app')

Finally, you can use $log in every one of your components:

App.vue
1<script setup lang="ts">
2import { ref } from 'vue'
3
4const message = ref('Hello World')
5</script>
6
7<template>
8 <span>{{ $log(message) || message }}</span>
9</template>
⚑ Open DemoCurated Vue ContentπŸ“Ή VueSchool Free Weekend (March 18-19)

πŸ‘‰πŸ» VueSchool opens its massive library of over 900 lessons about Vue & Nuxt.

vueschool.io
πŸ“• Writing a Cache Composable in Nuxt 3

πŸ‘‰πŸ» 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
πŸ“• How Do I Drag and Drop in Vue?

πŸ‘‰πŸ» Daniel explains how "Vue Draggable" can be used to support drag and drop in a Vue application.

vueschool.io
πŸ› οΈ Nuxt Scheduler
πŸ‘‰πŸ» Schedule jobs within Nuxt 3.
πŸ‘‰πŸ» A server-side task scheduler for Nuxt, which depends on node-cron.
github.com
πŸ“Ή A First Look at Nuxt Server Components
πŸ‘‰πŸ» Standalone server components will always be rendered on the server.
πŸ‘‰πŸ» They are currently experimental.
www.youtube.com
Quote of the weekCurated Web Development ContentπŸ“• Use Maps More and Objects Less

πŸ‘‰πŸ» A journey down a performance rabbit hole.

www.builder.io
πŸ“• Sandboxing JavaScript Code

πŸ‘‰πŸ» Val Town is an interesting, rather minimalist platform for running JavaScript in the cloud.

healeycodes.com
πŸ“• Writing Javascript Without A Build System

πŸ‘‰πŸ» 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
πŸ“• Why Is My Jest Test Suite So Slow?

πŸ‘‰πŸ» This is a write up of the ensuing investigation along with the improvements that slashed test running time.

blog.bitsrc.io
πŸ“• Container Queries Land in Stable Browsers
πŸ‘‰πŸ» 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.
web.dev
πŸ› οΈ ts-reset
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.
::
github.com
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 weekly-vue.news. All rights reserved.