简体繁体 English

从 Vue 2 迁移到 Nuxt 3？

[英]Migrating to Nuxt 3 from Vue 2?

原文 2022-09-19 09:51:11 7 1 javascript/ vue.js/ nuxt.js/ nuxtjs3

There is a medium-sized application written in Vue 2.7 (vuex, vue-router, etc.).有一个用 Vue 2.7 编写的中型应用程序（vuex、vue-router 等）。

Until a certain point, we had SSR "with our own hands."直到某个时候，我们“亲手”拥有了 SSR。 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.最近，它不再满足项目的需求，我们意识到我们将迁移到 Nuxt。

Relatively recently, Nuxt 3 was released.最近，Nuxt 3 发布了。 It is now in rc state.它现在位于 rc state 中。 We are betting on the further development of Nuxt.我们押注于 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.因此，我们想迁移到版本 3。另外，我认为在不久的将来我们会考虑切换到 TypeScript，并且在 Nuxt 3 TS 支持处于良好水平。

But there is an ambiguity: Nuxt 3 works with Vue 3. Also, it is recommended to use pinia instead of Vuex.但是有一个歧义：Nuxt 3 与 Vue 3 一起使用。另外，建议使用 pinia 而不是 Vuex。

In this regard, questions:在这方面，问题：

Will most components work on Vue 2 when using Nuxt 3?使用 Nuxt 3 时，大多数组件是否可以在 Vue 2 上运行？ I also want to move to Vue 3, but for now we want to speed up the process as much as possible.我也想迁移到 Vue 3，但现在我们希望尽可能加快这个过程。 But I don't want to use crutches like "Vue 3 Migration Build" either.但我也不想使用像“Vue 3 Migration Build”这样的拐杖。
Is Pinia definitively replacing Vuex? Pinia 会最终取代 Vuex 吗？ I mean, is Vuex going to be obsolete anytime soon?我的意思是，Vuex 会很快过时吗？
Maybe there are more pitfalls that you should know BEFORE moving?也许在搬家之前你应该知道更多的陷阱？

1 个解决方案

I would first off migration from Vue2 to Nuxt2, for the simplest + fastest approach without too many breaking parts.我会首先从 Vue2 迁移到 Nuxt2，这是最简单 + 最快的方法，没有太多的破坏部分。 That way, you can at least benefit of some SSR capabilities until your whole migration is done.这样，在整个迁移完成之前，您至少可以受益于一些 SSR 功能。

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).然后，正如Estus Flask 所说，主要问题将是包本身（如 Vuetify，在稳定状态下仍不完全兼容 Vue3）。

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，同时使用选项 API 保留大部分组件（无需重构为 Composition API）。

Nuxt3 is runnable in production but you may still need to troubleshoot it depending on what you are planning to use. Nuxt3 可在生产中运行，但您可能仍需要根据您计划使用的内容对其进行故障排除。 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.根据您的组件现在的情况，您可能需要更新它们的某些部分，有关更多详细信息，您可以查看迁移指南，看看您是否受到从 Vue2 到 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如果您想更快地迭代（并且以更安全的方式），请先迁移到 Nuxt2（应该很快），然后尝试迁移到 Nuxt3
Pinia is better on pretty much all aspects when compared to Vuex.与 Vuex 相比，Pina 在几乎所有方面都更好。 Will it be un-usable in the next 18 months?它会在未来 18 个月内无法使用吗？ 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.它仍然是官方推荐的，并且将成为 go 整体的方式（整体上更好），但 Vuex 到今天仍然完全可用。 More details can be found here更多细节可以在这里找到
as always, you gonna add a layer on top of Vue so it may impact several things:与往常一样，您将在 Vue 之上添加一个层，因此它可能会影响几件事：
- 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 模块、Nuxt 特定模块），某些版本可能需要更多时间才能交付到生产环境（与 Nuxt3 相比，使用 Tailwind 和 Vue3 更早成为可能）
- 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. Nuxt 是一个元框架，因此正确理解所有 Nuxt2 钩子、同构应用程序的工作方式、如何使用 Vue2 包、一些陷阱等会带来一定的复杂性......这不是来自 Nuxt 本身，但更多来自 SSR 部分。
- 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. Nuxt3 使用的是 Vue3，因此您需要更多地了解 API 组合如何工作，以获得使用useAsyncData组合等的好处......所以那里也需要同样的工作，因此我建议先过渡到 Nuxt2 . Of course, it all depends of your team and if your members are already at ease with Composition API当然，这完全取决于您的团队以及您的成员是否已经对组合 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.总的来说，如果你需要一个生产级的解决方案来满足你的 SSR 需求，那么使用 Nuxt 肯定会非常有用，但它也需要一些学习曲线。
You will also get quite some DX out of it, so that's a nice bonus!您还将从中获得相当多的 DX，所以这是一个不错的奖励！

Also, there is no real competition to Nuxt in Vue's ecosystem so at least, you don't need to fully compare meta-frameworks.此外，在 Vue 的生态系统中，Nuxt 没有真正的竞争对手，所以至少，你不需要完全比较元框架。 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. AstroJS可能是另一种方法，但它总体上脱离了 Vue 生态系统（例如，您不会受益于 Nuxt 的模块/不错的功能）并解决了一些特定需求。

PS: Nuxt's team is working on the same approach regarding server-only components + heavy improvements regarding the hydration. PS：Nuxt 的团队正在研究关于仅服务器组件的相同方法 + 关于水合作用的重大改进。