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 useLoadingIndicatoruseLoadingIndicator 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 NuxtLoadingIndicatorNuxtLoadingIndicator component in your app.vueapp.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 useLoadingIndicatoruseLoadingIndicator composable returns the loading state of the page and is used by NuxtLoadingIndicatorNuxtLoadingIndicator and controllable. It hooks into page:loading:startpage:loading:start and page:loading:endpage:loading:end to change its state.

Let's see how to use useLoadingIndicatoruseLoadingIndicator in a Nuxt page:

1<script setup lang="ts">  2const { 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>