Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API (+ raffle 🎁)
Вставка
- Опубліковано 9 лип 2024
- 🤸♂️ Especially when working a lot with composables and Nuxt, some of you might've seen the "Nuxt instance unavailable" error somewhere along the road. And while there is commonly a link to the docs, there is more behind it! Learn in this video what the error message means, how to fix it with four different ways and which one is the best to use!
Also don't forget to comment with what you built in Vue/Nuxt + why you want to go to VueConf US to have a chance to win one free conference ticket for vueconf.us/
---
Key points:
😰 Why does the nuxt instance unavailable error message appear
✨ Four solutions to solve the issue
👀 More info about the experimental async context option
Links:
🔗 Nuxt Docs for the error nuxt.com/docs/guide/concepts/...
🔗 Anthony's blog post about async code with the composition API antfu.me/posts/async-with-com...
🔗 SFC playground (open JS panel) for compile time magic play.vuejs.org/#eNp9kcFqwzAQR...
🔗 runWithContext nuxt.com/docs/api/composables...
🔗 asyncContext PR github.com/nuxt/nuxt/pull/23526
🔗 unctx package github.com/unjs/unctx/
🔗 Async Context Proposal github.com/tc39/proposal-asyn...
📺 Inline Composables • Organize your Composit...
📺 Testing with Nuxt • Nuxt Test Utils - A Pr...
📺 DejaVue #004 about Teleports • DejaVue #E004 - Telepo...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:23 Raffle
01:09 Agenda and setup
01:40 Demo app
02:30 Breaking the app
03:40 Why does the error happen?
04:25 How Vue handles async composables / setup
07:40 Fixing the error in various ways
08:26 Solution 1: Async operation last (as Anthony said)
08:47 Solution 2: Return the response from useAsyncData
10:20 Solution 3: Use runWithContext / callWithNuxt
11:57 Solution 4: asyncContext (experimental)
16:41 Summary - Наука та технологія
Like if you ever saw this error message (I hope you didn't became desperate fixing it)
I did, but you know what they say- what doesn’t kill you...
I did encountered it before. But thanks to the Nuxt team, they provide link to where I found the experimental.asyncContext
I figure this out the hard way, read the Nuxt documentation before I got the hand of it. Thanks for sharing the solutions to it Alex, I would encourage people to open the links in Nuxt errors and read documentation frequently as things change quickly.
Like many people, yup 🙈
Glad it helped!
Yes, reading the docs is highly encouraged 🙌🏻
Oh maan, I have struggled with this one before. Now I actually understand where the error comes from, so I can avoid it instead of relying on the experimental flag that I did not understand either (I had no idea what did, it was just a "fix it!"-flag). Fantastic video, fantastic channel! Thanks Alexander! :)
No problem at all Joachim! Glad it was helpful 🙏🏻
Damn Alex, this problem made me lost hair! What a good input, i'm very happy to follow your channel.
Glad I could help 🙌
Niiiiice! And here I am thinking a few weeks ago the way I structure my data fetching composables (which I learned from your video ❤) is not right. Gotta admit, I will still have to watch this a few times before I can truly understand it, but now I know where to go to when I face this task the next time :)
Perfect! Glad it was helpful!
I was waiting for you to finish to say I am cheating this problem with the experimental.asyncContext flag, but you mentioned it.
But now I understands what's going on behinf the scene and how to manually handle this or avoid it in the future.
Haha, you called it indeed! 😁
While "fixing it with a magic flag" is fine for a quick fix, it is even better to know why it works and why it didn't before 🙌
Thank you very much for the useful knowledge you give us, but it would be great if there were English subtitles. Because I or some other people may not hear English well. It's great that it will help us understand your content more easily. Thank you!💚
Hey! Sadly don’t have the capacity to add subtitles at the moment. If someone wants to submit some or throw AI at it, id be up for it 🙏🏻
@@TheAlexLichter It's okay, I'll try to listen 😅. Thanks for replying
This video closes a lot of issues in a Nuxt's Github page, I guess. Thank you for explanation!
Feel free to link to the video if you see an issue covering that 👍🏻
Great Video. Thank you very much
You are welcome! 🤗
As always, great and essential video! Thanks, man ❤
Btw, I get the same error message when I try to use a composable inside a global Middleware (with .global keyword). Not sure if it's similar or could be resolved with the same solutions?
It could be indeed if the composables have nested asynchronous code. top-level should work by default with unctx.
@@TheAlexLichter Got it. Thanks again, Alex! Also, I'd love some code reviews and more code patterns e.g. the episode of inline composables, it was really helpful 👍
Hi Alex. Unfortunate I could not join your stream yesterday. But I have a question with the first approach you showed here. useAsyncData used the await keyword meaning, it will resolve a promise. But when you removed the await keyword, it didn't return a Promise. How does that work?
No worries at all! VOD is up @ ua-cam.com/video/mPYIgr95mQw/v-deo.html
The magic for that is in these lines:
github.com/nuxt/nuxt/blob/b330a296b8c91d1dd6dbc3dc74a84819120830a8/packages/nuxt/src/app/composables/asyncData.ts#L395-L399
Great to see some solutions.
I think this error is also thrown when useFetch is used in something like a click handler. Obviously there one can just use $fetch, but it's not intuïtieve for beginners.
That could be, indeed!
But as you said, there, using $fetch or the execute function is better as shown in ua-cam.com/video/njsGVmcWviY/v-deo.html
Hi Alex, i have a vídeo idea maybe one on the nuxt/mdc module like most headless CMS are giving back markdown content. I think it Will be great to show how we should render it safely.
Great idea Sven! Noted down 👍🏻
Красавчик! Спасибо
Nice video!
Thanks 🙌
🔥
hmm never saw this error before. good to know
That's good! But in case you will you know what to expect 🙌🏻
😊😊
💪💪💪
I think this is is what gas been driving me crazy
Hope it doesn't drive you crazy anymore 😋
For some reason, I was unable to see my previous comment. Maybe its just youtube. Hey Alex, can you please tell us how to catch this error? so that it can be reported to a logging service. Thanks 🙌🏾 Great video as always
I’d try using the nitro error hook in a plugin. That should work!
@@TheAlexLichter do you mean, I should be listening for nitro:error in a server side plugin instead of app:error ?
@bishal_mishra99 yes, as it is a server side error
@@TheAlexLichter Tried the suggestion but it's preventing the route navigation to that page (causing error), throwing me back to the home page. Maybe 🤔 due to this, the nitro plugin is not triggered at all. ☹️ How to catch it ???