Weekly Vue News #193 - Subscribing to State Changes in Pinia

Weekly Vue News #193 Subscribing to State Changes in Pinia View online Hi 👋 I have amazing news: CodeSnap v3 is live! 🚀 It's a full refactor, now built with my upcoming Nuxt starter kit, powered by NuxtHub and Nuxt UI Pro . With this switch, I also drastically reduced monthly costs by moving from Supabase to Cloudflare D1. To celebrate the launch, you can grab the lifetime deal at 50% off using the code UXMT1HGC. Now I can finally focus on wrapping up the starter kit and (hopefully) release it in the coming weeks or months! Enjoy this issue and have a lovely week ☀️ Vue 📕 Vue Native? Vue + Lynx 👉🏻 The development of Vue + Lynx represents an exciting opportunity for Vue developers to build truly native mobile applications while leveraging their existing web development skills. 📕 The Build Process of a Vue App: Rollup vs Rolldown 👉🏻 In this article, you'll learn about all the things that are involved in the build process of a Vue.js app (or a React.js app), including Vite, esbuild, Rollup, and the up-and-coming tool called Rolldown. 📕 Pinia News Roundup: Exciting Updates from Eduardo* 👉🏻 This article jumps into some recent developments announced by Eduardo San Martin Morote, the creator of Pinia. 👉🏻 From major version releases, to personal insights via conference talks, and new features. 📕 Give Your Web Apps a Voice with Eleven Labs AI* 👉🏻 "Nuxt Content Narrator" brings a new dimension to your content by making it accessible through high-quality voice narration with very little effort. 📹 The Secret to Reusable Components in Vue 👉🏻 Learn how to use generics in Vue to create reusable components. 📹 The Best way to learn Vue in 2025 - CRASH COURSE 👉🏻 Throughout this tutorial, you'll build an app to put concepts into practice. 💡 Pinia Tip: Subscribing to State Changes If you use Pinia , you can watch the state and its changes through the $subscribe()$subscribe() method of a store. The advantage of using $subscribe()$subscribe() over a regular watch()watch() is that subscriptions will trigger only once after patches (e.g. when using the function version from above). 1cartStore.$subscribe((mutation, state) => { 2 // import { MutationType } from 'pinia' 3 mutation.type // 'direct' | 'patch object' | 'patch function' 4 // same as cartStore.$id 5 mutation.storeId // 'cart' 6 // only available with mutation.type === 'patch object' 7 mutation.payload // patch object passed to cartStore.$patch() 8 9 // persist the whole state to the local storage whenever it changes 10 localStorage.setItem('cart', JSON.stringify(state)) 11}) Nuxt 📕 Modular Architecture in Nuxt 👉🏻 In this article, you'll dive into what makes Nuxt's modular system so powerful and how you can leverage it effectively in your projects. 📹 Why You Should Start Using useNuxtData 👉🏻 State management is hard, but Nuxt has built-in features that can help you without using any other libraries. 👉🏻 For example, useNuxtDatauseNuxtData is a composable that you can use to implement optimistic updates. 📹 Nuxt Server Components vs. Lazy Hydration 👉🏻 We all want less JavaScript and better performance. 👉🏻 Both, Nuxt Server Components and Lazy Hydration can help with that in different ways. 👉🏻 In this video, you learn how both work and what the differences are, plus when to use either. 📅 Events Vueconf.US (19 - 21 May 2025, Tampa, Florida) MadVue (29 May 2025, Madrid, Spain) PragVue (23 September 2025, Czech Republic) VueFes (25 October 2025, Otemachi, Japan) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 The state of the front-end and full-stack job market 👉🏻 React and Next.js are highly sought after, along with Javascript and Typescript. 👉🏻 AWS is the dominant cloud provider and PostgreSQL remains a popular database. 📕 Lazy Load Background Images with the IntersectionObserver API 👉🏻 Lazy loading of background images can be done using the IntersectionObserver API, which monitors when offscreen images are about to become visible in the viewport and then loads them. 🛠️ Supabase UI 👉🏻 The Supabase UI Library has pre-built, shadcn/ui-based components and blocks that simplify the connection of front-end interfaces to Supabase backends. 👉🏻 It has features like authentication, realtime updates, and file uploads. 🛠️ GitDiagram 👉🏻 A tool that generates interactive system design diagrams from GitHub repositories, allowing devs to visualize and navigate codebases quickly. 👉🏻 It can be self-hosted for private repos. 😂 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 BlueSky post 📨 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 Holzapfelkreuther Str. 19, 81375 Munich, Germany