4.5 KiB
Nuxt Bridge
⚠️ This section is work-in-progress and can change. Please check this page regularly.
Nuxt3 brings a brand-new experience for developing Vue applications.
To make this happen, we've rewritten most parts of nuxt codebase and are using the latest tooling such as Webpack5, vite, vue3 and native ESM.
And we've also rethought how nuxt rendering works by introducing the @nuxt/nitro project.
Our goal is a smooth transition path from legacy stack to new one, reducing breaking changes as much as possible.
To make this happen, we considered backward- and forward-compatibility and most layers (such as modules and plugins). Nonetheless, this is in-progress and a bumpy road.
In the meantime, you can make sure your project is almost ready for nuxt3 and have latest DX experience, without major rewrites and risk of breaking changes by adding a simple module.
👉 Please see Migration Guide for more details how you can migrate your nuxt 2 project or module to bridge level.
Nuxt 2 vs Nuxt Bridge vs Nuxt 3
In the table below, there is a quick comparation between 3 versions of nuxt:
| Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
|---|---|---|---|
| Stability | 😸 Stable | 😺 Semi Stable | 🙀 Unstable |
| Performance | 👎 Slower | 👍 Enhanced | 🔥 Fastest |
| Nitro Engine | ❌ | ✅ | ✅ |
| ESM support | 🌙 Partial | 👍 Better | ✅ |
| Typescript | ☑️ Opt-in | 🚧 Faster | ✅ |
| Composition API | ⚠️ Deprecated | ✅ | ✅ |
| Components Auto Import | ✅ | ✅ | ✅ |
| Auto Imports | ❌ | ✅ | ✅ |
| Webpack | 4 | 4 | 5 |
| Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental |
| Nuxi CLI | ❌ Old | ✅ | ✅ |
Nuxt 3 vs Nuxt 2
The good news is that most features from Nitro Engine and the new CLI, like api routes, will be supported when you use @nuxt/bridge.
Some features have been dropped from nuxt2, some still need to be implemented for nuxt3 and some are new in nuxt3.
Biggest changes with nuxt3 other than the ones covered by bridge, are vue2 to vue3, webpack5 and Core rewrite with new templating engine.
At the moment, there is no Nuxt 2 to Nuxt 3 migration guide nor is recommanded to do it due to potentially more changes coming. We are working to provide a stable migration guide and tooling to make it as smooth as possible.
In table below there is an overall feature comparation table (might be incomplete or outdated):
| Feature / Version | Nuxt 2 | Nuxt 3 | Changes required |
|---|---|---|---|
| Vue Version | 2 | 3 | Yes |
app.vue |
❌ | ✅ | - |
| Assets | ✅ | ✅ | No |
| Components | ✅ | ✅ | No |
| Layouts | ✅ | ✅ | Yes |
| Error Pages | ✅ | 🚧 | Yes |
| Pages | ✅ | ✅ | Yes |
| Pages: Dynamic Params | ✅ | ✅ | Yes |
| Pages: _.vue | ✅ | ✅ | No |
| Plugins | ✅ | ✅ | Yes (compatible by default) |
| Store | ✅ | 🚧 | Yes |
| Transitions | ✅ | 🚧 | ? |
| Suspense | ❌ | ✅ | - |
Options API: asyncData |
✅ | 🚧 | ? |
Options API: fetch |
✅ | 🚧 | ? |
Nuxt Module Compatibility
- All Nuxt 2 modules should be forward compatible with Nuxt 3 as long as they migrate to bridge (see migration) or if they are already following guidelines
- All (upcoming) modules made with
@nuxt/kitshould be backward compatible with nuxt2 projects (even without bridge) as long as they are not depending on a nuxt3/bridge-only feature
Nuxt Plugin Compatibility
- Most nuxt2 plugins should be forward compatible with nuxt3 with a magical compat layer we inject
- Nuxt3 plugins are not backward compatible with nuxt2
Vue compatibility
For plugins and composition API and components, it needs exclusive vue2 or vue3 support from plugins. By using vue-demi they should be compatible with both nuxt2 and nuxt3.