Nuxt Explained

Рет қаралды 25,886

11 ай бұрын

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

@atinux 11 ай бұрын

Thank you for making this video

@awesome-coding 11 ай бұрын

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!

@KiwiAndCurry 11 ай бұрын

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!

@Anonim27121996 11 ай бұрын

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-coding 11 ай бұрын

Thank you for the feedback!

@soundrightmusic 11 ай бұрын

the transition from 2-3 wasn't smooth especially since it lagged behind vue 3 by almost a year.

@ABHISHEK-jc8kn 11 ай бұрын

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-coding 11 ай бұрын

I think this is the story of Vue in general - great framework but it isn'r React or Angular.

@ABHISHEK-jc8kn 11 ай бұрын

@@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

@ibrahimmohammed3484 11 ай бұрын

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

@uziboozy4540 11 ай бұрын

Use Qwik instead

@geezgus 8 ай бұрын

frontend components can't handle top level await statements

@ricardocnn 10 ай бұрын

Best DX , great performance and super complete ecosystem. I love work with Nuxt

@awesome-coding 10 ай бұрын

Couldn't agree more!

@hamm8934 11 ай бұрын

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.

@mikopiko 11 ай бұрын

What's vapor mode?

@mikopiko 11 ай бұрын

@@hamm8934 Oh cool!

@drizzletone9148 11 ай бұрын

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.

@svnbit8408 10 ай бұрын

@@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.

@neneodonkor 8 ай бұрын

@@mikopiko it is a mode whereby the compiler is removed in production; sort of a zero runtime mode.

@TheGamingMaik 11 ай бұрын

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..

@PierreChevallier 11 ай бұрын

Wow I've never tried Nuit but it seems so simple to use, might try it out

@awesome-coding 11 ай бұрын

You should!

@tawsifhaque9360 Ай бұрын

what's the font used in the snippets?

@drizzletone9148 11 ай бұрын

Nuxt is simply the best metaframework out there. The DX is out of this planet :)

@soundrightmusic 11 ай бұрын

Yes more Vue/Nuxt

@dinhub 11 ай бұрын

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-coding 11 ай бұрын

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

@mikopiko 11 ай бұрын

Coming from Vue 2, I am still curious to what Nuxt exactly is for? Is it the fullstack version of Vue?

@rajmajumdar5253 11 ай бұрын

Yes

@awesome-coding 11 ай бұрын

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.

@mikopiko 11 ай бұрын

@@awesome-coding Thanks

@fdimb 11 ай бұрын

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.

@greendsnow 11 ай бұрын

does solid have good ui libraries?

@fdimb 11 ай бұрын

@@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)

@imranabubakar5360 8 ай бұрын

Vapor is coming to Vue.

@AngelHdzMultimedia 5 ай бұрын

Vapor Mode 🎉🔥💚

@reubenjunior512 11 ай бұрын

At least you are now showing love to Vue JS & its eco system

@awesome-coding 11 ай бұрын

Well you Vue guys were putting a lot of pressure on me :))

@micelumail5829 11 ай бұрын

8:30 should be until nuxt time

@awesome-coding 11 ай бұрын

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-coding 11 ай бұрын

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-coding 11 ай бұрын

@@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!

@svenyboyyt2304 10 ай бұрын

7:42 use computed instead of setting a ref in a watcheffect and use the nuxt navigation instead of setting window.location.href

@awesome-coding 10 ай бұрын

Good point! Thanks!

@luczztem 11 ай бұрын

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.abc123 11 ай бұрын

I left Vue during the v3 migration, it was not easy to leave because Nuxt was so great

@awesome-coding 11 ай бұрын

Yep - the migration to v3 was painful all around

@allan_archie 11 ай бұрын

I told you so, also you can use demo or bun easily. Not just node.

@awesome-coding 11 ай бұрын

Yep! Being able to run this in Deno is also a great benefit, so good point!

@kakun7238 11 ай бұрын

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-coding 11 ай бұрын

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.

@ziat1988 11 ай бұрын

how about sveltekit ? Any idea?

@awesome-coding 11 ай бұрын

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.

@namaefumei 11 ай бұрын

Nuxt one was good, Nuxt 2 was just great and Nuxt 3 is something very different but the best in my opinion.

@guilhermenunes3130 10 ай бұрын

you should do a video on SolidStart when it hits 1.0 ;)

@awesome-coding 10 ай бұрын

I'll do one for certain - I'm a big Solid fan.

@0xirfs 11 ай бұрын

after watching this i fell like going out from cave

@awesome-coding 11 ай бұрын

😂 What's your usual tech stack?

@hicoop 11 ай бұрын

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-coding 11 ай бұрын

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 🥲

@Kingside88 11 ай бұрын

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.

@hamm8934 11 ай бұрын

Wdym, it has nuxt auth which is a complete wrapper of next auth?

@sevindis 11 ай бұрын

Nuxt 3 is fairly new, I'm pretty sure we'll see an auth library soon.

@hamm8934 11 ай бұрын

@@sevindis they already do, nuxt auth is a complete wrapper of next auth

@Kingside88 11 ай бұрын

@@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_decoded797 11 ай бұрын

Nuxt auth for sidebase is buggy sometimes but you need the newer version. Version 5 works perfectly.

@JeanDidier 11 ай бұрын

Where's the source code of this?

@anj000 11 ай бұрын

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 ;) )

@sania3631 10 ай бұрын

There's Pinia for state management. I use it a lot.

@eotikurac 10 ай бұрын

what do you mean? it works great for 0.001% of people. just kidding, nuxt is garbage. the whole industry is rotten.

@papajohnsuk5965 11 ай бұрын

Lots of bugs surrounding the ecosystem put me off nuxt in new projects. It's great though & I love the devtools

@awesome-coding 11 ай бұрын

Sorry to hear that! Any major issues in particular that you ran into?

@greendsnow 11 ай бұрын

@@awesome-coding even installation is buggy.

@mikhalpalych 11 ай бұрын

7:38, i'm wondering if watchEffect going to be triggered when movies.value is reassigned or not?

@TodorescuProgramming 9 ай бұрын

where is the github?

@awesome-coding 9 ай бұрын

Sorry - no github on this one :(

@DuongLe-em4dg 11 ай бұрын

It surprises me, with a bunch of errors

@awesome-coding 11 ай бұрын

😂 well... you were surprised and this is what really matters.

@destroyer-tz2mk 10 ай бұрын

My main problem with nuxt is that the docs are bad

@awesome-coding 10 ай бұрын

Interesting. I felt they were decent enough, at least for somebody who jumps into the project for the first time.

@zjelco 11 ай бұрын

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-coding 11 ай бұрын

😅 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.

@ronssijei 7 ай бұрын

Nuxt3 is so buggy.

@awesome-coding 7 ай бұрын

I'm hearing this quite a lot. What are the bugs you run into?

@mosomiliardaru 11 ай бұрын

still doesnt beat vanilla js and plain html and css

@awesome-coding 11 ай бұрын

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.

@saadahmed688 11 ай бұрын

And that still doesn't beat writing web assembly by hand smh

@eotikurac 10 ай бұрын

you lost me in the first minute, bro.

@awesome-coding 10 ай бұрын

sorry to hear that

@standroads 7 ай бұрын

No, it is not, U can't handle, Cookies without pain... 🤬

@greendsnow 11 ай бұрын

Weak and buggy ecosystem ornated by over-optimizations in strange areas. Even Svelte is better now.

@englishaccount4016 11 ай бұрын

nuxt sucks compared to sveltekit and nextjs, they are always so behind and so unnecessary complex

@greenlines1208 11 ай бұрын

i disagree its so beautiful

@hamm8934 11 ай бұрын

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.

@yegorzakharov8514 11 ай бұрын

@@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.

@hamm8934 11 ай бұрын

@@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.

@sevindis 11 ай бұрын

Nope, try Nuxt 3, much simplier that Next.