#title Weekly Vue News #117 - How to Fix "Nuxt Instance Unavailable" Error #preview Ready for your weekly Vue & Nuxt dose?
How to Fix "Nuxt Instance Unavailable" Error
Hi 👋
In my spare free time I am heavily working on a huge update for
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
| 👉🏻 In this article, you will explore using the Vue 3 Composition API to create a reactive parent-to-child communication. |
| 👉🏻 In this comprehensive article, you'll embark on an in-depth exploration of memory leaks. |
| 👉🏻 "Layers are higher-level construct that helps us isolate re-usable parts of Nuxt, such as Nuxt pages, layouts, components, composable, etc" |
| 👉🏻 Thanks to the power of Nuxt server routes, creating a sitemap of our pages is easy. |
| 👉🏻 Learn what getCachedData does, and when it is proper & implement your own caching. |
| 👉🏻 Daniel Roe explains how the Nuxt team built a TypeScript-first framework that integrates deeply with the user's IDE. |
| 👉🏻 9 - 10 November 2023, Toronto, Canada |
| 👉🏻 Checkout the full program at |
| 👉🏻 28 - 29 February 2024, Amsterdam |
If you are using Nuxt 3, you probably already encountered the "Nuxt Instance Unavailable" error. What is it, and how to fix it?
You probably received this error in middleware or plugin, which includes async / await code in a try/catch block. For example:
The error happens because the compiler lost the Nuxt context in the try/catch block. Nuxt 3 internally uses 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.
The solution is to use the runWithContext method:
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.
| 👉🏻 The article goes through some examples of clean TypeScript code using Google’s style guide. |
| 👉🏻 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.” |
| 👉🏻 The creator of Angular and Qwik emphasizes the importance of startup performance in JavaScript frameworks and reactivity, which enables dynamic and responsive applications. |
| 👉🏻 This article breaks down monolithic frontends into smaller, manageable pieces and uses diagrams to show how state management works in such architectures. |
| 👉🏻 Have a design system in place |
| 👉🏻 Adopt a component-based architecture |
| 👉🏻 Reduce the number of utility classes |
| 👉🏻 and more... |
| 👉🏻 An online tool to edit and generate code for layered box shadows |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
