The new Vue 3.4 feature NOBODY talks about… (+ raffle)
Вставка
- Опубліковано 9 лип 2024
- 👀 Vue 3.4 came out and people talk about all the amazing new features, whether it be the stable defineModel macro or the v-bind shorthand. But one key point is often missed out by the people - and it is related to SSR and hydration errors!
Key points:
‼️ How hydration errors and mismatches are easier to debug now
📓 One case how hydration mismatches can be provoked
✨How the ecosystem evolves
🎁 A raffle for @VuejsAmsterdam
---
To win one @VuejsAmsterdam ticket, comment with why you'd love to join the conference and what was the most amazing thing you've built with Vue and/or Nuxt so far.
Winners will be picked randomly and announced in the next video!
---
Links:
🔗Vue 3.4 announcement blog post blog.vuejs.org/posts/vue-3-4
🔗Hydration error blog post: www.lichter.io/articles/vue-h...
🔗Nuxt issue the demo app code came from (+solution) github.com/nuxt/nuxt/issues/2...
🔗Demo App github.com/manniL/alexander-l...
🔗 Nuxt 3.9 announcement blog post nuxt.com/blog/v3-9
🔗 useId PR for Nuxt github.com/nuxt/nuxt/pull/23368
🔗 useId RFC for Vue github.com/vuejs/rfcs/discuss...
🔗 Vue.js Amsterdam vuejs.amsterdam
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:42 Vue 3.4 features we will not talk about today
01:00 Improved Hydration Errors
01:39 Demo App and Issue
03:33 Reason for mismatches in the demo case
04:39 How it looks in Vue 3.4
06:04 useId
08:30 Summary + @VuejsAmsterdam - Наука та технологія
Who also knows this error message too well? 👀
Fire content Alex! Can't wait until Vue 3.5!
Thank you Erik 💚🙏
Or the next Nuxt minor 👀✨
Fantastic video and thanks for talking about this feature...as you say, probably not a feature most people will be talking about but ABSOLUTELY one feature that every Vue developer will benefit from. The continual improvement for DX is what sets Vue and Nuxt apart from other frameworks in my mind.
I'd love to go to Vue Amsterdam also and see all the great talks - hopefully even get to say hi to yourself and just be there to soak in the atmosphere. I'm not a library author, speaker or dev rel but I do preach for Vue at any moment I can. Since being a freelancer / consultant, I've used Vue / Nuxt on virtually every project since (the last 5 years...my gosh) with great success. I even helped Greggs (the biggest UK fast-food bakery) keep their web apps in Vue by assisting with a huge upgrade process to Nuxt 3. It was painful as it was still in RC at the time...and I was helping file many bugs along the way but it was fun and rewarding work.
Anyway, all that said, looking forward to the next content! Keep up the good work 👏
Thank you and congrats to the ticket 🙌
Congratulations Michael. Have fun in Amsterdam. I definitely wanted to go and almost won. Maybe next time, only one can win 😏😊
Great job, Alex! This video really answers my doubts about the hydration errors/warnings. I used to ignore those messages as they seemed not so critical. Now I learn more about them.
Thank you 🙏 Yeah, ignoring them is definitely not advisable, but (especially since 3.4) making a clear distinction between "id"-related (usually no problem) and "other" (big issues) hydration mismatch warnings is important 👌
I’ve just had a look at the Vue Amsterdam conference site and it looks amazing; I would definitely love to go. It would be great to meet some of the people I’ve talked to in PR’s and Discord for real life!
My favourite thing I built in Nuxt was an internal dashboard for my last company. It was super easy to configure, update and change things around which made updates much quicker. The speed at which the Nuxt team ships code is astounding 🚀
Hey! Thanks a lot for your comment - unfortunately luck was not on your site this time.
In my particular case, I was so lucky to start my career as Frontend a few years ago (7) and when I started learning Vue 2 with the great Ignacio Anaya, it was love at first sight. I loved the way of working and since then I have been lucky enough to continue working with my beloved Vue, and following this great community that has shown me all these years that it is exemplary and unmatched within the entire JS ecosystem.
I really appreciate people like you who spread content and bring this great ecosystem closer to people to show that programming can be fun and rewarding.
That's why I was about to take out (in the end not for personal reasons) in the last Black Friday the ticket for Vue Amsterdam to meet in person all those great geniuses behind the software that has given me so many good times and to thank them for allowing my family and me to live creating amazing things with it!
Mach weiter so, Alex, du hilfst mehr Menschen, als du denkst, du machst das grossartig!
Hey Daniel! Thanks a lot for sharing your story and the kind message! I'll definitely keep it going and continue dropping more (hopefully helpful) videos 🙏
FYI: Unfortunately, you weren't the lucky one for the raffle
Thx for your video ! Very usefull as always :D I use a random number for my app into the 404 page, so it's very nice to see that is planned for vue 3.5 !
Glad it was helpful!
Yes, looking forward to useId too 😁
Very useful videos. Short, not complicated, straight to the point. Just awesome!
Thanks a lot 🙏
Very useful! Thanks 🙏
You're welcome! 👏
I am migrating my project to nuxt 3, I have seen this error. Thanks for making a video on this. Your content is awesome
Glad that I could help you 🙌🎉
Looking forward to this - any idea when this will apply to Nuxt 3? I'm seeing vue@3.4.7 and it looks like it's 3.4.10? or am I crazy?
Any Vue usage starting with 3.4 should include this. Maybe you need to run an update of transitive dependencies?
NUXT 3 .9 IS vue 3.4 ready
As mentioned in the comments already, it is already the case! Nuxt does not pin the Vue version 😊
fine detail beautiful video
Thank you very much!
Dude, to prevent that double running same code on server and client, using process.server in a if statement is a good choice? (I myself don't think so 😜) . my problem is that I have a compasable, which I use useLocalStorage inside. and this is not present on the server, so I have to run it only on the client. how to do so? I think it's worth a video.
And as always great content, great vibe! thanks!
If it should run only on the client, run it in `onMounted` 👌
Thanks!
No problem! 🙌
Thank you
You're welcome 🙌
Great explanation and showcase, Alex. This will make tracking down hydration mismatches sooo much easier. :)
P.S.: Anyone found a good workaround for browser extensions that change dom elements on the fly (ie. LastPass) which also cause mismatches?
You are welcome! 🙌
Re LastPass/Extensions: I wish... 🙈
Maybe automatically setting a lastpass ignore attribute on forms in dev mode could help?
Vue turns into Storybook, patch update every hour 😅
Honestly, I'm happy with the speed of releasing patches 🙌
Better that way than waiting for weeks/months
@@TheAlexLichter yeah, it's hard to say which release cycle is better. I feel like once per 2 weeks is a sweet spot
Alex, the master of clickbait title 😂
Tiny bit 👀 But at least the thumbnail is a clear about the topic 😛
@@TheAlexLichter actually it was really hard to read from a phone, I only was able to distinguish what is written there on the laptop 🥸
Oh, fair point 🙈