Nuxt vs. Nitro - What does what in your App

🤝🏻 Nuxt and Nitro go hand in hand - but sometimes so well that the borders between both blur for developers. Wouldn't it be helpful to understand why Pinia composables can't be used in the server folder and when exactly Nitro comes into play? Fear no more - all of that and more will be covered in this video!
Key points:
👀 When Nitro is used in your Nuxt application
🙅‍♀️ Which limitations the server folder offers
⌛ Examples how Nitro and Nuxt work together
Links:
🔗 Nuxt's server docs nuxt.com/docs/getting-started...
🔗 Nitro Docs nitro.unjs.io/
🔗 h3 github.com/unjs/h3/
🔗 Sentry + Nuxt 3 blogpost www.lichter.io/articles/nuxt3...
🔗 runtimeConfig explained • Is Nuxt 3's runtimeCon...
🔗 Common mistakes w/ runtimeConfig • Nuxt's runtimeConfig -...
🔗 useRequestEvent in Nuxt nuxt.com/docs/api/composables...
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
01:00 What the Nuxt docs give us
02:12 How to use Vue composables in the server folder?
02:49 Nuxt & Nitro Venn Diagram - What is what?
05:25 runtimeConfig as an example for both sides
07:10 Server Components
08:42 Summary

[@TheAlexLichter]

This time, I decided to record a bit "slower"/"calmer" instead of the usual style.
What style do **you** prefer? 🤔

[@MartinMasevski]

Slower! I can always speed it up 😂

[@Reagan_Dev]

Usual style

[@kissu_io]

⁠the opposite is also true (you can slow it down). 😂

[@MuhammadM1998]

The usual

[@виртуоз_ру]

Тема очень интересная. Жду продолжения.

[@Calebwaldner]

Dude, keep making these videos. Already my favorite Nuxt videos out there.

[@TheAlexLichter]

Thank you so much 🙏🏻
I’m on it! One video every Friday 👌🏻

[@olatunjiolakunle6908]

Alex you're killing it with all these contents you are delivering. Well done

[@TheAlexLichter]

Giving my best! Thanks a lot for the kind words Olatunji 🙏🏻💚

[@kissu_io]

Quite useful video since I know that some people struggled understanding the difference between Nuxt and Vite too. 😊

[@TheAlexLichter]

Thank you Konstantin 🙏🏻
Maybe the differen between Nuxt and Vite could be a good topic for the new year 🤔
Will put it up! 👏🏻

[@ChrisVisserDev]

This is great. Very clear explanation to how Nuxt and Nitro work together. Am recommending this to people. Great stuff!🎉

[@TheAlexLichter]

Thank you Chris 🙏🏻
If you encounter anything else that needs explanation, let me know! 😊

[@user-uh1xv1ow1z]

broo, it's amazing what you 're doing, keep going.

[@freekeys]

I have been using Nuxt since years but the learning i get from this channel is just too advance 🙏🙏 we are blessed that we found this channel

[@TheAlexLichter]

Glad to hear that 😊
How did you find my channel?

[@freekeys]

@@TheAlexLichter I always searched for Vue/Nuxt and only knew Erick on UA-cam, but then I found you. I'm lucky to learn from you and think outside the box.

[@Fido1hn]

Thanks so mych for this videos Alex. It really helps a lot.

[@TheAlexLichter]

Perfect! Very glad to hear 🙏🏻

[@michaelpeters9551]

I really value your channel mate, thank you for doing what you do 🍺💪😎

[@TheAlexLichter]

Thank so much Michael 🙏🏻
I’ll keep it up 🙌🏻

[@MartinMasevski]

Love ur content ❤

[@TheAlexLichter]

Thank you so much Martin 🙏🏻

[@freewatcher2]

You call Nitro a server engine that in my mind translates to a server process, listening on specific network requests and serves them according to setup.
Can you clarify if Nitro is a binary server process or it's actually a Node framework, that it does depend on a running Node environment? 😊

[@TheAlexLichter]

Hey Tibor! Nitro is a framework which does *not* rely on a node environment though. It is meant to run on the edge (e.g. Cloudflare workers), in classic node environments, via deno, serverless functions, static deployment. etc. etc.
So, it is a TypeScript server framework which does not rely on a node-only environment.
github.com/unjs/nitro

[@chstappert]

Will you share your most favourite "Nitro-Hack"?

[@TheAlexLichter]

Not in this video, but maybe I should 👀🙊

[@chstappert]

Yes please@@TheAlexLichter

[@Reagan_Dev]

@@TheAlexLichter That would be good as well as the useStorage() 😁

[@aeadedoyin]

I take it you couldn’t get SVG for Nitro and Nuxt logos?

[@TheAlexLichter]

Of course - I used SVGs in my thumbnail :D
Nuxt: nuxt.com/design-kit
Nitro: github.com/unjs/nitro/blob/main/docs/public/nitro-light.svg

[@mikesmith8410]

Can you do nitro vs. fastify?

[@TheAlexLichter]

I'll have a look 👀

[@tolgabeyazoglu536]

ı want to this video repeat watch

[@TheAlexLichter]

Coming tomorrow 😁

[@user-sj7tf2yv3m]

Где наши густапсовые

[@TheAlexLichter]

🙌🏻🙌🏻🙌🏻🙌🏻

[@amardeepgill3213]

I spot a Vuenicorn 👀

[@TheAlexLichter]

Absolutely correct 🦄💚
From this years VueConf Toronto where I talked about SEO ☺️
ua-cam.com/video/pgRnJHHZfc8/v-deo.html