Why Use Nuxt JS 3 Beta?! (Vue.js 3 With Nuxt Tutorial!!)
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- 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
• Vue 3 All-in-One Tutor...
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻
Begginer JavaScript - BeginnerJavaScript.com/friend...
React For Beginners - ReactForBeginners.com/friend/...
Advanced React - AdvancedReact.com/friend/HANC...
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
github.com/ErikCH/Nuxt3BetaTu...
v3.nuxtjs.org/
Thank t=you Erik! well explained, I really enjoyed learning Nuxt 3 with your instructions. And it is my first time using it.
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.
Eric you are always ahead of the game thanks for doing my homework haha
Thanks for sharing! Learned a lot ❤️
found this really useful thanks!
Thank you Erik. Now you are my favorite DEV TH-camr. I did not watch this video yet. But I am sure after watching Nuxt 3 will be easy to me.
Wow, thanks!
I'm really wating for this video. Thanks
you explained it so well. Thank you Erik! :-)
You're very welcome!
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
Great video Erik. You earned a subscriber! Please what theme are you using?
thank you brother 😉 👍
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.
Thanks 👍
Can you talk about Nuxt3 state management next? Curious if the new useState functionality has persistence and can really replace vuex?
would love to have an answer about that!
Almost 100k 🔥🔥
So close!
Great thumbnail... stay classy Impact 🎉🌟
I was waiting for this!
Awesome! Can you make a video of what state management looks like in Nuxt 3?
Yes I can, I'll look into it!
I wonder if you can tackle persisting data after page refresh as well when discussing state management. That would be awesome.
@@sania3631 use pinia - i just got it to work
@@ProgramWithErik any more nuxt 3 nuggets as most of them green checkboxes are green and checked
Great! you help me save a lot of time
Это реально магия. Для меня это что-то новое. Спасибо за инфу. Лайк и подписка
Very nice. I wonder if there are plugins to make the server-side less cumbersome. Hitting req and res directly isn't very optimal.
thanks a lot
You are most welcome
This is a pretty awesome Nuxt 3 tutorial, Nuxt 3 is very powerful, really impressed, can't wait to dive it 😎
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
AWESOME!
Thanks!
Wait for it.
Nuxtify the world ❤️
Great
Thanks, which font you are using for vs code?
finally yay!
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?
Nice we can use optional changing in template now ? It doesn't work in Nuxt 2 from what I remember
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 ?
How about review latest Quasar?
Hi, do you know how to access the "$route" object from inside the block?
You accessed it from the template using "$route".
"const route = useRoute()"
Yup see @horace comment!
@@ProgramWithErik Thanks for your answer, I really like your videos, I follow you, thanks for sharing what you know.
Amazing content, clear and objective. But I fear composition api just turned vue into react. Became confusing and opened the code to bad practices.
couldnt agree more...
It Turned vue into svelte ^^
Is it safe to hardcode api tokens in the server files/component ? Or can those file's code be exposed from clientside ?
For Vue u need nodejs only on development, you can deploy it as a Js/html foldder on any hosting after building the project. Is this also true for nuxtjs ? Or do you need nodejs on the hosting as well ?
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!
Can you do a course on Nuxt Js
Yes, I'll be doing a newer course. I do have an older course if you like to check it out. school.programwitherik.com/p/create-awesome-vue-js-apps-with-nuxt-js
Is there any replacement for $nuxt.$loading.start() ?
Vscode theme?
Hi Erik, I got this message after using script setup:
[nuxt] [request error] Cannot read properties of undefined (reading 'setup')
How to using vuex/store in nuxt 3?
What's with the nuxt3 now? roadmap was about maybe stable @dec 2021 but not a single news since @oct 2021.
Changing the layout didn't work with the current version of nuxt js I tested.
Here what I did if this becomes helpful for someone
definePageMeta({
layout: "custom",
});
Thanks! I'll be going over that in a new video soon!
Why do you have to manually restart the server so often? that defeats the whole purpose of hot-reloading. Is this a Nuxt issue? Can it be fixed?
Svelte VS Nuxt?
Woah, what command was it that replaced the quotes with backticks at 11:51?
If you're in vim mode you can do cs'`
um salve do brasil
I really don`t like the way how nuxt3 handles custom layouts when using script setup. I need open another script just because for custom layout and all my logic works again in another script?!
Maybe they are going to improve or think about it later, how do you guys think?
Is there any github code
How to desctructur toRefs in ?
return {
..toRefs(state)
}
There is no return in script setup, everything is accessible directly
vscode theme name? nice vid
Synthwave 84
Man, I'm having a hard time generating static website pages in Nuxt 3. On nuxt 2 you do nuxt generate, how do you do that ibn Nuxt 3?
It’s not possible at the moment. Crazy, SSG is the only Feature why we need Nuxt, otherwise we could do this with plain Vue 3.
one thing I don't understand is ":src="show.show?.image?.medium" the "?." what is that? what is the name of that? Thanks
in typescript or es2020 or later javascript, you can access a member of a object only if that object exists, so it prevents "cannot read xxx of undefined" | "cannot read xxx of null" runtime errors.Here, what this basically does is first checks if there's a "show" member in show, if there i,s then checks if there's "image" member in show, then only access medium if image exists(also indictes that "show" existed).
@@nethsarasandeepaelvitigala135 thanks a lot for your answer! What a nice (new) feature
@@eMeRiKa You're welcome, btw there are lots of new features in JS nowadays .You can safely use them if you create a webpack(or any other bundler) and Babel workflow.And most are also supported in Typescript.JS is getting better by the day!!
You know what would really help... 57 more JS frameworks/libraries. Do we think we can have that by the end of Q4?
Lol salty much?
There is only in server-side framework for Vue which is the most starred client-side framework. There is only 4 major client side framework: React, Vue, Angular, Svelte
we are just going to hardcode GIRLS
Look, you can't be a big fan of both react and Vue at the same time
почему ты говоришь по-англиским, а названия про видео написано на русском язике
These javascript framework names get dumber and dumber