Don't miss the next edition. Subscribe to the newsletter.
Published at Sep 30, 2024, 3:00 PMDelay Loading Appearance of Spinner Ready for your weekly Vue & Nuxt dose? Weekly Vue News #165 Delay Loading Appearance of Spinner View online Hi 👋 I've created a Telegram channel where I'll post updates whenever a new newsletter issue is out! Feel free to join and stay in the loop. Have a lovely week ☀️ Vue 📕 Better Vue Components with TypeScript [12 examples] 👉🏻 Fotis demonstrates that using Vue with TypeScript brings many benefits. 👉🏻 With features like typed props, emits, slots, state management, and generics, it noticeably improves the readability of a codebase and ensures everything works as expected. 📕 Implementing Prefetching in Vue apps 👉🏻 "In short words, we will be sending a request under the hood for the next resources so that when user clicks the load more button, they will instantly see the result." 🎧 Vue 3.5 Analyzed 👉🏻 Vue 3.5 came out recently, so why not using the opportunity to dive into the features of the new minor version? 👉🏻 Michael and Alex will do so and discuss performance improvements, SSR features and new composables in detail. 📹 Why I Love Vue's Newest Feature 👉🏻 With the release of Vue 3.5, we got the ability to defer the mounting of a Teleport component. 👉🏻 This unlocks some cool use cases and Matt talks about how it works and what we can do with it. 🛠️ vue-input-otp 👉🏻 One-time passcode Input. 👉🏻 Accessible & unstyled. 💡 Vue Tip: Delay Loading Appearance of Spinner Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay. To achieve this improved UX, you can use AsyncComponent. Vue provides the defineAsyncComponent defineAsyncComponent function to lazy load components: 1 < template > 2 < AsyncComp /> 3 </ template > 4 5 < script setup > 6 import { defineAsyncComponent } from ' vue ' 7 8 const AsyncComp = defineAsyncComponent (() => { 9 return new Promise (( resolve , reject ) => { 10 // ...load component from server 11 resolve ( /* loaded component */ ) 12 }) 13 }) 14 </ script > defineAsyncComponent defineAsyncComponent accepts a loader function that returns a Promise. The resolve resolve callback should be called if the component has been loaded, and the reject reject callback to indicate that loading the component has failed. Now let's implement the delayed loading spinner by using the advanced options of the defineAsyncComponent defineAsyncComponent function: 1 < template > 2 < AsyncComp /> 3 </ template > 4 5 < script > 6 import { defineAsyncComponent } from ' vue ' 7 import Loading from ' ./components/Loading ' 8 9 export default { 10 components : { 11 AsyncComp : defineAsyncComponent ({ 12 // the loader function 13 loader : () => 14 new Promise (( resolve ) => { 15 setTimeout (() => { 16 resolve ( import ( ' ./components/HelloWorld.vue ' )) 17 }, 2000 ) 18 }), 19 20 // A component to use while the async component is loading 21 loadingComponent : Loading , 22 // Delay before showing the loading component. Default: 200ms. 23 delay : 500 , 24 }), 25 }, 26 data () {}, 27 } 28 </ script > This demo simulates a network request to fetch HelloWorld.vue HelloWorld.vue from a server which takes 2 seconds: 1 new Promise (( resolve ) => { 2 setTimeout (() => { 3 resolve ( import ( ' ./components/HelloWorld.vue ' )) 4 }, 2000 ) 5 }) The loading component Loading.vue Loading.vue is shown after a delay of 500ms, defined with delay: 500 delay: 500 . You can try it yourself in this StackBlitz playground: ✨ Open Demo Nuxt 📕 Understanding Environment Variables in Nuxt 3* 👉🏻 This blog post delves into the usage and understanding of environment variables in Nuxt 3+. 👉🏻 It covers the importance of .env files, explains how to create and use them, and highlights best practices. 📕 Getting Started with NuxtUI* 👉🏻 Discover how to leverage NuxtUI with Nuxt 3 and Composition API. 👉🏻 Learn installation, customization, and theming in this guide for modern web development. 📹 Passing Cookies with event.$fetch and useRequestFetch in Nuxt 👉🏻 Ever wondered why cookies are not passed correctly to subrequests - e.g. during SSR or when using Nitro/H3? 👉🏻 Alexander takes a look at how to pass all the important information, including event context and headers to further calls, eliminating different behavior on server and client. 📹 resolveComponent in Nuxt 👉🏻 Wondering why `resolveComponent` might work a bit differently in Nuxt compared to plain Vue? 👉🏻 Daniel Roe gives a quick overview of why. 🛠️ NPM Chart 👉🏻 Turn npm downloads into visually striking charts that you can save as PNG or SVG and share with your community. 👉🏻 Built with Nuxt & Nuxt Hub, source code is open source and available on GitHub. 📅 Events vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) Nuxt Nation (12 - 13 November 2024, Virtual Conference) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻💻 In Other News 📕 Build frontend applications at scale 👉🏻 A free frontend architecture course that will teach you everything you need to know to build robust and scalable frontend applications. 📕 The TSConfig Cheat Sheet 👉🏻 A guide to configuring TypeScript's tsconfig.json file. 👉🏻 It includes a cheatsheet of recommended base, strictness, and project-specific options. 📹 Caching demystified: Inspect, clear, and disable caches 👉🏻 Dives into the different types of browser cache and how to inspect and manage them in Chrome DevTools. 🛠️ Tailwind Grid Builder 👉🏻 A simple tool to generate the HTML with Tailwind classes for a custom grid. 🛠️ Button Stealer 👉🏻 A chrome extension that "steals" a button from every website you open. 😂 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 X thread 📨 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 {{ TrackView }}