Cache Component Instances With the KeepAlive Component

Ready for your weekly Vue & Nuxt dose?

‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

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.

🔥 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