Migrate to Nuxt 4 NOW!?

Подписаться 8 тыс.

Просмотров 9 тыс.

50% 1

↪️ 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

Наука

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 55

@TheAlexLichter 2 месяца назад

Ready to migrate to Nuxt 4 now? FYI: Nuxt 3.12 is OUT NOW. You don't need the nightly channel anymore ✅

@franciscokloganb 2 месяца назад

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.

@baguspranowo9505 2 месяца назад

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.

@franciscokloganb 2 месяца назад

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

@rylanharper 2 месяца назад

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

@TheAlexLichter 2 месяца назад

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.

@Keiishu 2 месяца назад

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.

@sokmalinowy6038 2 месяца назад

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.

@TheAlexLichter 2 месяца назад

Thank you so much for your sub 🙏🏻 Glad you enjoy the content 🔥 Anything on your mind that should be covered but isn't yet?

@sokmalinowy6038 2 месяца назад

@@TheAlexLichter thank you, but nothing at the moment

@kostiantynkarlovych280 16 дней назад

I don't seem to have the server folder from the base layer working on the new project structure in the final application

@MrFelixClement Месяц назад

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.

@TheAlexLichter Месяц назад

/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 👏🏻

@todpale 2 месяца назад

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?

@notlekrut 2 месяца назад

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

@TheAlexLichter 2 месяца назад

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!

@zaghloul-soft 22 дня назад

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 ?

@TheAlexLichter 22 дня назад

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 👌🏻

@zaghloul-soft 22 дня назад

@@TheAlexLichter aha understood ... thanks 👍

@AngelHdzMultimedia 2 месяца назад

I edited my comment and now it's lost! Weird... didn't use any URL for RU-vid 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! 👋🔥💚

@smartbarrel.kronhyx Месяц назад

approximately... when will be safe to use Nuxt4 on prod ?

@randomtimessomehow Месяц назад

Could you make a video about protecting server routes (private server routes) / authorization in API?

@TheAlexLichter Месяц назад

So basically about Nitro and Auth?

@Ayvengo21 27 дней назад

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.

@TheAlexLichter 27 дней назад

What issues did you face?

@impactsongs 2 месяца назад

The server components will get out of experimental? In Nuxt 4?

@TheAlexLichter 2 месяца назад

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?

@impactsongs 2 месяца назад

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

@TheAlexLichter 2 месяца назад

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 😁

@ulrichmbouna4091 2 месяца назад

Please what are you using for video edition ans screen record ?

@TheAlexLichter 2 месяца назад

Video cut/edited/produced by the lovely www.nikibrandner.com/ with Premiere Pro Screen Recording + Streaming: Just OBS (free)

@Ilohimushka Месяц назад

Nowadays next has superior doc. All Nuxt says about data fetch is use useFetch. What d puck it does is silent

@TheAlexLichter Месяц назад

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? ☺️

@offgridvince Месяц назад

thx

@TheAlexLichter Месяц назад

You are welcome! 🙌🏻

@AndreVoks 2 месяца назад

fuckkk, now i'am just migrating from 2 to 3 and you guys already go four vervison

@TheAlexLichter 2 месяца назад

Yup, but no worries! Won't be as tough as 2 -> 3 🙌

@PabloRodriguez-su4gp 2 месяца назад

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

@TheAlexLichter 2 месяца назад

Nah, no worries Pablo! Nuxt 4 will be easy AF compared to a Nuxt 3 upgrade 😁

@user-sj7tf2yv3m 2 месяца назад

Не надо бежать впереди паровоза

@TheAlexLichter 2 месяца назад

Не помешает быть готовым ;)

@mohammadkhalaji1563 2 месяца назад

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

@TheAlexLichter Месяц назад

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

@mohammadkhalaji1563 Месяц назад

@@TheAlexLichter sidebase has 3-4 open issues for tokens not refreshing on page refresh :)

@mohammadkhalaji1563 Месяц назад

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

@datadiego_ 8 дней назад

Hi Alexander! I upgraded but some libraries got disabled because incompatibilites is there a work around? Module @nuxtjs/tailwindcss is disabled due to incompatibility issues: - [nuxt] Nuxt version ^2.9.0 || ^3.0.0-rc.1 is required but currently using 4.0.0-28679856.48a8b180 also pinia and nuxt-icon

@smartbarrel.kronhyx Месяц назад

approximately... when will it be safe to use nuxt 4 on prod?

@TheAlexLichter Месяц назад

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)