Weekly Vue News #147 - When You Should Use a Composable

Weekly Vue News #147 When You Should Use a Composable View online Hi 👋 I teamed up with the amazing Michael Thiessen to promote our newsletters cross-wise. He shares great Vue tips and insights each week, and his newsletter was the main inspiration for this one. Check it out if you haven't already. The main difference between our newsletters is that Michael's is focused on Vue tips and insights, while my newsletter provides Vue & Nuxt tips and curated links to articles, videos, events, and more. I hope you enjoy both newsletters and find them valuable. Have a nice week ☀️ Sponsored Get Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Vue 📕 Automatic File-Based Routing in Vue.js with TypeScript Support 👉🏻 This article introduces you to the exciting world of Automatic File-Based Routing in Vue.js using `unplugin-vue-router`. 🛠️ Moonbow 🌚+🌈 👉🏻 A Vue component for adding shaders to images. 👉🏻 Live Demo 🛠️ Vue Fluid DnD 👉🏻 An animated Drag-and-Drop library for Vue. 👉🏻 Designed for lists of items and you can view a variety of examples here, including one where the items are draggable using handles. 🛠️ Vue3 Pixi 👉🏻 A lightweight & flexible Vue 3 library for creating applications with the 2D rendering system PixiJS. 🔥 Vue Tip: When You Should Use a Composable Vue Composables are a way to encapsulate logic in a reusable way and they are one of my favorite features of Vue 3. They are a great way to share logic between components, but I often see them used in places where they are not needed. In this short tip, I will explain when you should use a composable and when you should not. Let's take a look at the following code example: 1export const useDate = (dateString: string) => { 2 const date = new Date(dateString) 3 4 const getFormattedDate = () => { 5 return date.toLocaleDateString() 6 } 7 8 return { 9 date, 10 getFormattedDate 11 } 12} What do you think, would you call this method a composable or not? The answer is: No. Let's take a look at the official documentation: "In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic". The key part here is stateful logic which involves "managing state that changes over time". In our example, we are not using any reactive state, so this is not a composable. I would call it a utility/helper function. Let's define a simple rule of thumb: If your function does not manage any reactive state, doesn't register any lifecycle hooks or doesn't provide/inject anything, it is not a composable. Finally, let's take a look at a good example of a composable: 1import { ref, onMounted, onUnmounted } from 'vue' 2 3export const useMouse = () => { 4 const x = ref(0) 5 const y = ref(0) 6 7 const update = (event) => { 8 x.value = event.pageX 9 y.value = event.pageY 10 } 11 12 onMounted(() => window.addEventListener('mousemove', update)) 13 onUnmounted(() => window.removeEventListener('mousemove', update)) 14 15 return { x, y } 16} This composable manages the mouse position and provides two reactive values. It also registers and unregisters an event listener when the component is mounted and unmounted. Nuxt 📕 Modular site architecture with Nuxt layers 👉🏻 Dave wrote an in-depth article about theory and practice of migrating any existing Nuxt site to layers – with detailed, step-by-step instructions and gotchas. 📕 Unit Testing in Nuxt 👉🏻 In this article explore test utils in Nuxt. 👉🏻 Learn what they do, different ways to opt in to a Nuxt testing environment in your unit tests and their accompanying helper functions. 📕 Using Nuxt-auth-utils to implement a magic link login 👉🏻 A little tutorial to help you understand how to implement a magic link login with nuxt-auth-utils 👉🏻 nuxt-auth-utils is a minimal auth module for Nuxt 3. 📹 Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API 👉🏻 You might've seen the "Nuxt instance unavailable" error somewhere along the road. 👉🏻 Alexander explains what the error message means and how to fix it. 🛠️ Nuxt Pages Plus 👉🏻 A Nuxt module that enables complex routing for Nuxt Pages. 👉🏻 Navigate modals routes with real-time URL changes for seamless browsing. 👉🏻 Render multiple pages in a single route, synchronously or manually. 👉🏻 and more.... 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Render-blocking on purpose 👉🏻 ​Did you know HTML now has a blocking attribute? 📕 What Every Developer Should Know About Cache Coherence 👉🏻 Cache coherence makes sure that data stays consistent across multiple caches in distributed systems. 📕 What is a good TTFB for ecommerce? 👉🏻 "Time to first byte" is a solid metric for understanding how your web performance measures up, and is arguably one of the more important considerations for ecommerce. 📹 Code a Kirby Clone with TypeScript and Kaboom.js 👉🏻 Kirby is a classic Nintendo game where you control a squishy pink alien with a massive appetite. 👉🏻 In this freeCodeCamp course, you'll code your own version of Kirby that runs in a browser. 🛠️ Web Platform Status 👉🏻 The Google team unveiled the Web Platform Dashboard, a way to see the web platform mapped as a set of features, along with their cross browser support. 😂 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