Don't miss the next edition. Subscribe to the newsletter.
Published at Feb 3, 2025, 3:00 PMManaging Page Load States in Nuxt With useLoadingIndicator Ready for your weekly Vue & Nuxt dose? Weekly Vue News #183 Managing Page Load States in Nuxt With useLoadingIndicator View online Hi 👋 No personal updates this week — you can fully focus on the content I've prepared for you. Enjoy this issue and have a lovely week ☀️ Vue 📕 SolidJS Creator on Confronting Web Framework Complexity 👉🏻 The creator of SolidJS says that Angular and Vue are the frameworks to watch in 2025, while reflecting on JS framework progress generally. 📕 Top 5 Challenges Faced by Vue Developers: The State of Vue.js Survey 2025 👉🏻 Explore five key challenges in Vue.js based on the State of Vue.js Developer Survey 2025. 👉🏻 This article addresses common pain points with practical solutions to help you overcome them in your projects. 📕 Solving Prop Drilling in Vue: Modern State Management Strategies 👉🏻 Eliminate prop drilling in Vue apps using Composition API, Provide/Inject, and Pinia. 👉🏻 Learn when to use each approach with practical examples. 📕 Migrating Web Components from Vue 2 to Vue 3 at Open Library 👉🏻 Migrating Vue 2 Web Components to Vue 3 isn't as straightforward as the docs suggest. 👉🏻 There are three main challenges: setting up Vite builds, managing multiple components, and handling plugins. 📕 Turning CKEditor Output into Dynamic Vue Templates 👉🏻 This guide shows how you can reprocess the HTML output of CKEditor (or any other WYSIWYG editor for that matter) into powerful customizable Vue templates. Nuxt 📕 Exciting Nuxt Modules to improve your Workflow in 2025* 👉🏻 From automated image optimization to edge deployment, learn how these game-changing tools can streamline your workflow. 📕 Advanced File Structure and Colocation in Nuxt 👉🏻 Colocation is the practice of grouping related pieces of code together within a project's directory structure. 👉🏻 Learn how to set it up using the Nuxt framework. 📕 Nuxt in Production - Delivering Websites Statically vs. Dynamically 👉🏻 Explore the various rendering methods – static generation and server rendering – and tips on how you can get the best out of both worlds. 📕 Migrate Nuxt UI Pro Documentation Starter 👉🏻 How to upgrade your Nuxt UI Pro documentation to Content and UI v3. 📹 My Favorite Way To Build Forms With Validation In Nuxt 👉🏻 In this video, learn how to create a basic form with validation using Nuxt UI and Zod. 💡 Nuxt Tip: Managing Page Load States With useLoadingIndicator When building Nuxt applications, handling loading states efficiently can improve user experience by providing visual feedback while pages load. The useLoadingIndicator useLoadingIndicator composable gives you access to the loading state of the app page, making it easy to display custom indicators or trigger actions during page transitions. To display a progress bar between page transitions in Nuxt, you need to add the NuxtLoadingIndicator NuxtLoadingIndicator component in your app.vue app.vue or layouts/ layouts/ : 1 template > 2 NuxtLoadingIndicator /> 3 NuxtLayout > 4 NuxtPage /> 5 NuxtLayout > 6 template > You can customize the appearance using props like color, height, and duration. Read more at Nuxt Loading Indicator . The useLoadingIndicator useLoadingIndicator composable returns the loading state of the page and is used by NuxtLoadingIndicator NuxtLoadingIndicator and controllable. It hooks into page:loading:start page:loading:start and page:loading:end page:loading:end to change its state. Let's see how to use useLoadingIndicator useLoadingIndicator in a Nuxt page: 1 script setup lang = " ts " > 2 const { progress , isLoading , start , set , finish } = useLoadingIndicator ({ 3 duration : 1000 , 4 throttle : 300 , 5 }); 6 script > 7 8 template > 9 div > 10 NuxtLoadingIndicator color = " red " height = " 10 " /> 11 div class = " flex flex-col gap-4 " > 12 button @ click = " start " > Start button > 13 button @ click = " finish " > Finish button > 14 div > 15 div > 16 template > You can try it yourself in this StackBlitz playground: ✨ Open Demo 📅 Events Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) Vueconf.US (13 - 15 May 2025, Tampa, Florida) MadVue (29 May 2025, Madrid, Spain) 💬 Quote of the week 🧑🏻💻 In Other News 📕 Sharing a Variable Across HTML, CSS, and JavaScript 👉🏻 Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS. 📕 Software Folklore 👉🏻 Anecdotal accounts of bizarre and inexplicable software bugs. 🛠️ cs16.css 👉🏻 A CSS library based on Counter Strike 1.6 UI. 📹 TypeScript shipped a flag to disable enums 😂 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 {{ TrackView }}