Skip to content

Commit

Permalink
docs: codemods for migrating to Nuxt 4 (nuxt#28072)
Browse files Browse the repository at this point in the history
  • Loading branch information
arshcodemod authored Jul 18, 2024
1 parent 1d22d25 commit 064e7b7
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions docs/1.getting-started/12.upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
::

#### 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

🚦 **Impact Level**: Significant
Expand Down Expand Up @@ -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. 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.

You can also force a v3 folder structure with the following configuration:
Expand Down Expand Up @@ -231,6 +253,12 @@ Previously `data` was initialized to `null` but reset in `clearNuxtData` to `und

##### 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:

```ts twoslash [nuxt.config.ts]
Expand Down Expand Up @@ -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`

🚦 **Impact Level**: Minimal
Expand Down Expand Up @@ -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`

🚦 **Impact Level**: Minimal
Expand Down Expand Up @@ -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

##### What Changed
Expand Down Expand Up @@ -487,6 +527,10 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => {
const importName = genSafeVariableName
```

::tip
You can automate this step by running `npx codemod@latest nuxt/4/template-compilation-changes`
::

#### Removal of Experimental Features

🚦 **Impact Level**: Minimal
Expand Down

0 comments on commit 064e7b7

Please sign in to comment.