Nuxt 3 Crash Course #12 - Server Routes

In this Nuxt 3 tutorial you'll learn about Nuxt server routes and how to create one.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 Vue 3 Tutorial:

🐱‍💻 Tailwind Tutorial:

[naderminaie]

useQuery function name changed to getQuery and also useBody name changed to readBody

[mahtoosacks]

Changing to getQuery() and readBody() fixed my issue, too.

This series has helped me tremendously. It feels like I'm fleshing out a real app! NUXT is amazing!

[everyhandletaken]

This course is amazing..
No nonsense, relevant & complete information, that covers so many aspects in 1 small project & bite-size tutorial videos.

Thank you !

[elmenikmati]

Excelent tutorial. For me it works with: "const { name } = getQuery(event)" and "const { age } = await readBody(event)" 🤩 i love nuxt and vue.

[montythemack]

Your videos are so well done!! I've been watching your content for years. You can tell there's a very big attention to detail in every one of them. Keep up the good work!

[KuroManX]

I watched this course before, didn't understand it very well, but keep studying. Now with more nuxt expertise I can guarantee that this course is well structured and covers all key points used on nuxt.

[nadeemabbasi]

The Net Ninja + Nuxt = Awesome.... Thank You

[mrwhosetheboss]

You're awesome NetNinja you know soo MUCH 💪🤩 BOSS😎 you're the one who made me know JavaScript and CSS as I know it now so thank you 🙇

[ZyncInteractive]

If anyone is getting errors on useBody and useQuery and your using the latest Nuxt 3 stable that only just got released a few hours before this video.

readQuery and readBody is what you need to use now. The older commands which were a part of Nuxt RC11-14 are gone with the release of Nuxt 3.0 stable.

Edit: *getQuery not readQuery sorry

[williamhoy]

nuxt seems to have made an update that forces you to use const query =getQuery(event) instead of const {name} = useQuery(event)

[alnahian]

Hey Shaun, what if I use Laravel for the backend *(API)?
How will I perform any POST, PUT/PATCH/DELETE request then? Do I have to create those server routes or should I somehow utilize the api routes provided by my laravel app?

Thank you.

[KosalaEkanayaka-oo]

Just a heads up if you are getting errors.

Nuxt useQuery() changed to getQuery()
useBody() changed to readBody()

Thank you very much for this great tutorial.

[sulaimanabarry]

This is a great tutorial for beginners. I'm having a problem with adding a bootstrap template JavaScript file from my assets folder. (assets/js/responsive.js)

[vagkalosynakis]

What is the difference between useQuery and getQuery? I cannot find anything related to "useQuery" in the official Nuxt3 documentation. Instead, they mention "getQuery" and "getBody". Is there somewhere we can read about those?

[JordiVila-xlem]

Server route doesn't work either with Nuxt 3.2.0. Instead, move /server/api/ninja.js into /server/api/ninja/index.js.

[bharath]

I have used expressjs in nuxt2 server-middleware, not sure if can fully migrate those features in nitro for nuxt3 upgrade.

[offgridvince]

Hello Net Ninja, how do I import bcrypt for a server route? Thank you.

[dunyan]

Nice one Sensei, can you do a nextjs + firebase playlist. That would be dope 💥🔥

[danielwatson]

When I do this in my development environment everything works just fine. but when I deploy it I get this error:The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Object"

anyone have a clue why?

[danielwatson]

I had to change the headers to accept plain text for some reason:
const options = {
method: "POST",
headers: {
"Content-Type": "text/plain",
},
body: {
string: orderDataString,
},
};

const { data: orderId } = await useFetch("/api/processOrder", options);