Migrate to Nuxt 4 NOW!?
Вставка
- Опубліковано 9 лип 2024
- ↪️ Soon it is time for Nuxt 4, the next major version of the vue-based meta framework! While the team is still working on changes and improvements, you can already migrate to set and implemented changes *today*. Don't believe me? Check out how in this video 🎉
---
Key points:
4️⃣ Condensed info about the Nuxt 4 major version
✨ How to migrate already and opt in to breaking changes
⚙️ The background behind the changes
🌃 Nightly Channel
---
Links:
🔗 Nuxt Vision 2024 nuxt.com/blog/looking-forward...
🔗 Why Matt from @LearnVue is not hyped about Nuxt 4 • why im NOT hyped for n...
🔗 List of 4.x changes github.com/nuxt/nuxt/issues?q...
🔗 Nightly Channel (Nuxt) nuxt.com/docs/guide/going-fur...
🔗 Testing Nuxt 4 Docs nuxt.com/docs/getting-started...
🔗 Compatibility version PR github.com/nuxt/nuxt/pull/26925/
📺 What is shallowRef and when to use it • The definitive guide t...
📺 Nuxt Test Utils Primer • Nuxt Test Utils - A Pr...
📺 DejaVue #007 with Marc Backes - From Code to DevRel and Leadership • DejaVue #E007 - From C...
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:17 Nuxt 4 release date and background
01:18 How breaking will Nuxt 4 be?
02:44 Living list of planned 4.x changes
02:52 Migrating to Nuxt 4 already?
03:17 Seeing the future in the Demo App
05:12 Which features are covered?
06:10 The initial PR
07:05 Fine-grained selection of future features
08:18 My suggested migration approach
08:59 Summary - Наука та технологія
Ready to migrate to Nuxt 4 now?
FYI: Nuxt 3.12 is OUT NOW. You don't need the nightly channel anymore ✅
I hope migration is really easy. I spent a big chunk of 2023 dealing with Nuxt 3 bugs in minor and patch versions. Mostly because of community dependencies just stop working. I hope the Nuxt team is considering this vector. The framework does not provide many important core packages like i18n, gql, auth…. So users really depend on community packages. If those stop working we are all fucked.
I think it's just the standard that you don't migrate until the said dependencies are also updated... Especially the one for nuxt module. Can chill till your core dependencies are updated.
@@baguspranowo9505 For a major release that is very true and great advice but it shouldn’t not ever be a consideration when doing minor or patch bumps, it signifies that something is wrong with the public APIs of either Nuxt or Vue. I really love Nuxt and Vue, they are elegant and their structure is great but it’s pretty much the only ecosystem I used professionally and otherwise where bumps consistently break an application. :-(
I am fairly certain that most Nuxt-base and community-based modules received a PR from Daniel Roe/core team members that address migration.. At least I noticed PR's that were merged addressing this on most modules I use (the Nuxt-Graphql Request for instance). In general, you have to keep in mind that Nuxt3/Vue3 are literally entirely different from their predecessors due to the fact that the Vue core is not drastically changing like it was from Vue2 to Vue3. Its a lot more stable and the migration should be simple (hopefully lol).
Rest assured we will help the ecosystem upgrading. Luckily, most changes can be considered right now and modules can be prepared accordingly ☺️
I personally expect a smooth migration and, as mentioned in the video, in no way compared to Nuxt 3.
Concerning the auth module, I think they plan to release an official one soon. Or at least, make the old one compatible with Nuxt 3. That's what's on their roadmap anyway.
I don't seem to have the server folder from the base layer working on the new project structure in the final application
Hey Alexander, ive been watching your videos on composables and i find their content to be very informative and clearly conveyed. I subscribed to your chanel.
Thank you so much for your sub 🙏🏻
Glad you enjoy the content 🔥
Anything on your mind that should be covered but isn't yet?
@@TheAlexLichter thank you, but nothing at the moment
I edited my comment and now it's lost! Weird... didn't use any URL for UA-cam to mark it as spam... oooh maybe it's the @ of the node package versions I wrote... 🤦♂
Anyway I had an issue where typescript said future -> compatibilityVersion did not exist even though I pinned nuxt version to nightly, deleted bun lock, and then reinstalled deps.
The solution apparently was creating the nuxt project with nuxi-nightly as well...
Good stuff! 👋🔥💚
Thanks for another great video. In this new Nuxt4 folder structure is the layers directory inside app/ or at root level? And how would it look like with a pnpm workspace... would love to here from you on this specific layer topic.
/layers (similar to modules) will be top-level (so on the root level, not in /app). Will talk about the directory structure in a new video 👏🏻
good job ... can I ask that does NitroJS (server of NuxtJS) have a Dependency Injection like NestJS at the constructor level from the app singleton or perRequest ?
Not DI directly because Nitro focuses on composability. Instead you can add things to the context via Nitro plugins or wrap handlers in different handlers 👌🏻
@@TheAlexLichter aha understood ... thanks 👍
approximately... when will be safe to use Nuxt4 on prod ?
Faced a few challenges during attempts to migrate from 3.6.5 to 3.8.2 and 3.12 as well hard to imagine migration to nuxt 4. It not some kind of random bugs i was unable to even start the project.
What issues did you face?
Thanks for the introducing. I continue breathing normally after that 😅I have two questions:
- I've seen one opinion in the chat that we have Nuxt 4 to have a non-dramatic release cycle like it was with Nuxt 2 to Nuxt 3. Is it true?
- Is this update happening because Nitro is being developed separately and very fast?
Also, I have a bonus question which is mostly related to Vue 3. I couldn't find an explanation if a reactive variable ( const foo = reactive({...}) ) lost its reactivity after Object.assign(). Is there the best way to redefine inners of reactive?
Nuxt 4 will be vastly easier to upgrade than Nuxt 2 to 3. It will still have breaking changes, but those are all much easier, faster and simpler to update
Haha, very good 😋
To your questions:
1) Yes, correct. Also covered in the blog post linked in the description a bit more in-depth. We want to do yearly breaking changes, so one "calm" major per year. The first v5 issue is also up already 😛
2) No, this is not directly related to Nitro and would've happened anyway but as UnJS packages also plan to do major updates, why not align ☺️
Bonus / 3) That's one of the downsides of `reactive`. I'd rather use a `ref` instead!
Could you make a video about protecting server routes (private server routes) / authorization in API?
So basically about Nitro and Auth?
Please what are you using for video edition ans screen record ?
Video cut/edited/produced by the lovely www.nikibrandner.com/ with Premiere Pro
Screen Recording + Streaming: Just OBS (free)
The server components will get out of experimental? In Nuxt 4?
Not right away with Nuxt 4, but probably in a minor release in the future for sure.
Is there anything keeping you from using them in the current state?
@@TheAlexLichter Not really, i like a lot but the problem is the word "experimental", i have a big aplication and put this in production i'm not too comfortable, in local is working fine.
Well, experimental !== it is broken
We keep things in experimental for various reasons, some are (and not all apply):
* the API might change in the future
* there are still some rough edges
* we are looking for feedback
* we don’t want to release a new major when the feature changes
So, if it works locally and you have tests + error tracking, I suggest to give it a go 😁
thx
You are welcome! 🙌🏻
Nowadays next has superior doc. All Nuxt says about data fetch is use useFetch. What d puck it does is silent
We have two whole pages about data fetching with useFetch (and some more!):
nuxt.com/docs/getting-started/data-fetching
nuxt.com/docs/api/composables/use-fetch
What is missing in your opinion? ☺️
Nuxt 4 ? ufff.... Last december we started our first project in Nuxt 3, we're half way there.... nah... Nuxt 4 it'll be for 2026 or something lol
Nah, no worries Pablo! Nuxt 4 will be easy AF compared to a Nuxt 3 upgrade 😁
fuckkk, now i'am just migrating from 2 to 3 and you guys already go four vervison
Yup, but no worries! Won't be as tough as 2 -> 3 🙌
Не надо бежать впереди паровоза
Не помешает быть готовым ;)
It’s so cool that we’re talking about a major update when there is no official AUTHENTICATION module for nuxt3 yet. Who needs authentication
There are quite some solutions for auth available, most of them working pretty well!
Example:
* github.com/sidebase/nuxt-auth
* github.com/Atinux/nuxt-auth-utils
@@TheAlexLichter sidebase has 3-4 open issues for tokens not refreshing on page refresh :)
@@TheAlexLichter nuxt auth utils also does not support refreshing tokens.
Authenticating with an external API (your own python/ruby/php server for example) using jwt is pretty widespread, yet there are no non-buggy implementations yet.
approximately... when will it be safe to use nuxt 4 on prod?
You can opt in to the changes already (but they might not be exhaustive!), so as long as you have tests you can try it out now :)
But "safe safe" of course when Nuxt 4.0 hit (and probably a 4.0.1 with small bugfixes, if any)