Nuxt 3 - Nuxt Nitro Server Engine

Do you want to learn how to create full-stack applications with Vue 3 and Nuxt 3? In this tutorial, you will learn all about Nuxt 3 and the new Nitro Server Engine. With this foundation, you will be able to create API routes on the server and consume them within the pages of your Nuxt 3 application.

🔗 Resources & Links mentioned in this video:

👋🏻 Connect with me:

[barbieroalex]

really nice, thanks for your work!, waiting for your next video 🚀

[benkhemismarwen]

the best video i watched yet, thank you

[ashlynknox]

Hey, with the data folder. Is there a reason why you put it at the root level instead of inside public/ ? Great video, really enjoyed your examples!

[ManasMadrecha]

How will it work in production, if may deploy the `.output/server` folder separately? What changes do we need to make in Pages folder's $fetch query to incorporate the production server's url?

[xXDarkRevolutionHDXx]

I'm curious, which vs code theme you are using?

[alexandrosvasileiou]

Nice one, but I guess we need to wait for Nuxt Content (or any other new equivalent) to ensure that those posts will be SEO-friendly.

[cheryl_jones]

Really appreciate your time in making this. I was able to show all the posts with just return posts, but as soon as I tried to use pathname it stopped working completely. I wonder if something has changed since you created this video. I notice that it is now using h3 helper (rather than http? ) I wonder if that makes a difference.

[jonasj]

Does anyone know why its saying: invalid url (), when I use await $fetch()? There is an 500 - Internal Server Error

[Skylla]

more of it <3
There is soo less content :D

[SagitGtz]

I'm using nuxt3 and Nestjs as a backend, and I want to make an interception for refresh token how can I solve this? firstibale I used an onResponseError hook, from nitro and, yes everything got right when a got the error 401, send another request to refresh token to endpoint then clear and save my tokens and internal in to my second "then" make again the request, but I think is a bad approach I don't if I'm making well or its better use a middleware o other approach

[djmtype]

Dan what version of Nuxt 3 Beta did you use? I can return posts data from /api/posts, but returning a single post id returns a 500 error.

[savasturkoglu]

which autocomplete program do you use ?

[imeggcelent]

how can I do this but calling a third party api. so I want to create my own /api/hello and inside hello to have a call to third party api, is that possible? if yes how can I achieve this?

[nonefvnfvnjnjnjevjenjvonej]

Can u turn off copilot while recording. It is very distracting. Thank you.

[otonielguajardo]

70% of youtube users are on mobile, please zoom the text so we can watch the video from our phones

[denbokarev]

Do you have this example on github, bcos my code dosent working. I got error "{"url":"/api/posts", "statusCode":404, "statusMessage":"Not Found", "message":"Not Found", "description":""}" if im trying to use if (!id) condition in posts.ts, without it working fine ( return {posts})

[RobertWildling]

Nice Intro! But I guess I am late to the game. At around 23:30 my version starts throwing an error:

[h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.
Handler: (req, res) => {
return (/* @__PURE__ */ new Date()).toLocaleTimeString();
}
[h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.
Handler: (req, res) => {
const id = pathname.split("/")[1];
if (!id) {
return { posts: posts$2 };
} else {
return posts$2.find((post) => post.id === parseInt(id));
}
}

Any idea what has to be done nowadays to fix this error?
Thank you!