docs: fix typo (#702)

This commit is contained in:
Anthony Fu 2021-10-08 17:56:44 +08:00 committed by GitHub
parent 8df29679ce
commit e614328406
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 46 deletions

View File

@ -4,35 +4,35 @@
Nuxt3 brings a brand-new experience for developing Vue applications. 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. 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. 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 ## 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 Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
-----------------------|-----------------|------------------|--------- -------------------------|-----------------|------------------|---------
Stability | 😸 Stable | 😺 Semi Stable | 🙀 Unstable Stability | 😸 Stable | 😺 Semi Stable | 🙀 Unstable
Performance | 👎 Slower | 👍 Enhanced | 🔥 Fastest Performance | 👎 Slower | 👍 Enhanced | 🔥 Fastest
Nitro Engine | ❌ | ✅ | ✅ Nitro Engine | ❌ | ✅ | ✅
ESM support | 🌙 Partial | 👍 Better | ✅ ESM support | 🌙 Partial | 👍 Better | ✅
Typescript | ☑️ Opt-in | 🚧 Faster | ✅ TypeScript | ☑️ Opt-in | 🚧 Faster | ✅
Composition API | ⚠️ Deprecated | ✅ | ✅ Composition API | ⚠️ Deprecated | ✅ | ✅
Components Auto Import | ✅ | ✅ | ✅ Components Auto Import | ✅ | ✅ | ✅
Script setup | ❌ | 🚧 Partial | ✅ `<script setup>` syntax | ❌ | 🚧 Partial | ✅
Auto Imports | ❌ | ✅ | ✅ Auto Imports | ❌ | ✅ | ✅
Webpack | 4 | 4 | 5 Webpack | 4 | 4 | 5
Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental
Nuxi CLI | ❌ Old | ✅ | ✅ Nuxi CLI | ❌ Old | ✅ | ✅
## Nuxt 3 vs Nuxt 2 ## 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 Feature / Version | Nuxt 2 | Nuxt 3 | Changes required
--------------------------|---------|----------|------------------ --------------------------|---------|----------|------------------
Vue Version | 2 | 3 | Yes Vue Version | 2 | 3 | Yes
`app.vue` | ❌ | ✅ | - `app.vue` | ❌ | ✅ | -
Assets | ✅ | ✅ | No Assets | ✅ | ✅ | No
Components | ✅ | ✅ | No Components | ✅ | ✅ | No
Layouts | ✅ | ✅ | Yes Layouts | ✅ | ✅ | Yes
Error Pages | ✅ | 🚧 | Yes Error Pages | ✅ | 🚧 | Yes
Pages | ✅ | ✅ | Yes Pages | ✅ | ✅ | Yes
Pages: Dynamic Params | ✅ | ✅ | Yes Pages: Dynamic Params | ✅ | ✅ | Yes
Pages: _.vue | ✅ | ✅ | No Pages: _.vue | ✅ | ✅ | No
Plugins | ✅ | ✅ | Yes (compatible by default) Plugins | ✅ | ✅ | Yes (compatible by default)
Store | ✅ | 🚧 | Yes Store | ✅ | 🚧 | Yes
Transitions | ✅ | 🚧 | ? Transitions | ✅ | 🚧 | ?
Suspense | ❌ | ✅ | - Suspense | ❌ | ✅ | -
Options API: `asyncData` | ✅ | 🚧 | ? Options API: `asyncData` | ✅ | 🚧 | ?
Options API: `fetch` | ✅ | 🚧 | ? Options API: `fetch` | ✅ | 🚧 | ?
### Nuxt Module Compatibility ### 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 - Most nuxt2 plugins should be forward compatible with nuxt3 with a magical compat layer we inject
- Nuxt3 plugins are **not** backward compatible with nuxt2 - 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. 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. By using [vue-demi](https://github.com/vueuse/vue-demi) they should be compatible with both nuxt2 and nuxt3.

View File

@ -1,6 +1,6 @@
# Bridge Migration # 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 ## ... 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. 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`. 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 ### **Step 5:** Ensure everything goes well
Try with both `nuxt dev`, `nuxt build` and `nuxt start` if everything goes as expected 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! ### 🥳 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: ### **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 `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` - 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 ### **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[]`): 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] [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 ### 🛣️ Next Steps
While we are evolving nuxt3 and modules, you are welcome to share any ideas in Discussions section. 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. Please regularly check this section for latest updates.