Weekly Vue News #117 - How to Fix 'Nuxt Instance Unavailable' Error

Weekly Vue News #117

How to Fix "Nuxt Instance Unavailable" Error

Hi 👋

In my spare free time I am heavily working on a huge update for CodeSnap.dev and I am super excited to share it with you soon. So no long intro today, let's dive into the news!

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 Vue.js Patterns: Using Vue.js 3 Composition API for Reactive Parent to Child Communication

👉🏻 In this article, you will explore using the Vue 3 Composition API to create a reactive parent-to-child communication.

lirantal.medium.com

📕 Revealing Memory Leaks in Frontend Applications (Nuxt.js/Vue)

👉🏻 In this comprehensive article, you'll embark on an in-depth exploration of memory leaks.

medium.com

Nuxt

📕 Nuxt Layers Unwrapped

👉🏻 "Layers are higher-level construct that helps us isolate re-usable parts of Nuxt, such as Nuxt pages, layouts, components, composable, etc"

krutiepatel.com

📕 How to create a Sitemap in Nuxt Content

👉🏻 Thanks to the power of Nuxt server routes, creating a sitemap of our pages is easy.

dev.to

📹 Nuxt 3.8 - Client-side caching with getCachedData

👉🏻 Learn what getCachedData does, and when it is proper & implement your own caching.

www.youtube.com

📹 Making Magic: Building a TypeScript-First Framework

👉🏻 Daniel Roe explains how the Nuxt team built a TypeScript-first framework that integrates deeply with the user's IDE.

portal.gitnation.org

📅 Events

VueConf Toronto

👉🏻 9 - 10 November 2023, Toronto, Canada

👉🏻 Checkout the full program at http://vuetoronto.com/schedule.

www.vuetoronto.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

🔥 Nuxt Tip: How to Fix 'Nuxt Instance Unavailable' Error

If you are using Nuxt 3, you probably already encountered the "Nuxt Instance Unavailable" error. What is it, and how to fix it?

What is the 'Nuxt Instance Unavailable' error?

You probably received this error in middleware or plugin, which includes async / await code in a try/catch block. For example:

middleware/auth.global.ts

            1 export default defineNuxtRouteMiddleware(async (to, from) => {
              2   let user
              3 
              4   try {
              5     user = await fetchUser()
              6   } catch (error) {
              7     user = null
              8   }
              9 
              10   if (!user) {
              11     return navigateTo('/login')) // ☠️ the error happens in this line
              12   }
              13 })

The error happens because the compiler lost the Nuxt context in the try/catch block. Nuxt 3 internally uses unjs/unctx to enable composables like navigateTo() to work without directly passing nuxtApp to them.

Unfortunately, the unjs/unctx transformation to automatically restore context is buggy with try/catch statements containing await. It is a known issue in Nuxt 3.7 and will hopefully be fixed in future updates.

How to fix the error?

The solution is to use the runWithContext method:

middleware/auth.ts

            1 export default defineNuxtRouteMiddleware(async (to, from) => {
              2   let user
              3 
              4   try {
              5     user = await fetchUser()
              6   } catch (error) {
              7     user = null
              8   }
              9 
              10   if (!user) {
              11     return nuxtApp.runWithContext(() => navigateTo('/login'))
              12   }
              13 })

Try to create a reproduction and report it to the Nuxt team if you have to use this method in your project. This helps the framework team to solve the issue at the framework level.

Further Reading

Check the official docs for a deeper explanation of context.

😂 Fun

🧑🏻‍💻 In Other News

📕 How Google writes clean, maintainable code

👉🏻 The article goes through some examples of clean TypeScript code using Google's style guide.

engineercodex.substack.com

📕 Why Is the Frontend Stack So Complicated?

👉🏻 The frontend stack is complicated because it has no universal import system, layers of transpilation, has too many tools available, and often has issues with "configuration hell."

matt-rickard.com

📕 Angular, Qwik Creator on How JS Frameworks Handle Reactivity

👉🏻 The creator of Angular and Qwik emphasizes the importance of startup performance in JavaScript frameworks and reactivity, which enables dynamic and responsive applications.

thenewstack.io

📕 State Management in Micro Frontend Architectures

👉🏻 This article breaks down monolithic frontends into smaller, manageable pieces and uses diagrams to show how state management works in such architectures.

kaushaldhakal40.medium.com