@nuxt/docs-nightly 4.3.0-29356103.2f7957ac → 4.3.0-29430616.754c35a4

package/1.getting-started/11.state-management.md

@@ -6,7 +6,7 @@ navigation.icon: i-lucide-database
 
 Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
 
-[`useState`](/docs/4.x/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
+[`useState`](/docs/4.x/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
 :video-accordion{title="Watch a video from Alexander Lichter about why and when to use useState" videoId="mv0WcBABcIk"}
 
@@ -61,7 +61,7 @@ To globally invalidate cached state, see [`clearNuxtState`](/docs/4.x/api/utils/
 
 ### Initializing State
 
-Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/4.x/guide/directory-structure/app) component with the [`callOnce`](/docs/4.x/api/utils/call-once) util to do so.
+Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/4.x/directory-structure/app/app) component with the [`callOnce`](/docs/4.x/api/utils/call-once) util to do so.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
@@ -198,7 +198,7 @@ const date = useLocaleDate(new Date('2016-10-26'))
 
 ## Shared State
 
-By using [auto-imported composables](/docs/4.x/guide/directory-structure/app/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/4.x/directory-structure/app/composables) we can define global type-safe states and import them across the app.
 
 ```ts twoslash [composables/states.ts]
 export const useColor = () => useState<string>('color', () => 'pink')

package/1.getting-started/12.error-handling.md

@@ -8,7 +8,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 - Errors during the Vue rendering lifecycle (SSR & CSR)
 - Server and client startup errors (SSR + CSR)
-- Errors during Nitro server lifecycle ([`server/`](/docs/4.x/guide/directory-structure/server) directory)
+- Errors during Nitro server lifecycle ([`server/`](/docs/4.x/directory-structure/server) directory)
 - Errors downloading JS chunks
 
 ::tip
@@ -17,11 +17,11 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 ## Vue Errors
 
-You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
+You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured).
 
 In addition, Nuxt provides a [`vue:error`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
 
-If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application.html#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
+If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
 
 ```ts twoslash [plugins/error-handler.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -37,7 +37,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 ```
 
 ::note
-Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) lifecycle hook.
+Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured) lifecycle hook.
 ::
 
 ## Startup Errors
@@ -45,7 +45,7 @@ Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org
 Nuxt will call the `app:error` hook if there are any errors in starting your Nuxt application.
 
 This includes:
-- running [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
+- running [Nuxt plugins](/docs/4.x/directory-structure/app/plugins)
 - processing `app:created` and `app:beforeMount` hooks
 - rendering your Vue app to HTML (during SSR)
 - mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
@@ -107,7 +107,7 @@ const handleError = () => clearError({ redirect: '/' })
 </template>
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/error"}
+::read-more{to="/docs/4.x/directory-structure/app/error"}
 Read more about `error.vue` and its uses.
 ::
 

package/1.getting-started/13.server.md

@@ -4,7 +4,7 @@ description: Build full-stack applications with Nuxt's server framework. You can
 navigation.icon: i-lucide-pc-case
 ---
 
-:read-more{to="/docs/4.x/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/directory-structure/server"}
 
 ## Powered by Nitro
 
@@ -38,7 +38,7 @@ And you can directly return `text`, `json`, `html` or even a `stream`.
 
 Out-of-the-box, it supports **hot module replacement** and **auto-import** like the other parts of your Nuxt application.
 
-:read-more{to="/docs/4.x/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/directory-structure/server"}
 
 ## Universal Deployment
 
@@ -49,14 +49,14 @@ Nitro offers the ability to deploy your Nuxt app anywhere, from a bare metal ser
 There are more than 15 presets to build your Nuxt app for different cloud providers and servers, including:
 
 - [Cloudflare Workers](https://workers.cloudflare.com)
-- [Netlify Functions](https://www.netlify.com/products/functions)
-- [Vercel Edge Network](https://vercel.com/docs/edge-network)
+- [Netlify Functions](https://www.netlify.com/platform/core/functions/)
+- [Vercel Cloud](https://vercel.com/home)
 
 Or for other runtimes:
 
 ::card-group
-  :card{icon="i-logos-deno" title="Deno" to="https://deno.land" target="_blank"}
-  :card{icon="i-logos-bun" title="Bun" to="https://bun.sh" target="_blank"}
+  :card{icon="i-logos-deno" title="Deno" to="https://deno.com" target="_blank"}
+  :card{icon="i-logos-bun" title="Bun" to="https://bun.com" target="_blank"}
 ::
 
 :read-more{to="/docs/4.x/getting-started/deployment"}

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory
-- Create utility and composable library using [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories
+- Create a component library using [`app/components/`](/docs/4.x/directory-structure/app/components) directory
+- Create utility and composable library using [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,7 +30,7 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -76,31 +76,50 @@ export default defineNuxtConfig({
 
 ::
 
-Nuxt uses [unjs/c12](https://c12.unjs.io) and [unjs/giget](https://giget.unjs.io) for extending remote layers. Check the documentation for more information and all available options.
+Nuxt uses [unjs/c12](https://github.com/unjs/c12) and [unjs/giget](https://github.com/unjs/giget) for extending remote layers. Check the documentation for more information and all available options.
 
 ## Layer Priority
 
-When using multiple layers, it's important to understand how they override each other:
+When using multiple layers, it's important to understand the override order. Layers with **higher priority** override layers with lower priority when they define the same files or components.
 
-1. **Layers in `extends`** - earlier entries have higher priority (first overrides second)
-2. **Auto-scanned local layers** from `~~/layers` directory in alphabetical order (Z overrides A)  
-3. **Your project** has the highest priority in the stack - it will always override other layers
+The priority order from highest to lowest is:
+
+1. **Your project files** - always have the highest priority
+2. **Auto-scanned layers** from `~~/layers` directory - sorted alphabetically (Z has higher priority than A)
+3. **Layers in `extends`** config - first entry has higher priority than second
+
+### When to Use Each
+
+- **`extends`** - Use for external dependencies (npm packages, remote repositories) or layers outside your project directory
+- **`~~/layers` directory** - Use for local layers that are part of your project
+
+::tip
+If you need to control the order of auto-scanned layers, you can prefix them with numbers: `~/layers/1.z-layer`, `~/layers/2.a-layer`. This way `2.a-layer` will have higher priority than `1.z-layer`.
+::
+
+### Example
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    // Highest priority (among extends)
+    // Local layer outside the project
     '../base',
-    // Medium priority
+    // NPM package
     '@my-themes/awesome',
-    // Lower priority
+    // Remote repository
     'github:my-themes/awesome#v1',
   ],
-  // Your project has the highest priority
 })
 ```
 
-This means if multiple layers define the same component, configuration, or file, the one with higher priority will be used.
+If you also have `~~/layers/custom`, the priority order is:
+- Your project files (highest)
+- `~~/layers/custom`
+- `../base`
+- `@my-themes/awesome`
+- `github:my-themes/awesome#v1` (lowest)
+
+This means your project files will override any layer, and `~~/layers/custom` will override anything in `extends`.
 
 ::read-more{to="/docs/4.x/guide/going-further/layers"}
 Read more about layers in the **Layer Author Guide**.

package/1.getting-started/16.deployment.md

@@ -95,7 +95,7 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/17.testing.md

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-circle-check
 ---
 
 ::tip
-If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/going-further/modules#testing).
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/modules/testing).
 ::
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
@@ -151,6 +151,37 @@ test/
 
 You can of course opt for any test structure, but keeping the Nuxt runtime environment separated from Nuxt end-to-end tests is important for test stability.
 
+#### TypeScript Support in Tests
+
+By default, test files in `test/nuxt/` and `tests/nuxt/` directories are included in the [Nuxt app TypeScript context](/docs/4.x/guide/concepts/typescript#how-nuxt-uses-project-references). That means they will recognise Nuxt aliases (like `~/`, `@/`, `#imports`) and TypeScript will be aware of auto-imports that work in your Nuxt app.
+
+::tip
+This matches the recommended structure where only tests that need the Nuxt runtime environment are placed in these directories. Unit tests in other directories like `test/unit/` can be added manually if needed.
+::
+
+##### Adding other test directories
+
+If you have tests in other directories that you will be running in the Nuxt Vitest environment, you can include them in the Nuxt app TypeScript context by adding them to your configuration:
+
+<!-- @case-police-ignore tsConfig -->
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    tsConfig: {
+      include: [
+        // this path is relative to the generated .nuxt/tsconfig.json
+        '../test/other-nuxt-context/**/*',
+      ],
+    },
+  },
+})
+```
+
+::important
+Unit tests should not depend on Nuxt runtime features like auto-imports or composables. Only add TypeScript path alias support if your tests import from your source files (e.g., `~/utils/helpers`), not for Nuxt-specific features.
+::
+
 #### Running Tests
 
 With the project setup, you can run different test suites:
@@ -265,9 +296,9 @@ it('can also mount an app', async () => {
 
 `renderSuspended` allows you to render any Vue component within the Nuxt environment using `@testing-library/vue`, allowing async setup and access to injections from your Nuxt plugins.
 
-This should be used together with utilities from Testing Library, e.g. `screen` and `fireEvent`. Install [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro) in your project to use these.
+This should be used together with utilities from Testing Library, e.g. `screen` and `fireEvent`. Install [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) in your project to use these.
 
-Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/#globals).
+Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/globals).
 
 The passed in component will be rendered inside a `<div id="test-wrapper"></div>`.
 
@@ -330,10 +361,10 @@ mockNuxtImport('useStorage', () => {
 ```
 
 ::note
-`mockNuxtImport` can only be used once per mocked import per test file. It is actually a macro that gets transformed to `vi.mock` and `vi.mock` is hoisted, as described [in the Vitest docs](https://vitest.dev/api/vi.html#vi-mock).
+`mockNuxtImport` can only be used once per mocked import per test file. It is actually a macro that gets transformed to `vi.mock` and `vi.mock` is hoisted, as described [in the Vitest docs](https://vitest.dev/api/vi#vi-mock).
 ::
 
-If you need to mock a Nuxt import and provide different implementations between tests, you can do it by creating and exposing your mocks using [`vi.hoisted`](https://vitest.dev/api/vi.html#vi-hoisted), and then use those mocks in `mockNuxtImport`. You then have access to the mocked imports, and can change the implementation between tests. Be careful to [restore mocks](https://vitest.dev/api/mock.html#mockrestore) before or after each test to undo mock state changes between runs.
+If you need to mock a Nuxt import and provide different implementations between tests, you can do it by creating and exposing your mocks using [`vi.hoisted`](https://vitest.dev/api/vi#vi-hoisted), and then use those mocks in `mockNuxtImport`. You then have access to the mocked imports, and can change the implementation between tests. Be careful to [restore mocks](https://vitest.dev/api/mock#mockrestore) before or after each test to undo mock state changes between runs.
 
 ```ts twoslash
 import { vi } from 'vitest'

package/1.getting-started/18.upgrade.md

@@ -54,7 +54,7 @@ export default defineNuxtConfig({
 
 When you set your `future.compatibilityVersion` to `5`, defaults throughout your Nuxt configuration will change to opt in to Nuxt v5 behavior, including:
 
-- **Vite Environment API**: Automatically enables the new [Vite Environment API](#migration-to-vite-environment-api) for improved build configuration
+- **Vite Environment API**: Automatically enables the new [Vite Environment API](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for improved build configuration
 - Other Nuxt 5 improvements and changes as they become available
 
 ::note
@@ -74,7 +74,7 @@ Nuxt 5 migrates to Vite 6's new [Environment API](https://vite.dev/guide/api-env
 Previously, Nuxt used separate client and server Vite configurations. Now, Nuxt uses a shared Vite configuration with environment-specific plugins that use the `applyToEnvironment()` method to target specific environments.
 
 ::tip
-You can test this feature early by setting `future.compatibilityVersion: 5` (see [Testing Nuxt 5](#testing-nuxt-5)) or by enabling it explicitly with `experimental.viteEnvironmentApi: true`.
+You can test this feature early by setting `future.compatibilityVersion: 5` (see [Testing Nuxt 5](/docs/4.x/getting-started/upgrade#testing-nuxt-5)) or by enabling it explicitly with `experimental.viteEnvironmentApi: true`.
 ::
 
 **Key changes:**
@@ -208,35 +208,35 @@ Breaking or significant changes are documented below along with migration steps
 
 ### 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.
+To facilitate the upgrade process, we have collaborated with the [Codemod](https://github.com/codemod/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).
+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://app.codemod.com/registry).
 
 You can run all the codemods mentioned in this guide using the following `codemod` recipe:
 
 ::code-group
 
 ```bash [npm]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 npx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [yarn]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 yarn dlx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [pnpm]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 pnpm dlx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [bun]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 bun x codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
@@ -463,7 +463,7 @@ export default defineNuxtConfig({
 // 4. project-module-2 (can override layer modules)
 ```
 
-If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/4.x/guide/going-further/modules#custom-hooks) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
+If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/4.x/guide/modules/recipes-advanced) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
 
 👉 See [PR #31507](https://github.com/nuxt/nuxt/pull/31507) and [issue #25719](https://github.com/nuxt/nuxt/issues/25719) for more details.
 
@@ -1053,7 +1053,7 @@ In Nuxt v3 we moved to a 'virtual' syntax with a `getContents()` function which
 
 In addition, `lodash/template` has had a succession of security issues. These do not really apply to Nuxt projects because it is being used at build-time, not runtime, and by trusted code. However, they still appear in security audits. Moreover, `lodash` is a hefty dependency and is unused by most projects.
 
-Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](http://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself.
+Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](https://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself.
 
 #### Migration Steps
 
@@ -1212,22 +1212,30 @@ However, to take advantage of improved type checking, you can opt in to the new
     Augmenting types from outside the `app/`, `server/`, or `shared/` directories will not work with the new project references setup.
     ::
 
-5. **Configure Node.js TypeScript options** if needed:
+5. **Configure TypeScript options** if needed:
    <!-- @case-police-ignore tsConfig -->
 
    ```ts
    export default defineNuxtConfig({
      typescript: {
-       // Customize app/server TypeScript config
+       // customize tsconfig.app.json
        tsConfig: {
-         compilerOptions: {
-           strict: true,
-         },
+         // ...
+       },
+       // customize tsconfig.shared.json
+       sharedTsConfig: {
+         // ...
        },
-       // Customize build-time TypeScript config
+       // customize tsconfig.node.json
        nodeTsConfig: {
-         compilerOptions: {
-           strict: true,
+         // ...
+       },
+     },
+     nitro: {
+       typescript: {
+         // customize tsconfig.server.json
+         tsConfig: {
+           // ...
          },
        },
      },
@@ -1304,23 +1312,23 @@ Read more about Nitro's prerender configuration options.
 
 In the table below, there is a quick comparison between 3 versions of Nuxt:
 
-Feature / Version        | Nuxt 2          | Nuxt Bridge      | Nuxt 3+
--------------------------|-----------------|------------------|---------
-Vue                      | 2               | 2                | 3
-Stability                | 😊 Stable      | 😊 Stable         | 😊 Stable
-Performance              | 🏎 Fast        | ✈️ Faster          | 🚀 Fastest
-Nitro Engine             | ❌             | ✅                | ✅
-ESM support              | 🌙 Partial     | 👍 Better         | ✅
-TypeScript               | ☑️ Opt-in       | 🚧 Partial        | ✅
-Composition API          | ❌             | 🚧 Partial        | ✅
-Options API              | ✅             | ✅                | ✅
-Components Auto Import   | ✅             | ✅                | ✅
-`<script setup>` syntax  | ❌             | 🚧 Partial        | ✅
-Auto Imports             | ❌             | ✅                | ✅
-webpack                  | 4              | 4                 | 5
-Vite                     | ⚠️ Partial      | 🚧 Partial        | ✅
-Nuxt CLI                 | ❌ Old         | ✅ nuxt           | ✅ nuxt
-Static sites             | ✅             | ✅                | ✅
+| Feature / Version       | Nuxt 2     | Nuxt Bridge | Nuxt 3+    |
+|-------------------------|------------|-------------|------------|
+| Vue                     | 2          | 2           | 3          |
+| Stability               | 😊 Stable  | 😊 Stable   | 😊 Stable  |
+| Performance             | 🏎 Fast    | ✈️ Faster   | 🚀 Fastest |
+| Nitro Engine            | ❌          | ✅           | ✅          |
+| ESM support             | 🌙 Partial | 👍 Better   | ✅          |
+| TypeScript              | ☑️ Opt-in  | 🚧 Partial  | ✅          |
+| Composition API         | ❌          | 🚧 Partial  | ✅          |
+| Options API             | ✅          | ✅           | ✅          |
+| Components Auto Import  | ✅          | ✅           | ✅          |
+| `<script setup>` syntax | ❌          | 🚧 Partial  | ✅          |
+| Auto Imports            | ❌          | ✅           | ✅          |
+| webpack                 | 4          | 4           | 5          |
+| Vite                    | ⚠️ Partial | 🚧 Partial  | ✅          |
+| Nuxt CLI                | ❌ Old      | ✅ nuxt      | ✅ nuxt     |
+| Static sites            | ✅          | ✅           | ✅          |
 
 ## Nuxt 2 to Nuxt 3+
 

package/{2.guide/1.directory-structure → 2.directory-structure}/0.nuxt.md

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-temp
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
 ::
 
 This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.

package/{2.guide/1.directory-structure → 2.directory-structure}/0.output.md

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-package
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the build output to your repository.
 ::
 
 Use this directory to deploy your Nuxt application to production.

package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.assets.md

@@ -9,8 +9,8 @@ The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
+- Images that won't be served from the [`public/`](/docs/4.x/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/directory-structure/public) directory.
 
 :read-more{to="/docs/4.x/getting-started/assets"}

package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.components.md

@@ -163,7 +163,7 @@ Read more about the options for `hydrate-on-visible`.
 ::
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnVisible` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-visible).
+Under the hood, this uses Vue's built-in [`hydrateOnVisible` strategy](https://vuejs.org/guide/components/async#hydrate-on-visible).
 ::
 
 #### `hydrate-on-idle`
@@ -181,7 +181,7 @@ You can also pass a number which serves as a max timeout.
 ```
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-idle).
+Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuejs.org/guide/components/async#hydrate-on-idle).
 ::
 
 #### `hydrate-on-interaction`
@@ -199,7 +199,7 @@ Hydrates the component after a specified interaction (e.g., click, mouseover).
 If you do not pass an event or list of events, it defaults to hydrating on `pointerenter`, `click` and `focus`.
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-interaction).
+Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https://vuejs.org/guide/components/async#hydrate-on-interaction).
 ::
 
 #### `hydrate-on-media-query`
@@ -215,7 +215,7 @@ Hydrates the component when the window matches a media query.
 ```
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-media-query).
+Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https://vuejs.org/guide/components/async#hydrate-on-media-query).
 ::
 
 #### `hydrate-after`
@@ -358,7 +358,7 @@ Any nested directories need to be added first as they are scanned in order.
 
 ## npm Packages
 
-If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/guide/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -438,7 +438,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](/docs/4.x/guide/directory-structure/app/components#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/4.x/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 

package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.composables.md

@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/4.x/guide/directory-structure/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/4.x/directory-structure/app/plugins#providing-helpers) from composables:
 
 ```ts [app/composables/test.ts]
 export const useHello = () => {
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.layouts.md

@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/directory-structure/app/app):
 
 ```vue [app/app.vue]
 <template>
@@ -34,7 +34,7 @@ If no layout is specified, `app/layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/directory-structure/app/app) instead.
 ::
 
 ::important
@@ -74,7 +74,7 @@ definePageMeta({
 </script>
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/pages#page-metadata"}
+::read-more{to="/docs/4.x/directory-structure/app/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 

package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.middleware.md

@@ -20,7 +20,7 @@ Name of middleware are normalized to kebab-case: `myMiddleware` becomes `my-midd
 ::
 
 ::note
-Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
 ::
 
 :video-accordion{title="Watch a video from Vue School on all 3 kinds of middleware" videoId="761471577" platform="vimeo"}
@@ -48,13 +48,13 @@ Nuxt provides two globally available helpers that can be returned directly from
 1. [`navigateTo`](/docs/4.x/api/utils/navigate-to) - Redirects to the given route
 2. [`abortNavigation`](/docs/4.x/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
 
-Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
+Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
 
 Possible return values are:
 
 * nothing (a simple `return` or no return at all) - does not block navigation and will move to the next middleware function, if any, or complete the route navigation
-* `return navigateTo('/')` - redirects to the given path and will set the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302) if the redirect happens on the server side
-* `return navigateTo('/', { redirectCode: 301 })` - redirects to the given path and will set the redirect code to [`301` Moved Permanently](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301) if the redirect happens on the server side
+* `return navigateTo('/')` - redirects to the given path and will set the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/302) if the redirect happens on the server side
+* `return navigateTo('/', { redirectCode: 301 })` - redirects to the given path and will set the redirect code to [`301` Moved Permanently](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/301) if the redirect happens on the server side
 * `return abortNavigation()` - stops the current navigation
 * `return abortNavigation(error)` - rejects the current navigation with an error
 
@@ -62,7 +62,7 @@ Possible return values are:
 :read-more{to="/docs/4.x/api/utils/abort-navigation"}
 
 ::important
-We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
+We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) may work but there may be breaking changes in future.
 ::
 
 ## Middleware Order