Weekly Vue News #142 - Dedupe Fetch Calls in Nuxt

Weekly Vue News #142 Dedupe Fetch Calls in Nuxt View online Hi 👋 This week is Vue.js Online Conference from 25 - 26 April. I'm looking forward to the talks and workshops. Will you attend? Have a nice week ☀️ Sponsored The Vue.js Job Board Find Vue.js and Nuxt job opportunities all over the world. Get to play with your favourite stack at work. New jobs every week. Vue 📕 Create a color picker with Vue.js 👉🏻 This article shows 5 steps to create a reusable color picker component. 🛠️ Vueform 👉🏻 A comprehensive form framework for Vue that makes form development a breeze. 👉🏻 It now has an AI Assistant that can generate editable forms in seconds. 📹 Evan You: What you're doing wrong with Vue.js 🙅‍♂️ 👉🏻 In a short video, Evan You shares his thoughts on how Vue developers can write better code. Nuxt 📕 Fixing Nuxt Hydration Mismatches in the Real World 👉🏻 Struggling with hydration mismatches in your Nuxt app? 👉🏻 Dive into real-world examples and solutions in this blog post. 📕 Refreshed Nuxt ESLint Integrations 👉🏻 The Nuxt team revamped their ESLint integrations to support ESLint v9 with the flat config, as well as a new module with many more capabilities. 📹 Why im NOT hyped for Nuxt 4 Nuxt 4 will not be a big-bang release like version 3 but: 👉🏻 Thoughtful breaking changes. 👉🏻 Opt-in and opt-out 👉🏻 Focus on migration 📹 How to use Nuxt Layers to encapsulate your code 👉🏻 Alexander explains how to setup layer in Nuxt and its use cases. 👉🏻 Additionally, he builds a simple layer architecture from scratch. 🎧 Nitro: The Next Generation Server Toolkit 👉🏻 Join Alexander and Michael talking about Nitro. 👉🏻 They dive deeper into the server framework which powers not only Nuxt but also other frameworks. 🛠️ NuxtOpenFetch 👉🏻 Generate zero-overhead, 100% typed OpenAPI clients for Nuxt. 🔥 Nuxt Tip: Dedupe Fetch Calls Nuxt 3.9 introduced a new dedupededupe option for the useFetchuseFetch (and useAsyncDatauseAsyncData) composable. This option allows you to avoid deduplicate fetch calls for the same key. The default value is cancelcancel which cancels existing requests when a new one is made. The deferdefer option does not make a new request at all if there is a pending request: 1<script setup lang="ts"> 2 const { data } = useFetch('/api/user', { 3 dedupe: 'defer' 4 }) 5</script> 📅 Events Vue.js Live Conference (25 - 26 April 2024, Online) Vueconf US 2024 (22 - 24 May 2024, New Orleans, US) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) 💬 Quote of the week 🧑🏻‍💻 In Other News ✍🏻 Login at Supabase via REST API in Playwright E2E Test 👉🏻 I recently had to implement an end-to-end (E2E) test for a Nuxt.js application that uses Supabase as a backend and authentication provider. 📕 Why you shouldn't use Enums! 👉🏻 Jan-Niklas takes a closer look at the issues of enums in TypeScript and how to fix them. 📕 Accessibilty Myths 👉🏻 A small project debunking common accessibility myths. 📹 faces.js 👉🏻 A JavaScript library for generating and displaying customizable cartoon faces using SVGs. 🛠️ pragmatic-drag-and-drop 👉🏻 A new framework agnostic drag n' drop library from Atlassian. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany