Fireship Pro member here and I'd love to see a full Nuxt 3 tutorial! We're running 3 internal apps on Nuxt 2 and need to know what I'm missing, how to upgrade or change, etc.
I have used Nuxt before, and really excited to see the version 3 bringing even more awesome features. Would love to see a full in-depth tutorial from Fireship 😀
Anthony Fu, who is part of the Nuxt core team, is an Open Source legend. The Auto Imports are from repos he maintains. - unplugin-auto-import - unplugin-vue-components
Auto imports should be a feature everywhere. ❤️ Imagine that commit in an Angular project: "Adding auto imports, imports cleanup" +12 additions -2458 deletions.
dunno, in big projects the name collision could be a huge headache. I can already imagine something like this happening UserClientsTableHeaderCellFilterContainer
@@RavMucha yeah thats true but, tbh, in this case, I don't even see the import issue as a problem, IDE does the auto import for me and keeps it collapsed, out of sight, out of mind, and eslint orders it, if there is a need for it.
Idk if it's just me but I totally don't mind the imports, especially with name collisions or some naming similarities.. really useful to see if the function I want to use is actually imported from the lib I want instead of something totally different (happens a lot in our project). I also don't really care about the big block of import at the start of the file.. if you are coding, you won't look up there, if you are searching for something, you will ctrl+f anyway.
@@riddixdan5572 well, in that case it might be, but I've seen import hell more than once. Either taking over a project after people that were trigger happy and decided to import everything that could ever be used in an Angular project, or dealing with very badly documented component imports from an obscure UI Framework that was client enforced... There's a lot of scenarios in which my life would be much improved if I could just ignore the imports part.
The entire time I was watching this video I was thinking "wait.... it can't actually be that easy??" I'd love another video going more in depth on things like pulling in styles and third party components.
What do you mean styles ? You have global stylesheets and each component can receive a scoped tag. Vite supports pre-processors so you have access to PostCSS, SASS, etc... 3rd party libraries are the ugly part of Vue 3 since a lot of librairies aren't compatible anymore and the community isn't updating them fast as of yet. Basically you'll start Vue 3 with an immature ecosystem. But you don't really need one to begin with, this isn't the "library" React devs are used to, it's a battery included framework.
Now that my company is looking to implement SSR and Nuxt into our Vue codebase, this video has been fantastic to help understand their justification for being so pressing about getting it added in in 2023. Those auto-imports look to be absolutely clutch. Thanks!
A full Nuxt 3 tutorial would be awesome! Thanks for putting this video together, I've been stoked about Nuxt v3 for a while now and it's so great to see it's finally reached RC status. Keep up the great work on these videos, I love your content! :)
I love seeing all the positive feedback on the Nuxt 3 features! I’ve been a Nuxt user for over four years and it’s awesome to see how far the framework has come.
I didn't know Nuxt v3 brought so many amazing features. The components being available everywhere is so nice. I used nuxt 2 and would love to see a full tutorial on the V3 from you
I believe web community is obsessed with "creating new frameworks", What we really need is just a framework which creates frameworks so every single developer can create their own framework and call it supreme. Booom 💥
Code is a language. Saying you know English means you can write a poem or write mathematical statements. I agree with you that we should slow down on “hot new frameworks” but part of the constant evolution of language is to adapt. Sort of like if music was MVC and our taste/experiences shape frameworks we write songs in
DUDE - great summary. We have been using Nuxtjs for healthcare platforms we have built since mid v1. v3 has been eagerly anticipated. Please do a longer form video on Nuxt3 - it has truly been a game changer for us :)
As usual, really nice video. You never disappoint. Nuxt looks really awesome. A more in depth tutorial for Nuxt, would be a nice idea for the nuxt video on your channel.
Tbh honest it's not a new Framework, it's just Next's equivalent to VueJS, although one could argue Vue is already a framework and is more opinionated than bare React/CRA ootb. But yeah one should really stay away from the new shiny thing syndrome
@@heroe1486 Agree. Just one thing, nuxt its really taking things to a new level. The idea of the autoimports and the simplicity of the ssr is just astonishing
I personally dont get why a lot of people feel this way. Yeah, the front end world has constant iteration and new cool things come out all the time... thats great. Thats how it should be. The opposite would be horrible. A stagnant never changing ecosystem is what makes me feel depressed. Cause thats an actual sign that our code sucks and nobody is doign anything important in this space
@@samuelmorkbednarzkepler There's a difference between never changing vs evolving vs changing like crazy. Plus, there's nothing you can do with one framework that can't do with another.
I am working with a colleague on a rather simple single page application and only got to realize how amazing Nuxt really is. I would totally love a full video
On larger projects I feel most of this is better covered with Vite and plugins, a robust microservice backend/custom API, and a cloud based deployment infrastructure (love edge delivery btw). But I'm glad this is getting released, as configuration is tricky and there are many scenarios where you'd want the ease of use Nuxt 3 seems to be able to provide. Yes please on a more in-depth rundown!
Wow. The auto import feature is something I hope every other framework adopts. It seems like all of the good ideas get adopted when one frameworks does something like Hydration. I'm all for letting the computers do more of the work. SSR looks fantastic. The only thing is the horse race is getting more and more complicated. I want to use the way Svelte or maybe even Astro do certain things. Do you see the auto import making it to other platforms?
I'm a bit skeptic about maintainability of auto-imports. It's what keeps me from getting into e.g. rails. A system where you don't really know where things come from is... scary.
@@joaomatos1420 Maybe that's a bad idea, but I've seen an approach that lets you import components notmally, or use global ones, stored in a specific folder without imports with a prefix, like
I saw the video, then I decided to right away read the documentation to learn it, then I almost learnt it, then I came back here, then I learnt it Thank u fireship, u cool
Please a deeper dive on Nuxt! I recently upgraded a sizable Vue 2 project to Vue 3, and while differences don't seem that big on the changelog, I am realizing just how much of a game-changer Vue 3 is once you start working with it and lean into the ergonomics. And seeing how Nuxt3 is really capitalizing on that makes me eager to play around with it more.
Thank you Jeff it would be nice if you do a full tutorial on nuxtjs 3, i have been using v2 for most of my project huge scale projects so it would be nice also if you could indicate the major differences btween v2 and v3
I would really like an in-depth tutorial. I've used Nuxt2 for a long time now and have a deep understanding of it. The problem with Nuxt3 is the documentation isn't fully complete and it leaves some questions.
When I have time, I'm definitively gonna learn vue. At that moment, a full Nuxt tutorial could be preeety useful. Great video man, keep up the good work!
I would love a full NuxrJS tutorial! I am using it extensively for my work, and some of the features u just said in 4 minute talking, I have never seen :D Pretty please
Oh helly yeah! I’ve been a little disappointed with the Vue ecosystem sincs the switch to Vue 3 (it’s been rough), so seeng nuxt as a well developed framework that guides you along the way, that sounds awesome! I’d really like to see a full tutorial ot Nuxt3 😄
I personally think Vue 3 is not just the best improvment I have seen for Vue in a long while but probably the most impressive improvment I have seen happen to any of the major frameworks in my entire career as a frontend coder. Just for the record. So people dont think its generally accepted that vue 3 was a bad improvment. Cause its not. Its super really not
@@samuelmorkbednarzkepler Agreed. But a lot of libraries were missing long after its release, documentation wasn’t the best, and the overall feel of the ecosystem has not been as complete as react for example. I love Vue, and would like to see it thrive, but the transition to vue 3 has been hard. Hopefully a lot of devs will try out Nuxt3 and new libraries will emerge to work with Vue 3.
@@kendedetar I had some trouble right at the start, but that was before Vue 3 was officially out. Vue 3 was acutally not the recomended option until just a few months ago exactly because lots of parts of the ecosystem was lagging behind, most notable vues own library for state management, and the docs needed work. But I would say that, in the last 9 months at least, I have not had any issues with Vue 3 at all. Its been a great experience. Except maybe the docs being outdated, but that all changed like a month or two ago when they just released the new docs and now thats all great again also. The only vue 2 spesific libraries that still lags behind are usually UI component libraries like vuetify. Which I think are still working on their Vue 3 version. But I dont really like UI component libraries myself to be honest so that never bothered me in the first place. Plus Vue 3 composables have opened up a world for much more usefull Vue libraries like VueUse to exist. So the new libraries to Vue I find to actually be a lot more usefull than the old vue 2 ecosystems libraries. For this reason, and almost just off of VueUse alone(which is a great library), I actually feel like the ecosystem for vue is better with vue 3 than it ever was with vue 2 even despite lots of libraries lagging behind to this day. But yeah, if you really like UI component libraries than I guess I can see how it doesnt feel that way. Or maybe theres some other vue 2 spesific libraries I dont know about. To be honest, I try to stay away from framework spesific libraries in general.
Good video as always, I'd like to see a comparison between this and what other frameworks, such as angular, already provide (besides auto import ofc 🙂)
I have significant experience with Nuxt2 and I can tell you that most of the times the framework works the way you expect it to, but when it doesn't it's hella pain in the neck to overwrite the default settings. Nuxt2 has let me down a couple of times already, so even though Nuxt3 seems like a great choice for your next web app, please don't let the hype influence your choice, but rather build something small with it, experiment with some edge cases and then decide if that's a right fit for you. Auto imports seem like a bugs' nest.
I'm very sceptical about auto imports, I'm curious to know what others think about it. To me it feels like it "solves" a minor inconvenience, and introduces a whole slew of small issues. Like refactoring. If you update a file name, most IDEs will offer you an option to automatically update import strings across your project. Naming collisions are also an issue. Honestly I don't mind importing at all, I think it's good to see what has been included from the outside into your file all in a single place, it's maintainable and clear. I currently work on projects where the bundle size is a very small concern, and we still opt to import components instead of registering them globally, because I don't think global registering is a clear way to go about it. And auto imports feel like global registration...
I personally think the concerns you mentioned are minor conserns that wont cause me more issues then a warning every now and again while the "minor" inconvencince as you described it of having to write a bunch of import statments every time I want to make a new component is actually not a minor inconvenience at all. Its a massive inconvenience. Ultimatley I would much rather spend 1 min fixing a naming colition once or twice per project then spend an 5 minutes writing import statments every time I write a new component only to then spend the rest of the time with the project having to scroll past 24 lines of import statements every time I want to find the actual code in the component. Having this be auto importet sounds like a massive increase in my development speed and code readability. By reducing code clutter my stamina for coding long hours probably also increases. Also it will liley make me a better coder too because I might make me more willing to modularise my code. This just because I dont have to struggle with the mental hassle of thinking "oh. boy. I should probably make this into a seperate component but the thought of mentally having to sort out all the import statments is bumming me out right now so id rather just say fuck it and continue to put that off for a while." Which is something that actualyl happens quite often. I saw the same thing happen when Vue released the composition API. Because there was much less lines of code I had to write upfront to make a new component I found myself being much more willing to write new components since it was less of a mental hurtdle to do so. I think auto imports probably achievethe same effect. The less effort I have to make in order to organize my code the more often will I end up atually doing so when Im working. Espesially when im already tired.
@@samuelmorkbednarzkepler That's fair I respect that, programming is a lot more a social and personal preference influenced than people make it out to be. (Not aimed at you specifically) For example a lot of people like that Python doesn't have curly braces, I personally think it hurts readability pretty bad for instance. As for imports, they're always collapsed for me, so I don't scroll over them, and my auto completion finds most of my imports, so that's why I enjoy the benefits they bring, being able to see what is actually defined from the outside, or right clicking and checking out their file. There's more factors than development speed for me, it's about maintain ability and clarity, and imports provide that for me, but I would argue also for my team. Auto import, to me, seems like registering globally so you don't need to import, and globally imported stuff in my experience, spawns a wild growth of not knowing where something is defined and naming collisions. But to each their own! I see this feature is opt-in so every team can decide themselves what they prefer in the end. I say for prototyping and small apps this is definitely the way to go
I've been using Vuetify which has its own loader that auto register Vuetify components globally. Together with Vue's global component registration mechanism, it's a tradeoff between dealing of using import solutions provided by a framework versus handling import of every component by yourself. Personally, the former gives more convenience, but I can see that clarity is important, too.
@konqi I knew this would tick off some python enthusiasts haha, you picked quite the example, yes that is definitely a real world use case :p! With sufficient nesting and many lines on each block, I personally think it becomes hard to see which blocks were "closed" down the line, especially if you go multiple indentations back/in. Let's just say I think the opening syntax doesn't add much, but the closing syntax definitely helps readability, for me at least. I agree for small code it's all fine. In fact I prefer to use Stylus as my css preprocessor because it gets rid of curly braces and any other excessive symbols. But I don't think this extends over to programming, styling is very different and way simpler (basically a handful of Key:value that's it). But as I mentioned in one of the replies, programming is far more personal preferences and social when looking at small stuff like auto imports or curly braces. But I do think curly braces hold a lot of ground given most newly made programming languages still use them, or something like them (like end in julia, elixir). They have the option not to, they're often compiled languages and can easily assert, but they choose not to do so for readability
4:02 what is doing? I thought the component only makes sense inside a layout component..?! Secondly, 4:18 - if Nuxt provides something like this, why would it still be necessary to use Pinia? (something like Vuex)
Yezzz, a full tutorial please. This nuxt 3 looks really amazing. I've only been working with reat so far and I wanna learn/move on to vue too. And this looks really fun
Auto import is great but can cause to write long components name to reduce name collision which can be Hectic. And As a nextjs ❤️ developer file based routing and ssr already making my life easy Though nuxt looks cool 😎
I went from Next to Nuxt and had a really hard time going back to Next for a different client project. There's a lot of great DX in Nuxt (and Vue tbh).
I've really enjoyed using NextJS. I tried learning Vue but I don't like how the page is templated. Vue has some really great things like a redux type state management but you can get away without using that for most things. I truly like the way React handles it's components in regards to layout.
All it needs is the update of Content V2 (within a month), and Nuxt will reclaim its position as the best option for easy, fast, and feature-rich web development and documentation. 😋
There are some interesting features here which I really like the look of, but as someone who has a lot of Vue 3 experience, I think a lot of the features which are being sold as Nuxt features in this video are just Vue 3 features. I am aware the Jeff mostly has experience with React but I think for anyone new to Vue ecosystem, they should check out the base framework first (especially for small/medium projects). I would love to see more Vue content on this channel but maybe focus on the core framework first! :P
I’ll be honest I think imports are a good thing. At least that way you know where things are coming from. With no imports a new person working on the code will have no idea where anything is or where things are coming from. It becomes difficult to differentiate between built in components and newly made ones
Easy fix would be to allow adding the imports to the top of the file if so desired so any one taking a look at the code and wants imports can just use a command or button in an IDE and imports are added.
No bro, the auto imports is only for pre defined folders (like components). It really helps. For every other thing you need to import. In other words, you always knows where it comes from.
Approach Nuxt with caution. If you are considering adopting it for production I would suggest building a pretty detailed test case first. I’ve developed a full multilingual booking management system on a previous version of Nuxt. It seems super approachable at first (it is, the first few weeks are lovely) and you get started so quickly! The issue is the edge cases. As soon as you get near the edges of its capabilities you will find that lovely documentation abruptly stops and you will spend all your days sorting through other peoples spaghetti to try and do basic things. I did our next project in React. Sure there is a slower start and less ‘magic’ but in the end less ‘magic’ means less undocumented spaghetti.
We had the exact same issue. I think Nuxt and Next work for certain types of projects but they haven't been the projects I've been working on. All of the "magic" is great until it isn't...
Since I have started working with Nuxt, I have been surrounded by many creative ideas. Having Nitro and building APIs within your SAP is just pure magic.
Auto importing is an anti-feature that hinders readability. "What files does the current module depend on?" Is a question answered directly by the first part of a js file. It's almost a contract saying "if you know about the following imported functions then you can read this file fine". It can even be a hint when fixing a bug, optimizing, etc. I can see how it "could be" convenient but I'd prefer the inconvenience of spending 20s or so managing imports on my own (espescially when linters and other tools further simplify this process)
@@1dosstx the problem is that it's a default behaivor meaning that it doesnt really matter what my preference is, I have to follow whatever the project has declared is their style. Also, I looked on the extension store for vsc to see if there was some nuxt plugin to show imports for a file somehow but that didnt seem to be supported by any I saw at a glance. The functionality I described would be critical for me to work in this ecosystem
The auto import might be a deal breaker for me. In really large enterprise applications this could be a huge pain. I also found it interesting that a lot of the functions appear like React hooks. Overall it looks like a great framework and I do believe you could move fast building with it, but if given the choice between Nuxt and Next - I’m choosing Next every time.
You can turn it off. But if naming conflicts are an issue, you are probably naming things wrong. And also what is the reason you would choose Next? You didn't say.
Been on the Angular/NestJS for a long time. Nuxt is probably the first that seems really sweet to me for a long time. I've used auto imports in another platform though for about 4 years now, I personally don't like it; too much magic going on under the hood and you lose a lot of quick visibility when opening up files. For example when I open an angular component or service I can quickly know what files are being used in that component, overall architecture, how I might make thing's more modular going forward etc etc; with files that everything is just auto imported you have to dig into the file to see what is actually being used and kinda hold it in your head how you might split up responsibility of files, etc etc.
"Okay no imports is cool but I can live without it" one minute later: "yea I mean that "pick" is pretty cool, so is "refresh" but it's a lot of new stuff to learn..." two minutes later: "Friendship with React ended, time to go learn Vue and Nuxt" I absolutely would like a Nuxt tutorial now.
yeap, if nuxt3 allow us to work painlessly with capacitor, our life will complete, I already built an app using nuxt2 but most of UI library wants vue3, now I'm stuck in limbo waiting for nuxt 3
The auto import thing is pretty impressive. And layouts look amazing too. Love it! I do imagine it is just a matter of time before these features arrives at other frameworks and libraries. But that thing where you have the server code in a block in the same place as the front end code? Yeah, we old people can remember when that was a common thing, specifically in the PHP 4-5, era. You had code that runs on the server within the php block, and beneath it the html and js for the front end. And it was an absolute nightmare. Maybe I'm missing something here, but I don't know who thought that re-introducing it is a good idea. I guess that's just the way of the world, the wheels just keep going round and round. In a couple of years it will be considered an anti pattern. Again.
Nuxt looks really interesting. I'd love to see another video going into even more depth on it
"Give me a tutorial of {{ nuxt3 }} or give me death" -That Guy who Died
Same it’d be awesome to see a whole series dedicated to Nuxt 3
Same 🙌
Yep need to add updated nuxt content for us vue guys 😂🙏
it would be a great idea for nuxt video
Fireship Pro member here and I'd love to see a full Nuxt 3 tutorial! We're running 3 internal apps on Nuxt 2 and need to know what I'm missing, how to upgrade or change, etc.
I have used Nuxt before, and really excited to see the version 3 bringing even more awesome features. Would love to see a full in-depth tutorial from Fireship 😀
I made a video just like Jeff : ua-cam.com/video/YrFEaEcYrU4/v-deo.html
Same here
Yes please!!
Yes please!
Anthony Fu, who is part of the Nuxt core team, is an Open Source legend. The Auto Imports are from repos he maintains.
- unplugin-auto-import
- unplugin-vue-components
His Vitesse(vue starter template) project is really great
vueuse also rocks, really worth sponsoring that guy
Unocss is very cool too!
i believe Legend is the correct word to describe him indeed.
The sindresorhus of the Vue ecosystem :P
Auto imports should be a feature everywhere. ❤️ Imagine that commit in an Angular project:
"Adding auto imports, imports cleanup"
+12 additions
-2458 deletions.
dunno, in big projects the name collision could be a huge headache. I can already imagine something like this happening UserClientsTableHeaderCellFilterContainer
@@riddixdan5572 well, that's just life in this field. Every solution causes a problem elsewhere. 😅
@@RavMucha yeah thats true but, tbh, in this case, I don't even see the import issue as a problem, IDE does the auto import for me and keeps it collapsed, out of sight, out of mind, and eslint orders it, if there is a need for it.
Idk if it's just me but I totally don't mind the imports, especially with name collisions or some naming similarities.. really useful to see if the function I want to use is actually imported from the lib I want instead of something totally different (happens a lot in our project). I also don't really care about the big block of import at the start of the file.. if you are coding, you won't look up there, if you are searching for something, you will ctrl+f anyway.
@@riddixdan5572 well, in that case it might be, but I've seen import hell more than once. Either taking over a project after people that were trigger happy and decided to import everything that could ever be used in an Angular project, or dealing with very badly documented component imports from an obscure UI Framework that was client enforced... There's a lot of scenarios in which my life would be much improved if I could just ignore the imports part.
I will use it for my nuxt project
i would like to know if svelte still performs better than vue/react
@@thothtrismegistus929 I don't think people use svelte because of performance
but what about the Next one after that?
@@thothtrismegistus929 They perform the same, the difference is in bundle size
@@danvilela do you have some benchmarks?
The entire time I was watching this video I was thinking "wait.... it can't actually be that easy??"
I'd love another video going more in depth on things like pulling in styles and third party components.
What do you mean styles ? You have global stylesheets and each component can receive a scoped tag. Vite supports pre-processors so you have access to PostCSS, SASS, etc...
3rd party libraries are the ugly part of Vue 3 since a lot of librairies aren't compatible anymore and the community isn't updating them fast as of yet. Basically you'll start Vue 3 with an immature ecosystem.
But you don't really need one to begin with, this isn't the "library" React devs are used to, it's a battery included framework.
hi no name
Now that my company is looking to implement SSR and Nuxt into our Vue codebase, this video has been fantastic to help understand their justification for being so pressing about getting it added in in 2023. Those auto-imports look to be absolutely clutch. Thanks!
Looks awesome. A 10 minute video on this would be great.
Yes please
That apifetch function is really interesting. It's rare to see one that implement refresh that way.
And that strongly typed api, that's really awesome
Apollo vue composable basically has the exact same thing for gql its really cool
both swr and react-query have that, they call it mutate
@@Wilpsn Yup
Is it similar to GraphQL?
and so is the component autoimport magic.. x2
A full Nuxt 3 tutorial would be awesome! Thanks for putting this video together, I've been stoked about Nuxt v3 for a while now and it's so great to see it's finally reached RC status. Keep up the great work on these videos, I love your content! :)
I love seeing all the positive feedback on the Nuxt 3 features! I’ve been a Nuxt user for over four years and it’s awesome to see how far the framework has come.
K0k
Thank you ❤
a deep dive into this would be awesome! this looks incredible
🎯 Key Takeaways for quick navigation:
00:01 Nuxt3 *release candidate.*
00:29 Auto *imports magic.*
01:25 Nitro *server engine.*
01:54 Efficient *data fetching.*
02:36 Auto *imports simplicity.*
03:33 Layouts *and routing.*
04:15 Shared *state composable.*
04:41 Strongly *typed API.*
Made with HARPA AI
Thank you Legend! ☺☺☺
CODE REPORT should get a blog. Petition!
Signed by Autumn
Signed by John from tennessee
I agree
signed by the president
signed by sha256
The "And you're left wondering, what do I do Nuxt?" got me 🤣
That sounds really awesome, like the combination of the best parts of some JavaScript frameworks with tons of improvement on top.
I like that you don’t seem too biased when explaining new tools, like diminishing nuxt features bc you like next or something like that
Love this code report! A full Nuxt3 tutorial would be awesome to get a better understanding of all these new features.
Full Nuxt walkthrough would be amazing. It feels very much like an evolution, removing so much redundant actions.
I would like to see a tutorial. The auto import thing reminds me of how Swift handles imports.
Thanks for releasing this. I have been making Nuxt videos for ages trying to show the awesomeness.. Not stopping now :)
im rly excited for when nuxt3 releases! keep it up, and im waiting for a full nuxt3 tutorial as well!
The documentation looks super awesome! Might have to use it with my next project
Really want this to be a full video!
Vue is a really good framework, and nuxt sounds incredible.
I didn't know Nuxt v3 brought so many amazing features. The components being available everywhere is so nice.
I used nuxt 2 and would love to see a full tutorial on the V3 from you
I believe web community is obsessed with "creating new frameworks", What we really need is just a framework which creates frameworks so every single developer can create their own framework and call it supreme. Booom 💥
Yoooo lol this 🔥
Call the framework...lumber. The developers are called...lumberjacks.
and now we are building frameworks recursively
I must say most new framework are in some way better than what we had. Frameworks become easier to use and work faster.
Code is a language. Saying you know English means you can write a poem or write mathematical statements. I agree with you that we should slow down on “hot new frameworks” but part of the constant evolution of language is to adapt. Sort of like if music was MVC and our taste/experiences shape frameworks we write songs in
Thanks for the overview. Awesome! I'd love to see another video (or more) going through the framework! Thanks again.
I'll put this nuxt to the list of frameworks I know, thanks to your 100 seconds videos series
Well said.
DUDE - great summary. We have been using Nuxtjs for healthcare platforms we have built since mid v1. v3 has been eagerly anticipated. Please do a longer form video on Nuxt3 - it has truly been a game changer for us :)
As usual, really nice video. You never disappoint. Nuxt looks really awesome. A more in depth tutorial for Nuxt, would be a nice idea for the nuxt video on your channel.
I'm here in the comments to say I'd love to see a full Nuxt 3 tutorial. Can't wait for your Nuxt video!
love the code report, wouldn't mind getting every 2-3 days
A full nuxt 3 tutorial would be awesome!. Thank you for making this video, I've never heard of nuxt before but now my interest is peaked !
Nuxt's so nice :) I got to try it out for little time but I definitely wouldn't think twice about using it if I needed Vue for a project.
Just started with Nuxt, a full video would be very helpful! This video was very handy already!
I can’t wait for hybrid rendering! It is one of my favorite features of next.js
"And it leaves you wondering, what do you do Nuxt". Brilliant
After seeing this, I am actually feeling more depressed than excited. The list of "next mind blowing framework" in front-end development never stops.
Tbh honest it's not a new Framework, it's just Next's equivalent to VueJS, although one could argue Vue is already a framework and is more opinionated than bare React/CRA ootb.
But yeah one should really stay away from the new shiny thing syndrome
@@heroe1486 Agree. Just one thing, nuxt its really taking things to a new level. The idea of the autoimports and the simplicity of the ssr is just astonishing
Nuxt is not new
I personally dont get why a lot of people feel this way. Yeah, the front end world has constant iteration and new cool things come out all the time... thats great. Thats how it should be. The opposite would be horrible. A stagnant never changing ecosystem is what makes me feel depressed. Cause thats an actual sign that our code sucks and nobody is doign anything important in this space
@@samuelmorkbednarzkepler There's a difference between never changing vs evolving vs changing like crazy. Plus, there's nothing you can do with one framework that can't do with another.
I am working with a colleague on a rather simple single page application and only got to realize how amazing Nuxt really is. I would totally love a full video
On larger projects I feel most of this is better covered with Vite and plugins, a robust microservice backend/custom API, and a cloud based deployment infrastructure (love edge delivery btw). But I'm glad this is getting released, as configuration is tricky and there are many scenarios where you'd want the ease of use Nuxt 3 seems to be able to provide.
Yes please on a more in-depth rundown!
I would be really happy to see another video talking more about nuxt!!
Wow. The auto import feature is something I hope every other framework adopts. It seems like all of the good ideas get adopted when one frameworks does something like Hydration. I'm all for letting the computers do more of the work. SSR looks fantastic. The only thing is the horse race is getting more and more complicated. I want to use the way Svelte or maybe even Astro do certain things. Do you see the auto import making it to other platforms?
I'm a bit skeptic about maintainability of auto-imports. It's what keeps me from getting into e.g. rails. A system where you don't really know where things come from is... scary.
@@joaomatos1420 right click go to definition
Meh normal IDE imports and you can see that.
Never thought of auto imports as a feature. Do people really run into issues with imports?
@@joaomatos1420 Maybe that's a bad idea, but I've seen an approach that lets you import components notmally, or use global ones, stored in a specific folder without imports with a prefix, like
I saw the video, then I decided to right away read the documentation to learn it, then I almost learnt it, then I came back here, then I learnt it
Thank u fireship, u cool
Auto Import was already available on Nuxt 2, you just had to set it up
Wow, this is exciting. Looking forward to your Nuxt3 tutorial!
Please a deeper dive on Nuxt! I recently upgraded a sizable Vue 2 project to Vue 3, and while differences don't seem that big on the changelog, I am realizing just how much of a game-changer Vue 3 is once you start working with it and lean into the ergonomics. And seeing how Nuxt3 is really capitalizing on that makes me eager to play around with it more.
Looks amazing ! Looking forward to the Nuxt Tutorial
Thank you Jeff it would be nice if you do a full tutorial on nuxtjs 3, i have been using v2 for most of my project huge scale projects so it would be nice also if you could indicate the major differences btween v2 and v3
Yes please, I would love a full Nuxt tutorial. - Thanks for all your hard work.
I would really like an in-depth tutorial. I've used Nuxt2 for a long time now and have a deep understanding of it. The problem with Nuxt3 is the documentation isn't fully complete and it leaves some questions.
YES, please a full tutorial, maybe with an ECOMERCE app, to see routing, state management, api calls, plugins. You rock!!!
When I have time, I'm definitively gonna learn vue. At that moment, a full Nuxt tutorial could be preeety useful.
Great video man, keep up the good work!
I'm loving Vue, you'll not regret to learn it!
I would love a full NuxrJS tutorial!
I am using it extensively for my work, and some of the features u just said in 4 minute talking, I have never seen :D
Pretty please
Oh helly yeah! I’ve been a little disappointed with the Vue ecosystem sincs the switch to Vue 3 (it’s been rough), so seeng nuxt as a well developed framework that guides you along the way, that sounds awesome!
I’d really like to see a full tutorial ot Nuxt3 😄
Same! It's motivating me to double down on Vue with Nuxt
I personally think Vue 3 is not just the best improvment I have seen for Vue in a long while but probably the most impressive improvment I have seen happen to any of the major frameworks in my entire career as a frontend coder. Just for the record. So people dont think its generally accepted that vue 3 was a bad improvment. Cause its not. Its super really not
@@samuelmorkbednarzkepler Agreed. But a lot of libraries were missing long after its release, documentation wasn’t the best, and the overall feel of the ecosystem has not been as complete as react for example. I love Vue, and would like to see it thrive, but the transition to vue 3 has been hard. Hopefully a lot of devs will try out Nuxt3 and new libraries will emerge to work with Vue 3.
@@kendedetar I had some trouble right at the start, but that was before Vue 3 was officially out. Vue 3 was acutally not the recomended option until just a few months ago exactly because lots of parts of the ecosystem was lagging behind, most notable vues own library for state management, and the docs needed work.
But I would say that, in the last 9 months at least, I have not had any issues with Vue 3 at all. Its been a great experience. Except maybe the docs being outdated, but that all changed like a month or two ago when they just released the new docs and now thats all great again also.
The only vue 2 spesific libraries that still lags behind are usually UI component libraries like vuetify. Which I think are still working on their Vue 3 version. But I dont really like UI component libraries myself to be honest so that never bothered me in the first place.
Plus Vue 3 composables have opened up a world for much more usefull Vue libraries like VueUse to exist. So the new libraries to Vue I find to actually be a lot more usefull than the old vue 2 ecosystems libraries. For this reason, and almost just off of VueUse alone(which is a great library), I actually feel like the ecosystem for vue is better with vue 3 than it ever was with vue 2 even despite lots of libraries lagging behind to this day. But yeah, if you really like UI component libraries than I guess I can see how it doesnt feel that way.
Or maybe theres some other vue 2 spesific libraries I dont know about. To be honest, I try to stay away from framework spesific libraries in general.
Szia! Szerinted SvelteKitet vagy Nuxt3-at használjak?
I've been waiting for release for so long! Can't wait to start using it
Good video as always, I'd like to see a comparison between this and what other frameworks, such as angular, already provide (besides auto import ofc 🙂)
Definitely would love a full tutorial. Especially with regards to the state mechanism in Nuxt.js thanks for the great video!
I have significant experience with Nuxt2 and I can tell you that most of the times the framework works the way you expect it to, but when it doesn't it's hella pain in the neck to overwrite the default settings. Nuxt2 has let me down a couple of times already, so even though Nuxt3 seems like a great choice for your next web app, please don't let the hype influence your choice, but rather build something small with it, experiment with some edge cases and then decide if that's a right fit for you. Auto imports seem like a bugs' nest.
agreed, I find the documentation quite poor when problems happen
You should have mention "Layers." That is the feature that did it for me. It is an increadible productivity boost.
I'm very sceptical about auto imports, I'm curious to know what others think about it. To me it feels like it "solves" a minor inconvenience, and introduces a whole slew of small issues. Like refactoring. If you update a file name, most IDEs will offer you an option to automatically update import strings across your project. Naming collisions are also an issue.
Honestly I don't mind importing at all, I think it's good to see what has been included from the outside into your file all in a single place, it's maintainable and clear. I currently work on projects where the bundle size is a very small concern, and we still opt to import components instead of registering them globally, because I don't think global registering is a clear way to go about it. And auto imports feel like global registration...
I personally think the concerns you mentioned are minor conserns that wont cause me more issues then a warning every now and again while the "minor" inconvencince as you described it of having to write a bunch of import statments every time I want to make a new component is actually not a minor inconvenience at all. Its a massive inconvenience. Ultimatley I would much rather spend 1 min fixing a naming colition once or twice per project then spend an 5 minutes writing import statments every time I write a new component only to then spend the rest of the time with the project having to scroll past 24 lines of import statements every time I want to find the actual code in the component. Having this be auto importet sounds like a massive increase in my development speed and code readability. By reducing code clutter my stamina for coding long hours probably also increases. Also it will liley make me a better coder too because I might make me more willing to modularise my code. This just because I dont have to struggle with the mental hassle of thinking "oh. boy. I should probably make this into a seperate component but the thought of mentally having to sort out all the import statments is bumming me out right now so id rather just say fuck it and continue to put that off for a while." Which is something that actualyl happens quite often. I saw the same thing happen when Vue released the composition API. Because there was much less lines of code I had to write upfront to make a new component I found myself being much more willing to write new components since it was less of a mental hurtdle to do so. I think auto imports probably achievethe same effect. The less effort I have to make in order to organize my code the more often will I end up atually doing so when Im working. Espesially when im already tired.
@@samuelmorkbednarzkepler That's fair I respect that, programming is a lot more a social and personal preference influenced than people make it out to be. (Not aimed at you specifically)
For example a lot of people like that Python doesn't have curly braces, I personally think it hurts readability pretty bad for instance.
As for imports, they're always collapsed for me, so I don't scroll over them, and my auto completion finds most of my imports, so that's why I enjoy the benefits they bring, being able to see what is actually defined from the outside, or right clicking and checking out their file. There's more factors than development speed for me, it's about maintain ability and clarity, and imports provide that for me, but I would argue also for my team.
Auto import, to me, seems like registering globally so you don't need to import, and globally imported stuff in my experience, spawns a wild growth of not knowing where something is defined and naming collisions.
But to each their own! I see this feature is opt-in so every team can decide themselves what they prefer in the end. I say for prototyping and small apps this is definitely the way to go
@finance what problems did you have?
I've been using Vuetify which has its own loader that auto register Vuetify components globally. Together with Vue's global component registration mechanism, it's a tradeoff between dealing of using import solutions provided by a framework versus handling import of every component by yourself. Personally, the former gives more convenience, but I can see that clarity is important, too.
@konqi I knew this would tick off some python enthusiasts haha, you picked quite the example, yes that is definitely a real world use case :p! With sufficient nesting and many lines on each block, I personally think it becomes hard to see which blocks were "closed" down the line, especially if you go multiple indentations back/in.
Let's just say I think the opening syntax doesn't add much, but the closing syntax definitely helps readability, for me at least.
I agree for small code it's all fine. In fact I prefer to use Stylus as my css preprocessor because it gets rid of curly braces and any other excessive symbols.
But I don't think this extends over to programming, styling is very different and way simpler (basically a handful of Key:value that's it).
But as I mentioned in one of the replies, programming is far more personal preferences and social when looking at small stuff like auto imports or curly braces. But I do think curly braces hold a lot of ground given most newly made programming languages still use them, or something like them (like end in julia, elixir). They have the option not to, they're often compiled languages and can easily assert, but they choose not to do so for readability
4:50 "I will see you in the NUXT one". THAT WAS EPIC ENDING :D
Full Nuxt tutorial vote count! 👇
4:02 what is doing? I thought the component only makes sense inside a layout component..?! Secondly, 4:18 - if Nuxt provides something like this, why would it still be necessary to use Pinia? (something like Vuex)
we really need a tutorial from you please!
Yezzz, a full tutorial please. This nuxt 3 looks really amazing. I've only been working with reat so far and I wanna learn/move on to vue too. And this looks really fun
Auto import is great but can cause to write long components name to reduce name collision which can be Hectic.
And As a nextjs ❤️ developer file based routing and ssr already making my life easy Though nuxt looks cool 😎
Maybe you can avoid name collision by nesting components in directories like /components/Navbar/List.vue.
Then use it like this:
You meant "See you in the Nuxt one" ? SUPERB quality video as always!
I went from Next to Nuxt and had a really hard time going back to Next for a different client project. There's a lot of great DX in Nuxt (and Vue tbh).
Yeah, I agree.... I went from Nuxt to Next, and it wasn't as good🤦🏻♂️
big disagree
@@NZIsaacNZ Why?
I've really enjoyed using NextJS. I tried learning Vue but I don't like how the page is templated. Vue has some really great things like a redux type state management but you can get away without using that for most things. I truly like the way React handles it's components in regards to layout.
Are you using nuxt 3 ? If yes, are you using it for production?
Always great videos. I would love to see a full Nuxt tutorial. Keep up the amazing work!
All it needs is the update of Content V2 (within a month), and Nuxt will reclaim its position as the best option for easy, fast, and feature-rich web development and documentation. 😋
I've been in the Nuxt space for the past 3 years. I'd REALLY appreciate and find value in a Nuxt 3 tutorial. Thanks.
There are some interesting features here which I really like the look of, but as someone who has a lot of Vue 3 experience, I think a lot of the features which are being sold as Nuxt features in this video are just Vue 3 features.
I am aware the Jeff mostly has experience with React but I think for anyone new to Vue ecosystem, they should check out the base framework first (especially for small/medium projects).
I would love to see more Vue content on this channel but maybe focus on the core framework first! :P
Tutorial please!! This looks really useful and I'd love to know how easy it is to implement within existing or ongoing projects
Docs
I like that frameworks take good stuff from eachother and actually compete to be "the best" one.
The next framework will be...English.
Fuck the rest, this is the best :D.
As a PHP developer, finally I can move into the JS world with Nuxt. I fell in love.
I’ll be honest I think imports are a good thing. At least that way you know where things are coming from. With no imports a new person working on the code will have no idea where anything is or where things are coming from. It becomes difficult to differentiate between built in components and newly made ones
I agree. I so often scroll to the top of the file just to click through to the file in VSCode.
Easy fix would be to allow adding the imports to the top of the file if so desired so any one taking a look at the code and wants imports can just use a command or button in an IDE and imports are added.
No bro, the auto imports is only for pre defined folders (like components). It really helps. For every other thing you need to import. In other words, you always knows where it comes from.
F12 tho
Would comments at the top work?
See on the nuxt one!! Will be waiting for full tutorial!
Approach Nuxt with caution. If you are considering adopting it for production I would suggest building a pretty detailed test case first.
I’ve developed a full multilingual booking management system on a previous version of Nuxt.
It seems super approachable at first (it is, the first few weeks are lovely) and you get started so quickly! The issue is the edge cases. As soon as you get near the edges of its capabilities you will find that lovely documentation abruptly stops and you will spend all your days sorting through other peoples spaghetti to try and do basic things.
I did our next project in React. Sure there is a slower start and less ‘magic’ but in the end less ‘magic’ means less undocumented spaghetti.
We had the exact same issue. I think Nuxt and Next work for certain types of projects but they haven't been the projects I've been working on. All of the "magic" is great until it isn't...
This 'magic' is what simultaneously attracts me to and then turns me off of Rails for Ruby
Since I have started working with Nuxt, I have been surrounded by many creative ideas. Having Nitro and building APIs within your SAP is just pure magic.
Auto importing is an anti-feature that hinders readability.
"What files does the current module depend on?" Is a question answered directly by the first part of a js file.
It's almost a contract saying "if you know about the following imported functions then you can read this file fine".
It can even be a hint when fixing a bug, optimizing, etc.
I can see how it "could be" convenient but I'd prefer the inconvenience of spending 20s or so managing imports on my own (espescially when linters and other tools further simplify this process)
FYI you can still explicitly import items if you want to do it like that. I was anti-auto import too, but the more I use it the more I prefer it.
@@1dosstx the problem is that it's a default behaivor meaning that it doesnt really matter what my preference is, I have to follow whatever the project has declared is their style.
Also, I looked on the extension store for vsc to see if there was some nuxt plugin to show imports for a file somehow but that didnt seem to be supported by any I saw at a glance. The functionality I described would be critical for me to work in this ecosystem
Interesting!!
Hope a new video is made, really excited to know more about NUXT :D
i would love to see a 100secs vid about nim
That will happen eventually
Nim what's nim lol
Was waiting for this before embarking on my own personal project. Can not wait for the full release, they're doing gods work over there.
The auto import might be a deal breaker for me. In really large enterprise applications this could be a huge pain. I also found it interesting that a lot of the functions appear like React hooks. Overall it looks like a great framework and I do believe you could move fast building with it, but if given the choice between Nuxt and Next - I’m choosing Next every time.
FWIW you can continue to import manually and things will still work - I think you might be able to turn the feature off entirely if you want.
You can turn it off. But if naming conflicts are an issue, you are probably naming things wrong. And also what is the reason you would choose Next? You didn't say.
Yes, please! Full Nuxt tutorial would absolutely incredible 🙃
Been on the Angular/NestJS for a long time. Nuxt is probably the first that seems really sweet to me for a long time.
I've used auto imports in another platform though for about 4 years now, I personally don't like it; too much magic going on under the hood and you lose a lot of quick visibility when opening up files. For example when I open an angular component or service I can quickly know what files are being used in that component, overall architecture, how I might make thing's more modular going forward etc etc; with files that everything is just auto imported you have to dig into the file to see what is actually being used and kinda hold it in your head how you might split up responsibility of files, etc etc.
Awesome video! Would love a longer video 😃
Bro... That's so awesome, also the auto-imports should be a default js feature 😭
No it definitely shouldn't be
I was thinking about this auto import feature in react just yesterday and here you are with this video
"Okay no imports is cool but I can live without it"
one minute later: "yea I mean that "pick" is pretty cool, so is "refresh" but it's a lot of new stuff to learn..."
two minutes later: "Friendship with React ended, time to go learn Vue and Nuxt"
I absolutely would like a Nuxt tutorial now.
i would love a full nuxt3 video ! i use nuxt 2 and the new features in nuxt 3 look awesome
Super interesting, I’ve just started using Vue a few months ago and this sounds great!
Would this work with something like capacitor to make iOS apps?
It seems possible with a custom plugin.
yeap, if nuxt3 allow us to work painlessly with capacitor, our life will complete, I already built an app using nuxt2 but most of UI library wants vue3, now I'm stuck in limbo waiting for nuxt 3
@@amiruladli8057 you can already use nuxt3. The core is ready and pretty much stable
Bro, I want this tutorial so badly, nice video!
Can we all agree to take a break for a few months while I learn all these new technologies?
Why would you learn them all? Knowing 1 or 2 extremely well is better than learning 10 and not knowing them enough
@@IvanRandomDude that's a good observation
Definitely make a tutorial, I beg you! I am making my portfolio with Nuxt3 and am very excited about it. Keep up the awesome work!
Nuxt2 is good
Nuxt3 is not good(now)
So my team just change to use vite + vue3 and feel good now.
same
Same
This looks awesome! Please do continue!
The auto import thing is pretty impressive. And layouts look amazing too. Love it! I do imagine it is just a matter of time before these features arrives at other frameworks and libraries.
But that thing where you have the server code in a block in the same place as the front end code? Yeah, we old people can remember when that was a common thing, specifically in the PHP 4-5, era. You had code that runs on the server within the php block, and beneath it the html and js for the front end. And it was an absolute nightmare. Maybe I'm missing something here, but I don't know who thought that re-introducing it is a good idea.
I guess that's just the way of the world, the wheels just keep going round and round. In a couple of years it will be considered an anti pattern. Again.
But like..... you don't need to use it if you don't want?????
I have already use nuxt 2 for my Project.
Looking forward for your full tutorial on nuxt3