Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #117 - How to Fix "Nuxt Instance Unavailable" Error #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, 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:

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
πŸ“… EventsVueConf 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:

export default defineNuxtRouteMiddleware(async (to, from) => { let user try { user = await fetchUser() } catch (error) { user = null } if (!user) { return navigateTo('/login')) // ☠️ the error happens in this line } })

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:

export default defineNuxtRouteMiddleware(async (to, from) => { let user try { user = await fetchUser() } catch (error) { user = null } if (!user) { return nuxtApp.runWithContext(() => navigateTo('/login')) } })

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
πŸ“• 5 best practices for preventing chaos in Tailwind CSS
πŸ‘‰πŸ» Have a design system in place
πŸ‘‰πŸ» Adopt a component-based architecture
πŸ‘‰πŸ» Reduce the number of utility classes
πŸ‘‰πŸ» and more...
evilmartians.com
πŸ› οΈ CSS Box Shadows Generator
πŸ‘‰πŸ» An online tool to edit and generate code for layered box shadows
boxshadows.xyz
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Michael ThiessenDan VegaKareem DabbeetAhmed Ragab
Join 2.5K+ other Vue developers
Β© 2023 weekly-vue.news. All rights reserved.