A quick look at NuxtJS. 💬 Topics: - VueJS Meta Framework; - Advantages of Nuxt; - What is the Composition API; - Tailsind CSS and Daisy UI; - Building full stack apps with Nuxt; - Rendering and performance. #javascript
Пікірлер: 107
@atinux11 ай бұрын
Thank you for making this video
@awesome-coding11 ай бұрын
Hey, Sébastien! Thanks for all the work you put in into Nuxt! Would love to chat sometimes and make a Nuxt video based on your story and lessons learned!
@KiwiAndCurry11 ай бұрын
Nuxt is such a pleasure to work with, I can focus on creating and not fighting with the framework 🎉. Such a rich ecosystem with unjs/modules!
@Anonim2712199611 ай бұрын
We just ported a large application from nuxt 2 to nuxt 3. Going from the options api to composition api. In general nuxt 3 is really fun to work with. It has a lot of advanced options. It's not all great tho. The build times add up if you have a lot of components. A lot of nuxt modules weren't ready for production yet, so expect to write some custom nuxt plugins to integrate the vue 3 plugins. Nuxt 3 has improved a lot since its initial release.
@awesome-coding11 ай бұрын
Thank you for the feedback!
@soundrightmusic11 ай бұрын
the transition from 2-3 wasn't smooth especially since it lagged behind vue 3 by almost a year.
@ABHISHEK-jc8kn11 ай бұрын
Nuxt js far ahead of its time. The only reason i believe it isnt so widely accepted is that its not a meta framework of react. The dx is great, it lets us go out of the way in many ways when needed. But there are fewer libraries compared to js ecosystem. Clerk and framermotion are some major examples
@awesome-coding11 ай бұрын
I think this is the story of Vue in general - great framework but it isn'r React or Angular.
@ABHISHEK-jc8kn11 ай бұрын
@@awesome-coding exactly. Ive found a way to make autoimports work on nextjs tho. Nuxt state management is still much ahead of its time tho. Playing with the framework and legend state manager to simplify that
@ibrahimmohammed348411 ай бұрын
I was first using nuxt since 2019 or something and it was flawless but i wanted to move to react but then nextjs was really away behind nuxt and i think it's still especially in navigation and data fetching section
@uziboozy454011 ай бұрын
Use Qwik instead
@geezgus8 ай бұрын
frontend components can't handle top level await statements
@ricardocnn10 ай бұрын
Best DX , great performance and super complete ecosystem. I love work with Nuxt
@awesome-coding10 ай бұрын
Couldn't agree more!
@hamm893411 ай бұрын
NuxtJS is far ahead of any other meta framework, it’s not even close. Nextjs is only now starting to enter the arena of data fetching with server components that might be on par with nuxt. Nuxt’s dev tools make using any other framework feel like the Stone Age. They make debugging so fast. Also, once vapor mode gets released for Vue later this year, I see little benefit of svelte over Vue since Vues compiler will likely be on par or faster than svelte’s. I switched to Vue for personal projects at the start of Vue3 beta and I really haven’t ever found anything quite like it. It’s fast. Portable (can serve over CDN with no build step). Completely native JS, HTML, and CSS. And has a far more seasoned user on average, which I find leads to far better answers on stack overflow than say react or svelte, which draw in newer developers.
@mikopiko11 ай бұрын
What's vapor mode?
@mikopiko11 ай бұрын
@@hamm8934 Oh cool!
@drizzletone914811 ай бұрын
Completely agree with anything you said. The DX for Nuxt and Vue in general is out of this world and no single framework can compare to this.
@svnbit840810 ай бұрын
@@hamm8934is that at all similar with how qwik serializes code for resumable, or for "reactivity"? Not sure how the two may differentiate. That being said, does htmx do the same thing since it won't have to hydrate full pages of code and just what's needing to be rendered? I noticed astro (which was essentially framework agnostic I thought, is utilizing htmx now, so before I was thinking templating in Vue using astro might be more performant than nuxt itself, and I wouldn't have to bother with jsx and react as a base framework to learn while learning JavaScript. It seems both qwik and astro now seem to favor the react/jsx stuff. Any thoughts on this? I really thought qwik had something unique as a paradigm, but I'm not sure how other frameworks approach that or overlap in anyway. The nuxt/Vue dx seems more intuitive to me however the way qwik works and htmx works, was how I thought the web worked as far as fetching data it just seemed logical.
@neneodonkor8 ай бұрын
@@mikopiko it is a mode whereby the compiler is removed in production; sort of a zero runtime mode.
@TheGamingMaik11 ай бұрын
Something that nuxt also does great is providing low level access to the node server (nitro), easy low config modules that are plug and play. Typescript Integration is also very cool. And auto imports..
@PierreChevallier11 ай бұрын
Wow I've never tried Nuit but it seems so simple to use, might try it out
@awesome-coding11 ай бұрын
You should!
@tawsifhaque9360Ай бұрын
what's the font used in the snippets?
@drizzletone914811 ай бұрын
Nuxt is simply the best metaframework out there. The DX is out of this planet :)
@soundrightmusic11 ай бұрын
Yes more Vue/Nuxt
@dinhub11 ай бұрын
Good job. I would like to see some dart content on your channel like Serverpod or Dart Frog or Flutter. You may compare it with javascript, it would be interesting to see your point of view.
@awesome-coding11 ай бұрын
Thanks for the idea! I have limited experience with Flutter, but I'll spend some time on it to better understand that space. I know people are excited about it.
@TechBuddy_11 ай бұрын
I do flutter development and I can assure you dart is not even close in the backend space to express or something. Flutter is very cool and I love it but is not the best for normal web aites. If you have something like Google sheets then go ahead and use flutter
@mikopiko11 ай бұрын
Coming from Vue 2, I am still curious to what Nuxt exactly is for? Is it the fullstack version of Vue?
@rajmajumdar525311 ай бұрын
Yes
@awesome-coding11 ай бұрын
Yep - it's what they call a meta-framework. Meaning it uses a NodeJS (or some other variation) on the backend to provide both SSR (server side rendering support), and Backend API support so that your Vue app can communicate with the backend services via REST, but by sharing the same codebase and the same types.
@mikopiko11 ай бұрын
@@awesome-coding Thanks
@fdimb11 ай бұрын
I hope there'll be a way to make Vue component's updates as fast as Solid's signals, as Nuxt seems to be way ahead of all the other meta frameworks in terms of features, speed and developer experience.
@greendsnow11 ай бұрын
does solid have good ui libraries?
@fdimb11 ай бұрын
@@greendsnow To an extent, Kobalte is pretty good, you can also use things like UnoCSS (my favorite over Tailwind for sure) which includes some presets, included DaisyUi's ones. I wonder how Vue's Vapor Mode will compare in terms of performance, that'd be a deal breaker for it unless you want a React-like experience (Solid)
@imranabubakar53608 ай бұрын
Vapor is coming to Vue.
@AngelHdzMultimedia5 ай бұрын
Vapor Mode 🎉🔥💚
@reubenjunior51211 ай бұрын
At least you are now showing love to Vue JS & its eco system
@awesome-coding11 ай бұрын
Well you Vue guys were putting a lot of pressure on me :))
@micelumail582911 ай бұрын
8:30 should be until nuxt time
@awesome-coding11 ай бұрын
Damn.. you are right! Missed a great opportunity for a quality pun 😅
@TechBuddy_11 ай бұрын
I love the idea of nuxt and its pretty amazing but I have decided to die on the sveltekit hill and I don't want to change 😅 svelte 6 is getting absurdly fast ( almost as fast as native ) so awesome dx, all js libs work out of the box, the stores system is simple but very good. It's a little lacking in the server side stuff when compared to nuxt but I hope we will get there. Wow! Enough shilling svelte for today lol 😂 I am only using sveltekit and astro nowadays. If the team knows react I go with astro but if anything else is fine sveltekit it is no questiona asked and no tradeoffs to think about ( maybe a bad choice but I've seen so much happening in the web space in my career and I don't care anymore ) Edit: I am f**ing loving the new editing style and the audio ❤
@awesome-coding11 ай бұрын
Hey! I was looking for your comment today - you were pretty late on this one! 😂✌️
@TechBuddy_11 ай бұрын
@@awesome-coding you know timezones and shit and I was very busy today ( we are doing a pretty big refactor rewrite thing ) I am sorry 🙂 Edit: I would love to chat with you some day. I want friends like you. This is non transactional and I expect nothing from you ( had to clarify this cuz people do that sadly )
@awesome-coding11 ай бұрын
@@TechBuddy_ Haha no worries! I posted this one at an odd hour because of my schedule. Sure thing - feel free to reach out via DM on Insta or on Twitter at any time!
@svenyboyyt230410 ай бұрын
7:42 use computed instead of setting a ref in a watcheffect and use the nuxt navigation instead of setting window.location.href
@awesome-coding10 ай бұрын
Good point! Thanks!
@luczztem11 ай бұрын
sicerely, there's nothing better than SvelteKit... it does everything the other frameworks do, but with more elegancy and simplicity... lmao I'm a svelte witness xD
@buddy.abc12311 ай бұрын
I left Vue during the v3 migration, it was not easy to leave because Nuxt was so great
@awesome-coding11 ай бұрын
Yep - the migration to v3 was painful all around
@allan_archie11 ай бұрын
I told you so, also you can use demo or bun easily. Not just node.
@awesome-coding11 ай бұрын
Yep! Being able to run this in Deno is also a great benefit, so good point!
@kakun723811 ай бұрын
documentation is just a bit lacking and the changes from vue 2 to 3 and also nuxt 3 its just a bit difficult to learn and switch from react to next
@awesome-coding11 ай бұрын
I agree - I spent quite a bit of tie in the Vue world recently, and the amount of libraries that work in Vue 2, but "kind of work" in Vue 3 is depressing.
@ziat198811 ай бұрын
how about sveltekit ? Any idea?
@awesome-coding11 ай бұрын
I have SvelteKit video posted more than a year ago (kzfaq.info/get/bejne/g5mXo5BznZfRaZ8.html). The quality is not the best on this one, so I'm planning to create a follow-up video on the topic.
@namaefumei11 ай бұрын
Nuxt one was good, Nuxt 2 was just great and Nuxt 3 is something very different but the best in my opinion.
@guilhermenunes313010 ай бұрын
you should do a video on SolidStart when it hits 1.0 ;)
@awesome-coding10 ай бұрын
I'll do one for certain - I'm a big Solid fan.
@0xirfs11 ай бұрын
after watching this i fell like going out from cave
@awesome-coding11 ай бұрын
😂 What's your usual tech stack?
@hicoop11 ай бұрын
I learned svelte and rewrote my react project. I learned sveltekit and rewrote the expressjs part of the project. I learned typescript and rewrote the whole project again. Then I learned sass and rewrote the styling. I just learned tailwind and rewrote the css again. Why is web development just rewriting ;-;
@awesome-coding11 ай бұрын
Hey! One would argue that a React + CSS project, where all dependencies are dependencies are up to date is still a modern, competitive stack, and your project would have been just fine written in those. If you keep rewriting the project, the problem might be you 😅 I'm telling you this because I have the same problem 🥲
@Kingside8811 ай бұрын
nuxt is great but has a lack of basic modules like authorization. nuxt 2 had a great module but for version 3 you have buggy solutions from sidebase. I personally switch now to blazor. Which is also bad at some point.
@hamm893411 ай бұрын
Wdym, it has nuxt auth which is a complete wrapper of next auth?
@sevindis11 ай бұрын
Nuxt 3 is fairly new, I'm pretty sure we'll see an auth library soon.
@hamm893411 ай бұрын
@@sevindis they already do, nuxt auth is a complete wrapper of next auth
@Kingside8811 ай бұрын
@@sevindis At November 2022 it's anounced as stable. I don't know if calling it new is right. The thing is, many of the libraries care about microperformance but forget the basic stuff.
@universe_decoded79711 ай бұрын
Nuxt auth for sidebase is buggy sometimes but you need the newer version. Version 5 works perfectly.
@JeanDidier11 ай бұрын
Where's the source code of this?
@anj00011 ай бұрын
I'm stuck on a project using Nuxt 2 and honestly I hate it. We are using composition api (backported to Vue 2) and it is sooo easy to shoot yourself in the foot with that architecture. I don't really understand why people abandoned central state management like Vuex in favor of composables. It is very easy to make app with hideous performance and many SSR problems. Whole project is just a mess, and it is the second time I'm on a project with that tech-stack and both of this project have the same problems (they were already in place when I joined if you wondering ;) )
@sania363110 ай бұрын
There's Pinia for state management. I use it a lot.
@eotikurac10 ай бұрын
what do you mean? it works great for 0.001% of people. just kidding, nuxt is garbage. the whole industry is rotten.
@papajohnsuk596511 ай бұрын
Lots of bugs surrounding the ecosystem put me off nuxt in new projects. It's great though & I love the devtools
@awesome-coding11 ай бұрын
Sorry to hear that! Any major issues in particular that you ran into?
@greendsnow11 ай бұрын
@@awesome-coding even installation is buggy.
@mikhalpalych11 ай бұрын
7:38, i'm wondering if watchEffect going to be triggered when movies.value is reassigned or not?
@TodorescuProgramming9 ай бұрын
where is the github?
@awesome-coding9 ай бұрын
Sorry - no github on this one :(
@DuongLe-em4dg11 ай бұрын
It surprises me, with a bunch of errors
@awesome-coding11 ай бұрын
😂 well... you were surprised and this is what really matters.
@destroyer-tz2mk10 ай бұрын
My main problem with nuxt is that the docs are bad
@awesome-coding10 ай бұрын
Interesting. I felt they were decent enough, at least for somebody who jumps into the project for the first time.
@zjelco11 ай бұрын
Brother. I like your informative video but please don’t change your emphasis on the last word in almost every sentence! It gets very annoying to listen to.. or am I the only one noticing this?
@awesome-coding11 ай бұрын
😅 Some of you guys are mentioning this - so you are not the only one. The problem is, when I'm not doing that, my voice tone is naturally rather flat and "boring", and even more people are complaining in the comments. So this is my attempt in bringing a bit of life to the voiceover, but I agree I'm not the best at it 🥲 I'll keep working on it.
@ronssijei7 ай бұрын
Nuxt3 is so buggy.
@awesome-coding7 ай бұрын
I'm hearing this quite a lot. What are the bugs you run into?
@mosomiliardaru11 ай бұрын
still doesnt beat vanilla js and plain html and css
@awesome-coding11 ай бұрын
Yea, but you'll need some server integration to achieve all the SSR, routing and hydration at lease. You'll definitely put in more hours on a vanilla stack.
@saadahmed68811 ай бұрын
And that still doesn't beat writing web assembly by hand smh
@eotikurac10 ай бұрын
you lost me in the first minute, bro.
@awesome-coding10 ай бұрын
sorry to hear that
@standroads7 ай бұрын
No, it is not, U can't handle, Cookies without pain... 🤬
@greendsnow11 ай бұрын
Weak and buggy ecosystem ornated by over-optimizations in strange areas. Even Svelte is better now.
@englishaccount401611 ай бұрын
nuxt sucks compared to sveltekit and nextjs, they are always so behind and so unnecessary complex
@greenlines120811 ай бұрын
i disagree its so beautiful
@hamm893411 ай бұрын
Could you explain more other than just giving a random opinion. I switched back to nuxt from sveltekit since Vue is so much more portable and straightforward (no new JavaScript environment to learn). Also, once vapor mode gets released later this year, I really see no benefit of using svelte since Vue’s compiler will be on par if not faster.
@yegorzakharov851411 ай бұрын
@@hamm8934 I agree, but in many ways, svelte is closer to pure js. There is simply less abstraction for the most part, and is more efficient. Less wrappers. Vue is for the phenomenal reactivity system.
@hamm893411 ай бұрын
@@yegorzakharov8514idk Vue’s composition API with script setup is nearly line for line identical to svelte, only that it is actually completely valid JS that could even be served over CDN without a build step. Svelte is great, but I really don’t buy that it’s any more simple than Vue’s composition API.
@sevindis11 ай бұрын
Nope, try Nuxt 3, much simplier that Next.
@hipertracker6 ай бұрын
npx nuxi@latest init awesome is not creating all those folders