mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
docs: codemods for migrating to Nuxt 4 (#28072)
This commit is contained in:
parent
1d22d25a59
commit
064e7b7f12
@ -97,6 +97,24 @@ Breaking or significant changes will be noted here along with migration steps fo
|
|||||||
This section is subject to change until the final release, so please check back here regularly if you are testing Nuxt 4 using `compatibilityVersion: 4`.
|
This section is subject to change until the final release, so please check back here regularly if you are testing Nuxt 4 using `compatibilityVersion: 4`.
|
||||||
::
|
::
|
||||||
|
|
||||||
|
#### Migrating Using Codemods
|
||||||
|
|
||||||
|
To facilitate the upgrade process, we have collaborated with the [Codemod](https://github.com/codemod-com/codemod) team to automate many migration steps with some open-source codemods.
|
||||||
|
|
||||||
|
::note
|
||||||
|
If you encounter any issues, please report them to the Codemod team with `npx codemod feedback` 🙏
|
||||||
|
::
|
||||||
|
|
||||||
|
For a complete list of Nuxt 4 codemods, detailed information on each, their source, and various ways to run them, visit the [Codemod Registry](https://go.codemod.com/codemod-registry).
|
||||||
|
|
||||||
|
You can run all the codemods mentioned in this guide using the following `codemod` recipe:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx codemod@latest nuxt/4/migration-recipe
|
||||||
|
```
|
||||||
|
|
||||||
|
This command will execute all codemods in sequence, with the option to deselect any that you do not wish to run. Each codemod is also listed below alongside its respective change and can be executed independently.
|
||||||
|
|
||||||
#### New Directory Structure
|
#### New Directory Structure
|
||||||
|
|
||||||
🚦 **Impact Level**: Significant
|
🚦 **Impact Level**: Significant
|
||||||
@ -161,6 +179,10 @@ nuxt.config.ts
|
|||||||
1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
|
1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
|
||||||
1. Make sure your `nuxt.config.ts`, `content/`, `layers/`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
|
1. Make sure your `nuxt.config.ts`, `content/`, `layers/`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can automate this migration by running `npx codemod@latest nuxt/4/file-structure`
|
||||||
|
::
|
||||||
|
|
||||||
However, migration is _not required_. If you wish to keep your current folder structure, Nuxt should auto-detect it. (If it does not, please raise an issue.) The one exception is that if you _already_ have a custom `srcDir`. In this case, you should be aware that your `modules/`, `public/` and `server/` folders will be resolved from your `rootDir` rather than from your custom `srcDir`. You can override this by configuring `dir.modules`, `dir.public` and `serverDir` if you need to.
|
However, migration is _not required_. If you wish to keep your current folder structure, Nuxt should auto-detect it. (If it does not, please raise an issue.) The one exception is that if you _already_ have a custom `srcDir`. In this case, you should be aware that your `modules/`, `public/` and `server/` folders will be resolved from your `rootDir` rather than from your custom `srcDir`. You can override this by configuring `dir.modules`, `dir.public` and `serverDir` if you need to.
|
||||||
|
|
||||||
You can also force a v3 folder structure with the following configuration:
|
You can also force a v3 folder structure with the following configuration:
|
||||||
@ -231,6 +253,12 @@ Previously `data` was initialized to `null` but reset in `clearNuxtData` to `und
|
|||||||
|
|
||||||
##### Migration Steps
|
##### Migration Steps
|
||||||
|
|
||||||
|
If you were checking if `data.value` or `error.value` were `null`, you can update these checks to check for `undefined` instead.
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can automate this step by running `npx codemod@latest nuxt/4/default-data-error-value`
|
||||||
|
::
|
||||||
|
|
||||||
If you encounter any issues you can revert back to the previous behavior with:
|
If you encounter any issues you can revert back to the previous behavior with:
|
||||||
|
|
||||||
```ts twoslash [nuxt.config.ts]
|
```ts twoslash [nuxt.config.ts]
|
||||||
@ -290,6 +318,10 @@ The migration should be straightforward:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can automate this step by running `npx codemod@latest nuxt/4/deprecated-dedupe-value`
|
||||||
|
::
|
||||||
|
|
||||||
#### Respect defaults when clearing `data` in `useAsyncData` and `useFetch`
|
#### Respect defaults when clearing `data` in `useAsyncData` and `useFetch`
|
||||||
|
|
||||||
🚦 **Impact Level**: Minimal
|
🚦 **Impact Level**: Minimal
|
||||||
@ -353,6 +385,10 @@ In most cases, no migration steps are required, but if you rely on the reactivit
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
::tip
|
||||||
|
If you need to, you can automate this step by running `npx codemod@latest nuxt/4/shallow-data-reactivity`
|
||||||
|
::
|
||||||
|
|
||||||
#### Absolute Watch Paths in `builder:watch`
|
#### Absolute Watch Paths in `builder:watch`
|
||||||
|
|
||||||
🚦 **Impact Level**: Minimal
|
🚦 **Impact Level**: Minimal
|
||||||
@ -380,6 +416,10 @@ However, if you are a module author using the `builder:watch` hook and wishing t
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can automate this step by running `npx codemod@latest nuxt/4/absolute-watch-paths`
|
||||||
|
::
|
||||||
|
|
||||||
#### Removal of `window.__NUXT__` object
|
#### Removal of `window.__NUXT__` object
|
||||||
|
|
||||||
##### What Changed
|
##### What Changed
|
||||||
@ -487,6 +527,10 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => {
|
|||||||
const importName = genSafeVariableName
|
const importName = genSafeVariableName
|
||||||
```
|
```
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can automate this step by running `npx codemod@latest nuxt/4/template-compilation-changes`
|
||||||
|
::
|
||||||
|
|
||||||
#### Removal of Experimental Features
|
#### Removal of Experimental Features
|
||||||
|
|
||||||
🚦 **Impact Level**: Minimal
|
🚦 **Impact Level**: Minimal
|
||||||
|
Loading…
Reference in New Issue
Block a user