Weekly Vue News #163 - Typing Template Refs With TypeScript

Weekly Vue News #163 Typing Template Refs With TypeScript View online Hi 👋 I've started sharing my content on Threads, been experimenting with AI chatbots, but unfortunately, made no progress on my blog post about optimistic updates. In this issue, enjoy the latest articles, videos, and tools to keep your Vue and Nuxt skills sharp! Have a lovely week ☀️ Vue 📕 What's a good client side JS framework today? (Reddit Thread) 👉🏻 TL;DR: React has the best ecosystem, Vue is the jack-of-all-trades, and Angular is still used widely though isn't talked about as much. 📕 Automate Your Vue Deployment: A Step-by-Step Guide to Using GitHub Actions 👉🏻 This blog post includes a step-by-step guide on how to deploy your Vue application using GitHub Actions. 📕 An SSR Performance Showdown 👉🏻 In benchmarks of server-side rendering (SSR) across frontend frameworks, like React, Vue, Svelte, and Solid, fastify-html and Vue are the top performers. 📹 What's New In Vue 3.5? 👉🏻 In this video, Matt goes through the official Vue 3.5 release announcement. 👉🏻 Dive into amazing new features like useId(), useTemplateRef(), reactive props destructure, and more. 🛠️ GOK.UK Vue 👉🏻 Vue implementations of every component in the GOV.UK Design System. 💡 Vue Tip: Typing Template Refs With TypeScript Since Vue 3.5, you can use the useTemplateRef()useTemplateRef() function to type template refs with TypeScript. This function automatically infers the correct type for the template ref based on what element or component the matching `ref` attribute is used on: 1<script setup> 2import { useTemplateRef, onMounted } from 'vue' 3 4const myInput = useTemplateRef('my-input') 5 6onMounted(() => { 7 myInput.value.focus() 8}) 9</script> 10 11<template> 12 <input ref="my-input" /> 13</template> As you can see in the example above, the ref can only be accessed after the component is mounted. Therefore, we use the onMountedonMounted lifecycle hook to focus on the input element. In a template expression, myInputmyInput will be nullnull on the first render because the element doesn't exist at that point. If the auto-inference doesn't work as expected, you can provide a type argument to useTemplateRef()useTemplateRef() to specify the type explicitly: 1const myInput = useTemplateRef<HTMLInputElement>(null) Nuxt 📕 Reactivity From Scratch 👉🏻 In this free 7-day course, you'll learn how to build Vue 3's reactivity system from scratch. 📕 Controlling When Components are Loaded in Nuxt* 👉🏻 Nuxt offers various strategies to control when components are loaded, improving page load times and overall performance. 📕 Introducing hubBrowser() 👉🏻 It allows you to run a headless browser directly in your Nuxt application using Puppeteer. 👉🏻 Taking screenshots, crawling websites, generating PDFs and more has never been easier. 📹 What is BFF?! (With Nuxt, Nitro and h3) 👉🏻 In this video, Alex explains the Backend For Frontend pattern, discovers when to use it and why it can be useful. 👉🏻 Of course, he implements it with Nuxt, Nitro and h3. 📹 Kickstart websites in minutes with Nuxt UI and Prismic 👉🏻 Get introduced to Nuxt UI library and learn how you can connect your components to a CMS to make your website editable. 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 50 TypeScript F*ck Ups 👉🏻 This book is a collection of common and challenging trouble spots that trip up JS and TypeScript developers, along with tips on how to recognize and resolve them. 📕 JS Dates Are About to Be Fixed 👉🏻 The Temporal API in JavaScript offers a new approach to handling time with the Temporal.ZonedDateTime object, which accurately represents dates and times with their corresponding time zones. 🛠️ Free Public APIs 👉🏻 A collection of 224 free public APIs for developers that have been verified and tested. 🛠️ Fuite 👉🏻 A CLI tool that detects memory leaks in web applications by simulating user interactions, analyzing heap snapshots, and identifying leaked objects, event listeners, and DOM nodes. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany