Nuxt in 100 Seconds
ฝัง
- เผยแพร่เมื่อ 12 มิ.ย. 2023
- Nuxt is a full-stack JavaScript framework based on Vue.js that provides server-side rendering, data fetching, state management, and many other features. Learn how to build web applications with Nuxt in this quickstart tutorial.
#webdevelopment #javascript #100SecondsOfCode
💬 Chat with Me on Discord
/ discord
🔗 Resources
Nuxt Docs nuxt.com/
Nuxt on GitHub github.com/nuxt/nuxt
Vue in 100 Seconds • Vue.js Explained in 10...
Vite in 100 Seconds • Vite in 100 Seconds
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Nuxt basics tutorial
- Vue.js metaframework
- Nuxt directories explained
- Nuxt vs Next.js
- Vue vs React
- Which JavaScript framework should I learn? - วิทยาศาสตร์และเทคโนโลยี
I just love how aesthetically pleasing these 100 second videos are
Bro used asthetically 💀💀💀
Still waiting on tamagui to get a video zzz
Same
And still wondering why is it not 100 seconds
@@hamadaelwarky3640 just because your vocabulary is shit doesn’t mean you’re any better than him
Nuxt and Vue are amazing, the work of people like Evan You, Anthony Fu and Patak to create and maintain them is a great example for open source projects.
And Posva. ;)
@@AngelHdzMultimedia And Daniel Roe, and Poya Parsa, and Harlan Wilton, just to name a few. All of them amazing devs. ♥
and almost entirly of Africa and China for some reason companies their love to use them dunno why thou but huge communities in-comparisons to here in Eastern EU we still stuck with Angular and SPring in the Backend I'm tired from writing slow java code and almost had to fight to jump some java to rust and convince management it will save ton of money
@@ko-Daegu to complete your statement, NuxtLab is based in France, and I agree this is an awesome technology big companies should adopt, because the dev experience is incredible.
But in eastern Europe, enterprises are stuck to spring and angular for multiple reasons :
- angular & spring are here for decades. Why bother changing while this works.
- moreover, this means that devs should spend time learning this new technology, and there might be a lack of colleagues with expertise on that field. When moving on a react project, it was a pain for me, because nobody in my team could help me (the one who chose that tech stack did it because it was trendy, and ended up leaving the company).
- nuxt is unfortunately not mature enough. It took only a few years for the V2 to be deprecated, making a lot of big projects obsolete after only one year of run. What about V3 ?
- mixing the template, script and style section in the same file would end up making them very huge in real cases scenarios, and therefore, less maintainable.
When working on a personal nuxt V3 project, I noticed that splitting too much code into separate files or components would impact the performance and the number of requests, even on a production build.
@@ko-Daegu you didn't save them any money. Your novelty projects as a dev are not relevant to a company. If they use the java stack and you don't like it then get another job. Now you've just made sure that they need to hire a rust dev in the future or make one of their devs waste company money learning rust in order to support your novelty project in the future. All of that could've been avoided if you had stuck to Java which let's face it could've handled your stupid novelty project just fine but you just wanted to use rust.
You skipped one of Nuxt's coolest features! It has Typesafe API endpoints with useFetch. Any endpoints you write in the server/api directory will have typed responses and paths when used with useFetch. Feels like Remix's data loaders.
The web framework (called H3) for server apis is also extremely fast and trades blows with Fastify.
But my favorite part of Nuxt is that they've built it with an open set of tools called "unjs" so anyone can build their own nuxt-style framework. Analog is an Angular framework that's using it
Props to
- Daniel Roe
- Anthony Fu
- Patak Dev
- Sebastian Chopin
and many more contributors that make Nuxt 3 possible 🙌🏼
Daniel Roe is a Godfather
Daniel Roe is actually a Nepalese guy
const props = definePro…. Okay nvm.
Yes please! I love these 100 seconds series as they help me get a general idea on new things or the thing i haven't' used yet
would love a HuggingFace one
PLEEEEAASAASEEEE!!!! We need MOOOOOAAAAARR 100 seconds videos.
They are awesome.
They help not to dive into a new framework every 3 months - because you get the idea =)
nice dino emoji 😍
🦕
I would not have started using Svelte if it weren’t for your 100 second video on it, and it’s changed my web development experience forever. Please keep it up!
There's loads more which wasn't covered, like the server directory for file-based routing for building an API, server rendered component islands, and more things about how good it's DX is. Nuxt is ❤️
Muuuch more! They are working in session, authorization/authentication, strategies. And devtools is having a lot of improvements. And all the good stuff being added to Vue like defineModel, Short v-model macro (with @vue/macros), props destructuring, generics. Nuxt is 💚
Behind Code Report, X in 100 Seconds is my favorite content. Your Angular tutorials are also great.
Angular comment on a vue video?! Blasphemy!
@@yegorzakharov8514 I have to use Angular for work, but if I were to build a project from scratch, I'd use Vue or Svelte 😅
@@blackfi12e622 I don't think anyone enjoys using Angular for hobby projects lol. It's always the case that you have to use it for work
@@blackfi12e622 my condolences for having to use angular. But it pays the bills so worth it
@@blackfi12e622 built an llm app with sveltekit the experuince is beyond great i jumped from next to nuxt finally staying with sveletkit
Love these types of videos but I think making more beyond 100 seconds videos would be amazing!
This video is literally 169 seconds long
you can buy his course for that.
his beyond fireship channel is exactly made just for that
@@Goldeooooooo a perfect square!
@@louisuy_ yes it is! 🎉😂
Please please do a totally unbiased, deep comparison between Nuxt and Next!!
+1
+1
Nuxt is better and I am bias against Next... 😂
Love the 100 second series. The perfect intro to new technologies that help users & viewers understand if it's something they might need to dive a bit deeper into and take advantage of! Definitely keep it up 🥳
Yes, more of those videos would be much appreciated. They also serve as a much-needed refresher of certain knowledge for us, non-developers, out there... Thank you for your effort!
Loved the nuxt-up easter egg.
If Nuxt had some opinionated framework or boilerplate for dependency injection, I could easily see Nuxt as the future of Web frameworks.
I really love these 100 secs videos because there's just enough to keep me engaged but not so much that I don't feel like going to explore it myself. Definitely keep doing these, please.
Your 100 seconds videos literally gave me a college degree worth of education by incrementally exposing me to so many concepts in web dev and software engineering, giving me the chance to explore what looked like a nightmare of intertwined concepts with so much ease. You have no idea how much you've helped me. I'm a a data science undergrad and before your channel I felt like I had tunnel vision but all of a sudden I can see everything. Plus your sense of humor is fantastic and your videos have amazing visuals. Please keep making these, coz we do appreciate everything you do, and you are helping MILLIONS.
i'm a soon to be grad also data science and yeah man this guy is so good at keeping you knowing whats going on in the landscape. if only we had this for DL...
@@connorkapooh2002 too true
Yup yup yup I’m a recent grad too and these videos are gold. Few other people can make videos that are as informative and concise as fireship, and the humor makes everything 100x better. I’ve learned so much just form these videos and they provide great places to jump off from if I want to deep dive on something that I like or will help me at work
Nuxt is awesome. It took me just a day to start building with it.
same!
Took me almost 3 days to start building with it. The struggle here on Ceres is real 😤
Yes, please. I always rely on 100second fireship videos to explore new tech.
These 100 Second videos are my favorite because you give us, the viewer a simple overview of something that we may like and can see while at the same time we get to explore and try it for ourself through our own methods. Amazing work and please keep making these 100 second videos! :D
Been waiting for this one! Last year i coded mostly on Nuxt and rails and fell in love with nuxt. Saved me from a lot of headaches
Been developing whole ecomere site from scratch and this framework is really refreshing
Everything works out of the box, deployments are easy, and the speed of writing code is insane, no need to think about states, imports, bundle sizes, cross component communication
You literally focus only on the logic itself, everything else is being handled
If you had to point out any negative points, what would they be?
@Andai To understand interactivity of day to day components (drop downs, modals, styled reusable inputs), flows, caching mechanisms, statistic trackers and other things so that later i could use this knowledge to improve existing projects
@@mateleo78 i second this
The negatives of nuxt 3 hmm.. thats a hard one. Initially there were integration issues and missing libraries but its all now fixed.
maybe a slightly bigger bundle size as an empty project. but once fully loaded it ends up being smaller than next and cra. atleast in my use case.
I had a hard time with data fetching.
Especially for requests that should be made in the browser, but not on the server
Bro your 100 second tours are always awesome, pls never stop 🥺
Please continue. Time is scarce and what you are able to explain in 100 seconds is fantastic.
Nuxt3 is easily one of the weapons of choice for smaller and bigger web projects. One of the best DX I had in over 20 years of web development.
Not gonna lie I read the title without the X
I guess that means you identify as a dog...
I can do that though
100 seconds is the best series on TH-cam, change my mind
...guess the ELO?
Love the 100 sec videos! I'm not a professional dev, but I watch your channel to stay up to date on dev news and to learn the capabilities of all these tools quickly, as I work in the tech industry and have a hobby home lab for fun Plex, nextcloud, and other fun projects. 😊
Yes please keep making these videos. You're pretty much my main source of quick summary on tech these days. Thank you for everything you do. Cheers
Love these videos so much Jeff. Keep it going!
Nuxt is just beautiful. Thanks.
Definitely keep turning out these shorts. They keep me updated on tech so much better than many other resources it isn't even funny. Great work! 👍
yes pls more of these, this is all the time I have these days to watch something about new tech/not-yet-tried stuff
I used to use Nuxt in version 2.x. With version 3, a lot has changed, developed and improved. Nice to see it. Of course, a video like 100 seconds of something is great!
Waited this for so long ❤❤❤❤🔥🔥
Definitely keep the 100 second videos going, they're great! I love getting a nice overview of whatever cool thing you do a video on.
I‘d absolutely watch them, if you made more of these! They are like a Tech radar for me and I love how you manage to get all the important features across, without wasting your viewers time!
Fireship does it again. CONTENT MACHINE.
In my opinion, Vue is underappreciated. It's significantly superior to React. Your further introductions to Vue will definitely encourage more people to use it. It doesn't deserve to be neglected
Vue is too intricated. React is much easier for understanding and that's why it's most popular.
@@igor-grudinin No that's not. React is popular because of meta. I have used both in projects, and I believe vue has a better DX.
@@igor-grudinin That's not true, Vue is easier to learn and understand, you don't need to know what everything does under the hood.
@@igor-grudinin You know what's the best of both worlds? SolidJS. Solid is looking similar to React, but much more performant/efficient than Vue.
@@davidvultur8704 and how many vacancies are opened for SolidJS? I see it very rarely. And React is everywhere.
Thank you sir, even though I don't need some 100 seconds videos, I really love to watching it. When I need it, it's a gem. Hopefully more to come.
Keep making these 100 seconds videos. They are great to get a solid idea about a framework of language before diving into it.
I would love to see you do OCaml in 100 seconds. Such an underrated language
1:27 "nuxt up" 😆
Hey buddy! Your "100 Seconds of Code" videos are absolute gems! Seriously, they've been a game-changer for me. Your teaching style is spot on and I always walk away with practical tips. Keep those awesome videos coming, my friend! You're making a real impact in the coding world. Cheers to you!
Definitely not written by an AI.
The combination of editing and information makes this video amazing!
If you make a full Nuxt course on your website I'll buy the PRO membership I swear
Me too
Nuxt is great. The only thing missing from the Vue ecosystem IMO is a React Native style framework. If anyone can make it work it'd be the Nuxt team!
I think Quasar is it
NativeScript has you covered 😉
Vuetify
vuetify if imo the best. quasar is also pretty good
@@TilenPirih I think he's talking about something for mobile development. NativeScript Vue is the way.
Yes, keep making these videos. They're super helpful when I'm over here stuck in a dark corner of tech while everyone else plays with new shiny stuff
I love these, it's almost impossible to keep up with all the new things nowadays... these short summaries are extremely useful. It helped me massively to prepare for my latest interview and I got the job ;)
Nuxt is incredible but not enough people use it so in some edge cases it's hard to find support for some functionalities and I have to navigate my way through some unknown third-party open source plugins.
If channels like this one keeps promoting React more, of course Nuxt is going to be underrated and with less tutorials/answers.
@@AngelHdzMultimedia I don't necessarily think that this channel is specifically pushing for React. They tend to use React for code snippets/examples since it's the most popular thing and is the most likely to be understood. But I do agree that in the TH-cam space, React is way more popular.
Thouh I live in an alternative world (France) where the most used solution for production is the Angular-Spring stack lol
+ performance are just bad if u compare to Nextjs
@@user-re8lt2gy3g are you joking, right? 😂
@@AngelHdzMultimedia u need to read a blog from the astro creator him self nuxt is ranking low in every test
Why the hell have I not found nuxt earlier.
I love these videos, because it quickly introduces me to a technology/stack I hadn’t used before, but without getting bored with technical info. It’s just the elevator pitch.
I really love 100 seconds and beyond 100 seconds videos as well. Keep up with the great work.
NUXT > NEXT hands down no cap. Screw React.
“it’s good for employability🤓” my ass-sets
My fellow Reactors, make the switch. become a Vuer
These videos are invaluable source of information about latest frameworks. In such a short time you managed to give just enough information to decided wether I want to have a deeper dive into the framework or its not for me.
I definitely think you should continue making these 100sec technology/ concept videos. Just having some introductory knowledge of more techs and concepts in software development greatly improved my ability to understand and problem solve. Especially as someone transitioning from a different field of engineering!
Continue making these 100 second videos, they help me get a gist of new technologies and helps choose if they are interesting enough for me to try them out :)
I like all of your videos, but the 100 seconds are my favourites! It must be quite an effort to condense all that information into such a small duration, amazing!
The 100 seconds series is the reason why I subscribed so I would look to see those every now and then. Nothing wrong with your other videos, I just have missed this series.
A mixture of both your newer videos and the 100 seconds videos would be nice.
You should definitely continue making these clean and short, fun and educative videos 👌
Yes please, we need this videos. They help a lot in knowing what tools are out there when working on stuff.
More 100 seconds videos please. These have been my intro to many of the tools i've adopted in more recent times.
Yes, the 100 seconds video are awesome to quickly get an overview of languages, frameworks and concepts.
They are the videos that made me discover your channel.
The code report, beyond 100 and other materials are what kept me.
It's understood that there can't be 100 seconds videos daily or even weekly. No harm in that.
I really appreciate and enjoy these 100 seconds videos
Yes, please keep this kind of videos , they are really informative and straight to the point. Also, it would be nice to include more dev ops stuff.
These type of videos are why I subscribed to your channel in the first place. Keep them coming :D
+1 for more 100 second videos ... don't even really care what you cover, just really appreciate the format and how well they are made.
I really love the 100sec series. Keep 'em coming.
Absolutely keep on making those awesome 100sec videos
These Types of Videos are the best. Please make more of them!
Hell yeah bro, keep it up! Whether it’s the code report or 100 seconds of whatever, I’m here for it. 🎉
Great overview which is very useful when you are looking for new frameworks or just wanting to understand the current state of art. Many thanks!
Amazing, you're my first front of frontend news.
And helped us define our new stack in work, keep up good work, bless! 👏👏🙏🙏
This is the video I've been waiting for since the last Nuxt release! Thanks!
I love 100 seconds of code. Keep em coming!
I love these 100 seconds series, They are awesome.
Videos like this one made you famous, keep doing this amazing work, we all want to see more 🔥
definitely love the 100s series! They're great to see if a tool is worth taking a deep dive
please keep bringing these 100 seconds videos as they are really good and informative.
Those videos rehydrate the passion in my heart for programming and it's really dry there no pun intended
Okay damn I'm sold, thank you very much for 100 seconds!
Thanks @Fireship for featuring my open source project (Medusa module for Nuxt) in your video! This is quite an achievement for me 🚀
Please continue, I go back on these to review my stack and stay up to date
you are one of the best quick information about tech stacks ever
Don't stop with the 100 seconds, i love it!
Def keep making videos like this, because there's a ton of stuff we all want to learn
I love these 100sec format and next of course !!
Yes make more of these videos! I would honestly like longer versions too
I love your 100 seconds overviews very much!
Your in 100 seconds videos, when you used to make them all the time, I got so excited for. With the wait, I was even more excited because I love them so much! But don't make us wait longer, because we love your videos 🤣♥
Love the 100 Seconds videos, and love much that you made one for Nuxt ❤
Bro these videos are great don’t stop.
Been using Nuxt for years, still my favorite framework to use 😍
The thing I love about these videos is that they allow me to take a look at new technologies that I haven't used without needing to get balls deep into a project
Never ever stop with these videos
please never stop these 100 seconds! they my bible and guidance sensei! haha
Great video thanks! I've been using nuxt for a while now and it's awesome. And yes please make more of these videos
I love these videos man! It gives me a quick review of the subject and then I can decide if i go deeper into it or not.. You are the best!
I am a great fan of yours. I love all your contents. Super classy and perfectly confined.
That transition to the vue logo was sick!
These 100 second videos are a great way to get familiar with new tech quickly.