Weekly Vue News #151 - Cache Component Instances With the KeepAlive Component

Weekly Vue News #151 Cache Component Instances With the KeepAlive Component View online Hi 👋 The week after next, I'm on vacation, so I'm busy preparing the following two newsletter issues for you. Enjoy this issue with many interesting articles, videos, tips, and more. Have a nice week ☀️ Vue 📕 Composition API vs. Options API 👉🏻 Should you use the Composition API or stick with the Options API? 👉🏻 Michael Thiessen's answer: "Use the Composition API over the Options API, unless you're building a small or simple app." 👉🏻 I absolutely agree! 📕 How to Master Vue Router in Vue.js 3 with Composition API 👉🏻 This article will guide you through setting up Vue Router, the official routing engine for Vue.js, to create a seamless navigation experience in your Vue.js project. 📕 Using shallowRef in Vue to improve performance 👉🏻 shallowRef is a great utility in Vue.js that could help improve performance of your website if you are dealing with huge data structures like nested objects or arrays. 📕 Angular Directives vs. Vue Directives 👉🏻 In this guide, you'll explore the heart of Angular and Vue directives, comparing their features, similarities and differences in detail. 📹 Design Patterns in Vue.js 👉🏻 Learn more about what Vue design patterns are and what the three shown patterns do, when they should be used and which downsides they could bring. Sponsored Certificates.dev Free Weekend Unlock 48 hours of free access to Vue.js Developer Certification Training on June 29 & 30, 2024. Dive into theory, coding challenges, quizzes, and a mock exam to gauge your readiness for the official certification. 🔥 Vue Tip: Cache Component Instances With the KeepAlive Component KeepAliveKeepAlive is a built-in Vue component that allows you to conditionally cache component instances when dynamically switching between multiple components. Let's take a look at a simple example to understand how KeepAliveKeepAlive works. We have two components, ComponentAComponentA and ComponentBComponentB, and we want to cache the instances of these components when switching between them. 1<script setup> 2import { shallowRef } from 'vue'; 3import ComponentA from './components/ComponentA.vue'; 4import ComponentB from './components/ComponentB.vue'; 5 6const current = shallowRef(ComponentA); 7</script> 8 9<template> 10 <div> 11 <label 12 ><input type="radio" v-model="current" :value="ComponentA" /> A</label 13 > 14 <label 15 ><input type="radio" v-model="current" :value="ComponentB" /> B</label 16 > 17 </div> 18 <component :is="current"></component> 19</template> If you switch between the components using the radio buttons, you will notice that the component instances are destroyed and recreated every time you switch between them. Thus, the state of each component is lost. If you want to cache the instances of the components, you can wrap the componentscomponents element with the KeepAliveKeepAlive component. 1<template> 2 <KeepAlive> 3 <component :is="current"/> 4 </KeepAlive> 5</template> You can play with interactive examples on my website to understand how it works in practice. 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 Nuxt 2 is approaching End of Life (EOL) 👉🏻 The official date is June 30th, 2024. 👉🏻 The Nuxt team partnered with HeroDevs on offering Never-Ending Support (NES). 📕 How Nuxt built their deployment platform with Resend 👉🏻 NuxtHub uses Resend to send their newsletter and transactional emails to users & the technical team. 🛠️ Nuxt Scripts 👉🏻 Better privacy, performance, and DX for third-party scripts in Nuxt apps. 👉🏻 it's in public preview and is not yet officially announced. 🛠️ Nuxt Auth Utils v0.1 is out 👉🏻 Hybrid Rendering support 👉🏻 AuthState component 👉🏻 10+ OAuth providers 📅 Events VueConf CN 2024 (6 July 2024, Shenzhen, China) 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 Deep is Your DOM? 👉🏻 Excessive DOM size in websites can negatively impact performance, especially on lower-end devices. 👉🏻 Deeper DOM trees slow down rendering when combined with many elements and complex CSS. 📕 Best Practices For Naming Design Tokens, Components And Variables 👉🏻 How can we get better at one of the hardest problems in computer science: naming things? 🛠️ Screen Ruler 👉🏻 A Chrome extension to measure and analyze page elements. 👉🏻 Once enabled, it lets you hover over elements to view info similar to DevTools (padding, margin, etc.) with the added ability to measure specific distances on the page. 🛠️ Fontsource 👉🏻 A website to search for fonts by sentence. 👉🏻There are many fonts available, including variable fonts. 😂 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