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>

You can try it yourself in this StackBlitz playground:

📅 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)