Nuxt Explained
Vložit
- čas přidán 10. 08. 2023
- 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
Thank you for making this video
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!
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.
Thank you for the feedback!
the transition from 2-3 wasn't smooth especially since it lagged behind vue 3 by almost a year.
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!
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
I think this is the story of Vue in general - great framework but it isn'r React or Angular.
@@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
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
Use Qwik instead
frontend components can't handle top level await statements
Best DX , great performance and super complete ecosystem. I love work with Nuxt
Couldn't agree more!
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.
What's vapor mode?
@@hamm8934 Oh cool!
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.
@@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.
@@mikopiko it is a mode whereby the compiler is removed in production; sort of a zero runtime mode.
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..
Wow I've never tried Nuit but it seems so simple to use, might try it out
You should!
Nuxt is simply the best metaframework out there. The DX is out of this planet :)
what's the font used in the snippets?
At least you are now showing love to Vue JS & its eco system
Well you Vue guys were putting a lot of pressure on me :))
Yes more Vue/Nuxt
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.
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.
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
Coming from Vue 2, I am still curious to what Nuxt exactly is for? Is it the fullstack version of Vue?
Yes
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.
@@awesome-coding Thanks
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.
does solid have good ui libraries?
@@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)
Vapor is coming to Vue.
Vapor Mode 🎉🔥💚
how about sveltekit ? Any idea?
I have SvelteKit video posted more than a year ago (czcams.com/video/M3gp-B81m9k/video.html).
The quality is not the best on this one, so I'm planning to create a follow-up video on the topic.
I left Vue during the v3 migration, it was not easy to leave because Nuxt was so great
Yep - the migration to v3 was painful all around
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 ❤
Hey! I was looking for your comment today - you were pretty late on this one! 😂✌️
@@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 )
@@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!
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
7:42 use computed instead of setting a ref in a watcheffect and use the nuxt navigation instead of setting window.location.href
Good point! Thanks!
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
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.
8:30 should be until nuxt time
Damn.. you are right! Missed a great opportunity for a quality pun 😅
you should do a video on SolidStart when it hits 1.0 ;)
I'll do one for certain - I'm a big Solid fan.
Where's the source code of this?
I told you so, also you can use demo or bun easily. Not just node.
Yep!
Being able to run this in Deno is also a great benefit, so good point!
Nuxt one was good, Nuxt 2 was just great and Nuxt 3 is something very different but the best in my opinion.
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.
Wdym, it has nuxt auth which is a complete wrapper of next auth?
Nuxt 3 is fairly new, I'm pretty sure we'll see an auth library soon.
@@sevindis they already do, nuxt auth is a complete wrapper of next auth
@@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.
Nuxt auth for sidebase is buggy sometimes but you need the newer version. Version 5 works perfectly.
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 ;-;
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 🥲
after watching this i fell like going out from cave
😂 What's your usual tech stack?
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 ;) )
There's Pinia for state management. I use it a lot.
what do you mean? it works great for 0.001% of people.
just kidding, nuxt is garbage. the whole industry is rotten.
where is the github?
Sorry - no github on this one :(
Lots of bugs surrounding the ecosystem put me off nuxt in new projects. It's great though & I love the devtools
Sorry to hear that! Any major issues in particular that you ran into?
@@awesome-coding even installation is buggy.
It surprises me, with a bunch of errors
😂 well... you were surprised and this is what really matters.
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?
😅 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.
Nuxt3 is so buggy.
I'm hearing this quite a lot. What are the bugs you run into?
My main problem with nuxt is that the docs are bad
Interesting. I felt they were decent enough, at least for somebody who jumps into the project for the first time.
No, it is not, U can't handle, Cookies without pain... 🤬
still doesnt beat vanilla js and plain html and css
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.
And that still doesn't beat writing web assembly by hand smh
7:38, i'm wondering if watchEffect going to be triggered when movies.value is reassigned or not?
you lost me in the first minute, bro.
sorry to hear that
Weak and buggy ecosystem ornated by over-optimizations in strange areas. Even Svelte is better now.
nuxt sucks compared to sveltekit and nextjs, they are always so behind and so unnecessary complex
i disagree its so beautiful
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.
@@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.
@@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.
Nope, try Nuxt 3, much simplier that Next.
npx nuxi@latest init awesome is not creating all those folders