Weekly Vue News #153 - Destructure in v-for

Weekly Vue News #153 Destructure in v-for View online Hi 👋 As I'm still on vacation, I wish you an amazing week and hope you enjoy this issue as much as I enjoyed putting it together. Have a nice week ☀️ Vue 📕 Recreating Queens Game in Vue 👉🏻 Queens is a puzzle game that combines elements of Minesweeper, chess, and Sudoku. 📕 The simplicity of using Vue's reactivity system outside of Vue 👉🏻 Vue's reactivity can be imported and used in JS outside of a Vue app, like in Node directly. 📕 Efficiently Managing Remote Data in Vue with Vue Query 👉🏻 Vue Query, inspired by React Query, provides powerful hooks for fetching, caching, and synchronizing server state in your Vue applications. 📹 Dynamic Components in Vue 👉🏻 Learn how to use dynamic components in Vue from Alex Lichter. 👉🏻 Learn about the difference between direct imports and importing the components lazily as well as discussing global components. 🛠️ Vuesion 👉🏻 A boilerplate that empowers product teams to build faster with modern best practices across engineering and design. 👉🏻 It features a full-stack framework, comprehensive design system, robust testing, and seamless internationalization. 🔥 Vue Tip: Destructure in v-for I'm a big fan of ES6 destructuring and recently discovered that you can use it in v-for. First, let's take a look at a v-for without using ES6 destructuring: 1<div v-for="article in articles" :key="article.id"> 2 <h2>{{ article.title }}</h2> 3</div> articles is a list of article JavaScript objects and has the type Article[]: 1interface Article { 2 title: string 3 id: string 4} We can use ES6 destructuring which results in a cleaner template code: 1<div v-for="{id, title} in articles" :key="id"> 2 <h2>{{ title }}</h2> 3</div> 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 Seamless Fullstack Nuxt Apps with Nuxt Hub 👉🏻 NuxtHub is a deployment and admin platform making it possible to build and deploy full-stack Nuxt application with ease. 📕 Announcing Orion: A Community-Driven Collection of Templates for Your Nuxt Project 👉🏻 Built by the Nuxt community for the Nuxt ecosystem 📕 Nuxt Form Validation with Precognition and Zod 👉🏻 This article introduces a new Nuxt module for implementing form validation and getting a result back on the server. 📅 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 📕 How To Hack Your Google Lighthouse Scores In 2024 👉🏻 Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are. 📕 Investigating INP issues 👉🏻 Interaction to Next Paint (INP) is a Core Web Vital that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard events. 📕 Sometimes, Object Property Order Matters 👉🏻 Since version 4.7, the order of properties in an object in TypeScript can affect type inference. 🛠️ JsonTree 👉🏻 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data. 😂 Fun 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 Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany