Migrating to Nuxt 3 from Vue 2?

userPJ1d1 0
Viewed 37

There is a medium-sized application written in Vue 2.7 (vuex, vue-router, etc.).

Until a certain point, we had SSR "with our own hands." Works crookedly and slowly, but works.

Recently, it has ceased to satisfy the needs of the project and we realized that we would be migrating to Nuxt.

Relatively recently, Nuxt 3 was released. It is now in rc state. We are betting on the further development of Nuxt. Therefore, we want to migrate to version 3. In addition, I think that in the near future we will consider switching to TypeScript, and in Nuxt 3 TS support is at a good level.

But there is an ambiguity: Nuxt 3 works with Vue 3. Also, it is recommended to use pinia instead of Vuex.

In this regard, questions:

  1. Will most components work on Vue 2 when using Nuxt 3? I also want to move to Vue 3, but for now we want to speed up the process as much as possible. But I don't want to use crutches like "Vue 3 Migration Build" either.
  2. Is Pinia definitively replacing Vuex? I mean, is Vuex going to be obsolete anytime soon?
  3. Maybe there are more pitfalls that you should know BEFORE moving?
nuxtjs3 nuxt.js vue.js javascript
1 Answers

I would first off migration from Vue2 to Nuxt2, for the simplest + fastest approach without too many breaking parts. That way, you can at least benefit of some SSR capabilities until your whole migration is done.

Then, as Estus Flask said, the main issue would be the packages themselves (like Vuetify, which are still not fully Vue3 compatible in a stable state).

Also, you can totally migrate to Nuxt3 while keeping most of your components with the Options API (no need to refacto towards Composition API).

Nuxt3 is runnable in production but you may still need to troubleshoot it depending on what you are planning to use. Also, keep in mind that not all the modules are migrated yet, here is the latest roadmap.

So to answer your questions:

  • depending on how your components are now, you may need to update some of their parts, for further details you can check the migration guide and see if you are anyhow impacted by the changes when going from Vue2 to Vue3. If you want to iterate faster (and in a safer way), migrate to Nuxt2 first (should be quite fast!), then try to move towards Nuxt3
  • Pinia is better on pretty much all aspects when compared to Vuex. Will it be un-usable in the next 18 months? Probably not. It's still the official recommendation and will be the way to go overall (it's just better overall) but Vuex is still totally usable as of today. More details can be found here
  • as always, you gonna add a layer on top of Vue so it may impact several things:
    • depending on the amount of features you are using (Nuxt modules, Nuxt specific modules), some releases may take a bit more time overall to ship to production (using Tailwind with Vue3 was made possible earlier in comparison of Nuxt3)
    • Nuxt is a meta-framework, so it will bring some amount of complexity to properly understand all the Nuxt2 hooks, the way an isomorphic app works, how to use Vue2 packages, some gotchas etc... This is not coming from Nuxt itself, but more from the SSR part.
    • Nuxt3 is using Vue3, so you will need to then understand a bit more how composition API works to get the benefit of using useAsyncData composables etc... So the same work will be needed there too, hence why I recommend a transition to Nuxt2 first. Of course, it all depends of your team and if your members are already at ease with Composition API

Overall, if you need a production-grade solution for your SSR needs, it will be quite useful to use Nuxt for sure but it will also require a bit of a learning curve.
You will also get quite some DX out of it, so that's a nice bonus!

Also, there is no real competition to Nuxt in Vue's ecosystem so at least, you don't need to fully compare meta-frameworks. AstroJS could be another approach but it goes out from the Vue ecosystem quite a lot overall (you won't benefit of Nuxt's modules/nice features for example) and solves some specific needs.

PS: Nuxt's team is working on the same approach regarding server-only components + heavy improvements regarding the hydration.

kissu0
Related