Why Use Nuxt JS 3 Beta?! (Vue.js 3 With Nuxt Tutorial!!)

Nuxt JS 3 Beta has just been released? Should you use it in your next project? Does it hold up to the hype? In this tutorial we'll create a quick app and show the features of Nuxt 3.

👉Check out my last video on Vue 3 All-In-One Series

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out

👉 Sign up and get free Vue cheat sheets and updates!

Need to Learn Vue or Nuxt? Check out my courses below!

🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻

0:00 Introduction
0:27 What is Nuxt JS 3 Beta
04:13 Learning About Vue 3 in Nuxt
07:00 Adding a Server
13:18 Creating Pages and Dynamic Routes
17:25 Adding layouts, default and custom
21:50 Adding public folder
22:45 useFetch and useAsyncData tutorial
27:54 Creating TV Search App
31:59 Conclusion

Links

[dev-am]

Thank t=you Erik! well explained, I really enjoyed learning Nuxt 3 with your instructions. And it is my first time using it.

[willyguillard]

i have so much to learn between vue and nuxt. It's the most interesting thing to learn right now. thank you again for this amazing show of nuxt.

[cnikolov]

Eric you are always ahead of the game thanks for doing my homework haha

[badasscoder]

Thank you Erik. Now you are my favorite DEV Youtuber. I did not watch this video yet. But I am sure after watching Nuxt 3 will be easy to me.

[gyenabubakar]

Great video Erik. You earned a subscriber! Please what theme are you using?

[Sky_ye]

21:20 Basically that error are shown by Vue Router same way in non-nuxt projects, without having single root element page template even if you'll setup transition it wont work for pages without single root element. That rule applies only for pages, components can have multiple root elements in most cases without any problem like that.

[bombrman]

this was cool to code along I like these kind of videos. It's sets me up with a nice template work experiment with further

[OzoneGrif]

Very nice. I wonder if there are plugins to make the server-side less cumbersome. Hitting req and res directly isn't very optimal.

[hasiburrahman]

I'm really wating for this video. Thanks

[Kingside]

you explained it so well. Thank you Erik! :-)

[mrleblanc]

Thanks ! But I did not understand the part about /api/test ? Why wouldn't you use an useAsyncData directly in the page like in Nuxt 2 ?

[oldschoolappearance]

Awesome! Can you make a video of what state management looks like in Nuxt 3?

[coderoutemedia]

Really nice intro, please can u make an in-depth video of how to best handle api calling between components and vuex store in ts as well

[adajiang]

Nice video! But I have a question about data fetching from api, so when we need to request web apis from other server side, we have to create a new file in server/api? Can we just request in a .vue file directly?

[mrleblanc]

Nice we can use optional changing in template now ? It doesn't work in Nuxt 2 from what I remember

[theTechSimple]

Thanks, which font you are using for vs code?

[FrankDecker]

Hi Erik, I got this message after using script setup:

[nuxt] [request error] Cannot read properties of undefined (reading 'setup')

[yabuking]

Will there be named, router and anonymous middleware? From the docs it seems to be only for server-side. Been searching it but couldnt find any. Thank you!

[tiborszabo]

What's with the nuxt3 now? roadmap was about maybe stable @dec 2021 but not a single news since @oct 2021.

[ilooi]

Is it safe to hardcode api tokens in the server files/component ? Or can those file's code be exposed from clientside ?