Don't miss the next edition. Subscribe to the newsletter.
Published at Jul 29, 2024, 3:00 PMAvoid Side Effects in Computed Properties Ready for your weekly Vue & Nuxt dose? Weekly Vue News #156 Avoid Side Effects in Computed Properties View online Hi 👋 Thanks to the successful migration to listmonk , I removed my custom code for managing subscribers and the mailing list last week. I'm happy to have more time for the content now. Have a lovely week ☀️ Vue 📕 Start with the Interface (and don't gold plate!) 👉🏻 Michael Thiessen proposes to first figure out how a new Vue composable is going to be used before you start the implementation. 📕 Deploy Vuejs Application on Google Kubernetes Engine (GKE)- Blue Green Deployment 👉🏻 Learn how to use GitHub Actions to deploy our Vue project on Google Kubernetes Engine (GKE). 📹 You Should Try Vue js 👉🏻 Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. 📹 Getting Started with Pinia 👉🏻 This "Quick Start with Pinia" lesson on Pinia breaks down this powerful Vue state management library, showing you how to efficiently manage data across components. 🛠️ Vexip UI 👉🏻 This library is written using Vue 3 with Composition API, and the components are designed and written in a traditional Vue way possible, with full TypeScript support. 🛠️ Maska 3.0 👉🏻 A zero dependency input mask library. 👉🏻 Lightweight and framework independent but offers Vue 2/3, Alpine.js and Svelte integrations. 🔥 Vue Tip: Avoid Side Effects in Computed Properties It is considered bad practice to introduce side effects inside computed properties and functions because it makes the code unpredictable and hard to understand. What is a side effect? In the context of computed properties, a side effect is a modification of the state's global state or the internal component state. Let's take a look at an example with side effects: 1 < script setup lang = " ts " > 2 import { computed , ref } from ' vue ' 3 4 const firstName = ref ( ' Michael ' ) 5 const lastName = ref ( ' Hoffmann ' ) 6 const array = ref ([]) 7 8 const fullName = computed (() => { 9 firstName . value = ' Mike ' // side effect 10 return `${ firstName . value } ${ lastName . value }` 11 }) 12 13 const reversedArray = computed (() => array . value . reverse ()) // side effect, original array is mutated 14 </ script > Now let's change the code and remove the side effects: 1 < script setup lang = " ts " > 2 import { computed , ref } from ' vue ' 3 4 const firstName = ref ( ' Michael ' ) 5 const lastName = ref ( ' Hoffmann ' ) 6 const array = ref ([]) 7 8 const fullName = computed (() => `${ firstName . value } ${ lastName . value }` ) 9 const reversedArray = computed (() => array . value . slice ( 0 ). reverse ()) // .slice creates a copy of the array 10 </ script > Now the code is predictable and easy to understand. The computed properties fullName fullName and reversedArray reversedArray only depend on the values of firstName firstName , lastName lastName , and array array . They don't modify the global state or the internal component state. Read this fantastic article from Michael Thiessen for more details about side effects. 💚 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 & Codemod Announcement 👉🏻 Codemod is partnering with the Nuxt team to build and maintain open-source codemods for the Nuxt 3 to 4 migration. 📕 Real-World Nuxt — Shadcn-vue and Nuxt Layers 👉🏻 In this article, the author shows all the challenges he encountered while trying to initialize a Nuxt Layer project and then installing shadcn-vue. 📕 Minimalist Nuxt Authentication 👉🏻 This tutorial walks through building with Nuxt Auth utils, a minimalist authentication module for Nuxt exposing Vue composables and server utils. 📹 Route Rules in Nuxt - SSR, SSG, ISR and more 👉🏻 Nuxt supports "Hybrid Rendering" - a technique to mix various rendering modes in a single application. 👉🏻 Learn how to set things up, how route rules work and which are available. 📅 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 📕 Total TypeScript 👉🏻 A free book for devs of all levels to learn advanced type manipulation and real-world application development patterns in TypeScript. 📕 Running Untrusted JavaScript Code 👉🏻 Solutions are time-boxing execution with Web Workers, disallowing global objects, and using isolated virtual machines. 👉🏻 Developers can also opt for server-side options like Docker or WebAssembly. 🛠️ One Million Particles 👉🏻 One million particles rendered with the GPGPU technique using WebGL, with source code and explanations provided. 🛠️ Termino.js 👉🏻 A lightweight JavaScript library for creating customizable web-based terminal interfaces. 👉🏻 It supports inputs and custom functions and has an HTML integration. 😂 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 {{ TrackView }}