mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-18 17:35:57 +00:00
docs: fix typo (#702)
This commit is contained in:
Anthony Fu
GitHub
parent
8df29679ce
commit
e614328406
@ -4,35 +4,35 @@
|
||||
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
In the meantime, you can make sure your project is almost ready for nuxt3 and have the latest DX experience without major rewrites and risk of breaking changes by adding a simple module.
|
||||
|
||||
👉 Please see [Migration Guide](./migration) for more details how you can migrate your nuxt 2 project or module to bridge level.
|
||||
👉 Please see [Migration Guide](./migration) for more details on 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:
|
||||
In the table below, there is a quick comparison 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 | ✅ | ✅ | ✅
|
||||
Script setup | ❌ | 🚧 Partial | ✅
|
||||
Auto Imports | ❌ | ✅ | ✅
|
||||
Webpack | 4 | 4 | 5
|
||||
Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental
|
||||
Nuxi CLI | ❌ Old | ✅ | ✅
|
||||
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 | ✅ | ✅ | ✅
|
||||
`<script setup>` syntax | ❌ | 🚧 Partial | ✅
|
||||
Auto Imports | ❌ | ✅ | ✅
|
||||
Webpack | 4 | 4 | 5
|
||||
Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental
|
||||
Nuxi CLI | ❌ Old | ✅ | ✅
|
||||
|
||||
## Nuxt 3 vs Nuxt 2
|
||||
|
||||
@ -49,21 +49,21 @@ In table below there is an overall feature comparation table (might be incomplet
|
||||
|
||||
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` | ✅ | 🚧 | ?
|
||||
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
|
||||
@ -76,7 +76,7 @@ Options API: `fetch` | ✅ | 🚧 | ?
|
||||
- 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
|
||||
### Vue Compatibility
|
||||
|
||||
For plugins and composition API and components, it needs exclusive vue2 or vue3 support from plugins.
|
||||
By using [vue-demi](https://github.com/vueuse/vue-demi) they should be compatible with both nuxt2 and nuxt3.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Bridge Migration
|
||||
|
||||
> ⚠️ This section is work-in-progress and can change. Please regulary check this page.
|
||||
> ⚠️ This section is work-in-progress and can change. Please regularly check this page.
|
||||
|
||||
## ... I have a nuxt2 project
|
||||
|
||||
@ -54,7 +54,7 @@ If you have a project with `target: 'static'`, update "build" script to use `nux
|
||||
}
|
||||
```
|
||||
|
||||
### **Step 3:** Avoid CommonJS synax
|
||||
### **Step 3:** Avoid CommonJS syntax
|
||||
|
||||
See [Migrating from CommonJS](#step-2-avoid-commonjs-syntax) from module author section.
|
||||
We need same steps for `plugins`, `store`, `pages`, `serverMiddleware` and `nuxt.config.js`.
|
||||
@ -69,9 +69,9 @@ We need same steps for `plugins`, `store`, `pages`, `serverMiddleware` and `nuxt
|
||||
### **Step 5:** Ensure everything goes well
|
||||
|
||||
Try with both `nuxt dev`, `nuxt build` and `nuxt start` if everything goes as expected
|
||||
If there is an issue, please report it to us or to relavant module repository.
|
||||
If there is an issue, please report it to us or to relevant module repository.
|
||||
|
||||
If you cannot take the risk of using experimental code, you can comment out the module and regularly check back to ensure your project stays ready for nuxt3 compatibily.
|
||||
If you cannot take the risk of using experimental code, you can comment out the module and regularly check back to ensure your project stays ready for nuxt3 compatibly.
|
||||
|
||||
### 🥳 Enjoy new possibilities!
|
||||
|
||||
@ -90,7 +90,7 @@ If you have a fixture in your module, add `@nuxt/bridge` package to its config (
|
||||
|
||||
### **Step 2:** Avoid CommonJS syntax:
|
||||
|
||||
Nuxt natively supports Typescript and ECMAScript Modules. In every file make sure to:
|
||||
Nuxt natively supports TypeScript and ECMAScript Modules. In every file make sure to:
|
||||
|
||||
- Change `require('lib')` to `import lib from 'lib'` or `await import('lib').then(e => e.default || e)`
|
||||
- Change `module.exports` to `export default` or `export const`
|
||||
@ -102,7 +102,7 @@ If you inject a nuxt plugin that does not have `export default` (such as global
|
||||
|
||||
### **Step 4:** Avoid runtime modules
|
||||
|
||||
With nuxt3 and nitro project, we started to rethink how the nuxt build process should work and modules hooking into the Nuxt runtime is now considered an anti-pattern and will not work wtih nuxt3.
|
||||
With nuxt3 and nitro project, we started to rethink how the nuxt build process should work and modules hooking into the Nuxt runtime is now considered an anti-pattern and will not work with nuxt3.
|
||||
|
||||
Your module should work fine by adding only to `buildModules[]` (instead of `modules[]`):
|
||||
|
||||
@ -118,19 +118,19 @@ Ensure your module is exporting meta object.
|
||||
|
||||
[TODO]
|
||||
|
||||
### **Step 6:** Migrate to typescript (optional)
|
||||
### **Step 6:** Migrate to TypeScript (optional)
|
||||
|
||||
While it is not essential, most of nuxt ecosystem is shifitng to use Typescript, it is highly recommended to consider migration.
|
||||
While it is not essential, most of nuxt ecosystem is shifting to use TypeScript, it is highly recommended to consider migration.
|
||||
|
||||
**Tip:** You can start migration by simply renaming `.js` files, to `.ts`. Typescript is designed to be progressive!
|
||||
**Tip:** You can start migration by simply renaming `.js` files, to `.ts`. TypeScript is designed to be progressive!
|
||||
|
||||
**Tip:** You can use typescript syntax for nuxt 2/3 modules and plugins without any extra dependencies.
|
||||
**Tip:** You can use TypeScript syntax for nuxt 2/3 modules and plugins without any extra dependencies.
|
||||
|
||||
### 🛣️ Next Steps
|
||||
|
||||
While we are evolving nuxt3 and modules, you are welcome to share any ideas in Discussions section.
|
||||
|
||||
A brand new exprience of defining nuxt modules is coming with `@nuxt/kit` project but it is still not ready so it is advised only to try it and not release to stable versions of your module.
|
||||
A brand new experience of defining nuxt modules is coming with `@nuxt/kit` project but it is still not ready so it is advised only to try it and not release to stable versions of your module.
|
||||
|
||||
Please regularly check this section for latest updates.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user