Weekly Vue News #180 - Parallel Fetch Requests in Nuxt

Weekly Vue News #180 Parallel Fetch Requests in Nuxt View online Hi 👋 There's still time to win 1 VueSchool Lifetime License and 1 Mastering Nuxt 3 License — check out the details below! 🎉 I'm also making steady progress on my Nuxt SaaS Starter Kit. It's a big project and based on Nuxt UI Pro v3. Since v3 is currently in alpha and still missing some components, the release is on hold until everything's ready. Stay tuned for updates! Enjoy this issue and have a lovely week ☀️ Vue 📕 Learning Vue for React Developers 👉🏻 If you already know React, learning Vue should be easy. 👉🏻 The author proves this by comparing some code examples. 📕 Vue.js Modular State Management: Best Practices for Scalable and Maintainable Store Configuration 👉🏻 Modular state management is essential for keeping scalable state management in Vue.js. 👉🏻 It also makes it easier to maintain the apps as they become more complex. 📹 defineXYZ in Vue - What are Compiler Macros?! 👉🏻 Even when not using auto imports, there are some function calls in your Vue SFCs that you don't "need" to import. 🛠️ Formwerk 👉🏻 A suite of Vue.js composables designed to enhance your forms with built-in behaviors, interactions, internationalization, and accessibility, seamlessly integrating with your markup and styles. 🛠️ pinia-plugin-state-persistence 👉🏻 A persisted state plugin for Pinia with async storage support. 🛠️ Regle 👉🏻 A TypeScript-first form validation library made for Vue 3. 🔥 Win Two VueSchool Licenses Would you like to win 1 VueSchool Lifetime License & 1 Mastering Nuxt 3 License? → Enter the Raffle Now! 🚀 💡 Nuxt Tip: Parallel Fetch Requests When you're working with Nuxt, you might find yourself in a situation where you need to fetch multiple pieces of data from different endpoints. If you fetch the data sequentially, it can slow down the loading time of your application. Fetching the data in parallel can help you load the data faster and improve the performance of your application. Let's say you have two API endpoints that you need to fetch data from and you need to await both requests before rendering the page. Here's how you might do it: 1<script setup lang="ts"> 2 const { data: userData } = await useFetch('/api/user'); 3 const { data: bookingData } = await useFetch('/api/booking'); 4</script> In this example, Nuxt will fetch the user data first and then the booking data. If the user data takes a long time to load, it will delay the booking data from loading as well. To fetch data in parallel, you can use Promise.all()Promise.all() along with the useAsyncDatauseAsyncData composable provided by Nuxt: 1<script setup lang="ts"> 2const { data } = await useAsyncData(() => { 3 return Promise.all([ 4 $fetch('/api/user'), 5 $fetch('/api/booking'), 6 ]) 7}); 8</script> By fetching the data in parallel, you can load the user and posts data simultaneously, which can significantly reduce the time it takes to load the page. Nuxt 📕 Building A Persistent Multilingual Toast Component In Nuxt 👉🏻 In this tutorial, you'll build a toast component from the ground up, progressively adding features you'll actually use in production. 📕 Building a Custom Authentication System with JWT in Nuxt 3* 👉🏻 Learn how to implement a robust JWT authentication system in Nuxt 3. 👉🏻 This comprehensive guide covers project setup, login/signup functionality, protected routes, and state management with Pinia. 📕 How to setup Better-Auth with Nuxt 3 and Drizzle 👉🏻 This guide is specifically for when you have a Nuxt 3 + Drizzle Setup and now want to use Better-Auth with it. 📅 Events Vue.js Nation Conference (29 - 30 January 2025, free online conference) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) Vueconf.US (13 - 15 May 2025, Tampa, Florida) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Node.js Now Supports TypeScript By Default 👉🏻 Node.js version 23 will natively support TypeScript, allowing users to run `.ts` files without extra configuration. 📕 Back to Basics: Why We Chose Long Polling Over WebSockets 👉🏻 Inferable chose HTTP long polling over WebSockets for its real-time system due to scalability challenges with its Node.js/TypeScript backend and PostgreSQL database. 🛠️ API Parrot 👉🏻 A tool for reverse-engineering website HTTP APIs. 👉🏻 It captures requests via a built-in HTTP proxy, analyzes data relationships between endpoints, and allows customization of functions with specific input/output parameters. 🛠️ BenchJS 👉🏻 A browser-based JavaScript benchmarking tool that allows users to write, run, compare, and share benchmarks using TypeScript or JavaScript, providing real-time metrics and collaborative features. 😂 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