Merge branch 'main' into feat/named_export_components

.github/workflows/autofix-docs.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:

.github/workflows/autofix.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:

.github/workflows/benchmark.yml

@@ -29,7 +29,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:

.github/workflows/changelog.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - run: corepack enable

.github/workflows/check-links.yml

@@ -25,10 +25,10 @@ jobs:
           restore-keys: cache-lychee-
 
       # check links with Lychee
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
 
       - name: Lychee link checker
-        uses: lycheeverse/lychee-action@054a8e8c7a88ada133165c6633a49825a32174e2 # for v1.8.0
+        uses: lycheeverse/lychee-action@25a231001d1723960a301b7d4c82884dc7ef857d # for v1.8.0
         with:
           # arguments with file types to check
           args: >-

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -72,7 +72,7 @@ jobs:
       - build
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -83,7 +83,7 @@ jobs:
         run: pnpm install
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4
+        uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         with:
           languages: javascript
           queries: +security-and-quality
@@ -95,7 +95,7 @@ jobs:
           path: packages
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4
+        uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         with:
           category: "/language:javascript"
 
@@ -111,7 +111,7 @@ jobs:
         module: ["bundler", "node"]
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -142,7 +142,7 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -166,7 +166,7 @@ jobs:
     needs:
       - build
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -218,7 +218,7 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
@@ -246,9 +246,9 @@ jobs:
           TEST_CONTEXT: ${{ matrix.context }}
           TEST_V4: ${{ matrix.version == 'v4' }}
           TEST_PAYLOAD: ${{ matrix.payload }}
-          SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || runner.os == 'Windows' }}
+          SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || matrix.payload == 'js' || runner.os == 'Windows' }}
 
-      - uses: codecov/codecov-action@5ecb98a3c6b747ed38dc09f787459979aebb39be # v4.3.1
+      - uses: codecov/codecov-action@125fc84a9a348dbcf27191600683ec096ec9021c # v4.4.1
         if: github.event_name != 'push' && matrix.env == 'built' && matrix.builder == 'vite' && matrix.context == 'default' && matrix.os == 'ubuntu-latest' && matrix.manifest == 'manifest-on'
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
@@ -270,7 +270,7 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - run: corepack enable
@@ -309,7 +309,7 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - run: corepack enable

.github/workflows/dependency-review.yml

@@ -17,6 +17,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@0c155c5e8556a497adf53f2c18edabf945ed8e70 # v4.3.2

.github/workflows/docs.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - run: corepack enable
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:

.github/workflows/introspect.yml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions
       - name: Check workflow files
         run: |

.github/workflows/nuxt2-edge.yml

@@ -21,7 +21,7 @@ jobs:
     permissions:
       id-token: write
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           ref: '2.x'
           fetch-depth: 0 # All history

.github/workflows/release-pr.yml

@@ -22,14 +22,14 @@ jobs:
 
     steps:
       - name: Ensure action is by maintainer
-        uses: octokit/request-action@21d174fc38ff59af9cf4d7e07347d29df6dbaa99 # v2.3.0
+        uses: octokit/request-action@872c5c97b3c85c23516a572f02b31401ef82415d # v2.3.1
         id: check_role
         with:
           route: GET /repos/nuxt/nuxt/collaborators/${{ github.event.comment.user.login }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           ref: refs/pull/${{ github.event.issue.number }}/merge
           fetch-depth: 0

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 20
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - run: corepack enable

.github/workflows/reproduire.yml

@@ -10,7 +10,7 @@ jobs:
   reproduire:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
         with:
           label: needs reproduction

.github/workflows/scorecards.yml

@@ -32,12 +32,12 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -68,7 +68,7 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4
+        uses: github/codeql-action/upload-sarif@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         if: github.repository == 'nuxt/nuxt' && success()
         with:
           sarif_file: results.sarif

README.md

@@ -33,6 +33,7 @@ It provides a number of features that make it easy to build fast, SEO-friendly,
 - ❤️  [Contribute](#contribute)
 - 🏠 [Local Development](#local-development)
 - ⛰️ [Nuxt 2](#nuxt-2)
+- 🛟 [Professional Support](#professional-support)
 - 🔗 [Follow us](#follow-us)
 - ⚖️ [License](#license)
 
@@ -104,6 +105,13 @@ Follow the docs to [Set Up Your Local Development Environment](https://nuxt.com/
 
 You can find the code for Nuxt 2 on the [`2.x` branch](https://github.com/nuxt/nuxt/tree/2.x) and the documentation at [v2.nuxt.com](https://v2.nuxt.com).
 
+If you expect to be using Nuxt 2 beyond the EOL (End of Life) date (June 30, 2024), and still need a maintained version that can satisfy security and browser compatibility requirements, make sure to check out [HeroDevs’ NES (Never-Ending Support) Nuxt 2](https://www.herodevs.com/support/nuxt-nes?utm_source=nuxt-github&utm_medium=nuxt-readme).
+
+## <a name="professional-support">🛟 Professional Support</a>
+
+- Technical audit & consulting: [Nuxt Experts](https://nuxt.com/enterprise/support)
+- Custom development & more: [Nuxt Agencies Partners](https://nuxt.com/enterprise/agencies)
+
 ## <a name="follow-us">🔗 Follow us</a>
 
 <p valign="center">

docs/1.getting-started/11.testing.md

@@ -10,6 +10,10 @@ If you are a module author, you can find more specific information in the [Modul
 
 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.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
+Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`.
+::
+
 ## Installation
 
 In order to allow you to manage your other testing dependencies, `@nuxt/test-utils` ships with various optional peer dependencies. For example:
@@ -160,21 +164,32 @@ export default defineVitestConfig({
 `mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:
 
 ```ts twoslash
-import type { Component } from 'vue'
 import { it, expect } from 'vitest'
-declare const SomeComponent: Component
+import type { Component } from 'vue'
-declare const App: Component
+declare module '#components' {
+  export const SomeComponent: Component
+}
 // ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { SomeComponent } from '#components'
 
 it('can mount some component', async () => {
     const component = await mountSuspended(SomeComponent)
     expect(component.text()).toMatchInlineSnapshot(
-        'This is an auto-imported component'
+        '"This is an auto-imported component"'
     )
 })
 
+```
+
+```ts twoslash
+import { it, expect } from 'vitest'
+// ---cut---
+// tests/components/SomeComponents.nuxt.spec.ts
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import App from '~/app.vue'
+
 // tests/App.nuxt.spec.ts
 it('can also mount an app', async () => {
     const component = await mountSuspended(App, { route: '/test' })
@@ -199,13 +214,15 @@ The passed in component will be rendered inside a `<div id="test-wrapper"></div>
 Examples:
 
 ```ts twoslash
-import type { Component } from 'vue'
 import { it, expect } from 'vitest'
-declare const SomeComponent: Component
+import type { Component } from 'vue'
-declare const App: Component
+declare module '#components' {
+  export const SomeComponent: Component
+}
 // ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { SomeComponent } from '#components'
 import { screen } from '@testing-library/vue'
 
 it('can render some component', async () => {
@@ -215,13 +232,11 @@ it('can render some component', async () => {
 ```
 
 ```ts twoslash
-import type { Component } from 'vue'
 import { it, expect } from 'vitest'
-declare const SomeComponent: Component
-declare const App: Component
 // ---cut---
 // tests/App.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'
+import App from '~/app.vue'
 
 it('can also render an app', async () => {
   const html = await renderSuspended(App, { route: '/test' })
@@ -358,7 +373,7 @@ registerEndpoint('/test/', {
 })
 ```
 
-> **Note**: If your requests in a component go to external API, you can use `baseURL` and then make it empty using Nuxt Environment Config (`$test`) so all your requests will go to Nitro server.
+> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
 
 #### Conflict with End-To-End Testing
 

docs/1.getting-started/12.upgrade.md

@@ -25,13 +25,17 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this
 
 Until then, it is possible to test many of Nuxt 4's breaking changes on the nightly release channel.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"}
+Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already.
+::
+
 ### Opting in to Nuxt 4
 
 First, opt in to the nightly release channel [following these steps](/docs/guide/going-further/nightly-release-channel#opting-in).
 
 Then you can set your `compatibilityVersion` to match Nuxt 4 behavior:
 
-```ts
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4,
@@ -42,7 +46,9 @@ export default defineNuxtConfig({
   //   app: 'app'
   // },
   // experimental: {
+  //   sharedPrerenderData: false,
   //   compileTemplate: true,
+  //   resetAsyncDataToUndefined: true,
   //   templateUtils: true,
   //   relativeWatchPaths: true,
   //   defaults: {
@@ -100,6 +106,7 @@ app/
   pages/
   plugins/
   utils/
+  app.config.ts
   app.vue
   router.options.ts
 modules/
@@ -126,12 +133,12 @@ nuxt.config.ts
 ##### Migration Steps
 
 1. Create a new directory called `app/`.
-1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`. 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`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
 
 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.) You can also force a v3 folder structure with the following configuration:
 
-```ts
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   // This reverts the new srcDir default from `app` back to your root directory
   srcDir: '.',
@@ -142,6 +149,104 @@ export default defineNuxtConfig({
 })
 ```
 
+#### Shared Prerender Data
+
+🚦 **Impact Level**: Medium
+
+##### What Changed
+
+We enabled a previously experimental feature to share data from `useAsyncData` and `useFetch` calls, across different pages. See [original PR](https://github.com/nuxt/nuxt/pull/24894).
+
+##### Reasons for Change
+
+This feature automatically shares payload _data_ between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and fetch the same data in different pages.
+
+For example, if your site requires a `useFetch` call for every page (for example, to get navigation data for a menu, or site settings from a CMS), this data would only be fetched once when prerendering the first page that uses it, and then cached for use when prerendering other pages.
+
+##### Migration Steps
+
+Make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically for you.)
+
+```ts [app/pages/test/[slug\\].vue]
+// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
+// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
+const route = useRoute()
+const { data } = await useAsyncData(async () => {
+  return await $fetch(`/api/my-page/${route.params.slug}`)
+})
+// Instead, you should use a key that uniquely identifies the data fetched.
+const { data } = await useAsyncData(route.params.slug, async () => {
+  return await $fetch(`/api/my-page/${route.params.slug}`)
+})
+```
+
+Alternatively, you can disable this feature with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    sharedPrerenderData: false
+  }
+})
+```
+
+#### Default `data` and `error` values in `useAsyncData` and `useFetch`
+
+🚦 **Impact Level**: Minimal
+
+##### What Changed
+
+`data` and `error` objects returned from `useAsyncData` will now default to `undefined`.
+
+##### Reasons for Change
+
+Previously `data` was initialized to `null` but reset in `clearNuxtData` to `undefined`. `error` was initialized to `null`. This change is to bring greater consistency.
+
+##### Migration Steps
+
+If you encounter any issues you can revert back to the previous behavior with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    defaults: {
+      useAsyncData: {
+        value: 'null',
+        errorValue: 'null'
+      }
+    }
+  }
+})
+```
+
+Please report an issue if you are doing this, as we do not plan to keep this as configurable.
+
+#### Respect defaults when clearing `data` in `useAsyncData` and `useFetch`
+
+🚦 **Impact Level**: Minimal
+
+##### What Changed
+
+If you provide a custom `default` value for `useAsyncData`, this will now be used when calling `clear` or `clearNuxtData` and it will be reset to its default value rather than simply unset.
+
+##### Reasons for Change
+
+Often users set an appropriately empty value, such as an empty array, to avoid the need to check for `null`/`undefined` when iterating over it. This should be respected when resetting/clearing the data.
+
+##### Migration Steps
+
+If you encounter any issues you can revert back to the previous behavior, for now, with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    resetAsyncDataToUndefined: true,
+  }
+})
+```
+
+Please report an issue if you are doing so, as we do not plan to keep this as configurable.
+
 #### Shallow Data Reactivity in `useAsyncData` and `useFetch`
 
 🚦 **Impact Level**: Minimal
@@ -166,7 +271,7 @@ In most cases, no migration steps are required, but if you rely on the reactivit
    + const { data } = useFetch('/api/test', { deep: true })
    ```
 1. You can change the default behavior on a project-wide basis (not recommended):
-   ```ts
+   ```ts twoslash [nuxt.config.ts]
    export default defineNuxtConfig({
      experimental: {
        defaults: {
@@ -205,6 +310,34 @@ However, if you are a module author using the `builder:watch` hook and wishing t
   })
 ```
 
+#### Directory index scanning
+
+🚦 **Impact Level**: Medium
+
+##### What Changed
+
+Child folders in your `middleware/` folder are also scanned for `index` files and these are now also registered as middleware in your project.
+
+##### Reasons for Change
+
+Nuxt scans a number of folders automatically, including `middleware/` and `plugins/`.
+
+Child folders in your `plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories.
+
+##### Migration Steps
+
+Probably no migration is necessary but if you wish to revert to previous behavior you can add a hook to filter out these middleware:
+
+```ts
+export default defineNuxtConfig({
+  hooks: {
+    'app:resolve'(app) {
+      app.middleware = app.middleware.filter(mw => !/\/index\.[^/]+$/.test(mw.path))
+    }
+  }
+})
+```
+
 #### Template Compilation Changes
 
 🚦 **Impact Level**: Minimal
@@ -265,6 +398,29 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => {
 const importName = genSafeVariableName
 ```
 
+#### Removal of Experimental Features
+
+🚦 **Impact Level**: Minimal
+
+##### What Changed
+
+Four experimental features are no longer configurable in Nuxt 4:
+
+* `treeshakeClientOnly` will be `true` (default since v3.0)
+* `configSchema` will be `true` (default since v3.3)
+* `polyfillVueUseHead` will be `false` (default since v3.4)
+* `respectNoSSRHeader` will be `false` (default since v3.4)
+
+##### Reasons for Change
+
+These options have been set to their current values for some time and we do not have a reason to believe that they need to remain configurable.
+
+##### Migration Steps
+
+* `polyfillVueUseHead` is implementable in user-land with [this plugin](https://github.com/nuxt/nuxt/blob/f209158352b09d1986aa320e29ff36353b91c358/packages/nuxt/src/head/runtime/plugins/vueuse-head-polyfill.ts#L10-L11)
+
+* `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
+
 ## Nuxt 2 vs Nuxt 3
 
 In the table below, there is a quick comparison between 3 versions of Nuxt:
@@ -272,7 +428,7 @@ 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      | 😌 Semi-stable    | 😊 Stable
+Stability                | 😊 Stable      | 😊 Stable         | 😊 Stable
 Performance              | 🏎 Fast        | ✈️ Faster          | 🚀 Fastest
 Nitro Engine             | ❌             | ✅                | ✅
 ESM support              | 🌙 Partial     | 👍 Better         | ✅

docs/1.getting-started/3.configuration.md

@@ -46,6 +46,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
+Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
+::
+
 ::note
 If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use.
 ::

docs/1.getting-started/6.data-fetching.md

@@ -54,6 +54,10 @@ const { data: count } = await useFetch('/api/count')
 
 This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
 :read-more{to="/docs/api/composables/use-fetch"}
 
 :link-example{to="/docs/examples/features/data-fetching"}
@@ -93,6 +97,10 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
 It's developer experience sugar for the most common use case.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
+Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
+::
+
 There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
 
 ```vue [pages/users.vue]

docs/1.getting-started/7.state-management.md

@@ -8,6 +8,10 @@ Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to cr
 
 [`useState`](/docs/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.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+Watch a video from Alexander Lichter about why and when to use `useState()`.
+::
+
 ::important
 Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
@@ -208,6 +212,10 @@ const color = useColor() // Same as useState('color')
 </template>
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
+Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
+::
+
 ## Using third-party libraries
 
 Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).

docs/1.getting-started/8.server.md

@@ -20,6 +20,10 @@ Using Nitro gives Nuxt superpowers:
 
 Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
+Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
+::
+
 ## Server Endpoints & Middleware
 
 You can easily manage the server-only part of your Nuxt app, from API endpoints to middleware.

docs/1.getting-started/9.layers.md

@@ -51,7 +51,7 @@ Read more about layers in the **Layer Author Guide**.
 Watch a video from Learn Vue about Nuxt Layers.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA&t=271s" target="_blank"}
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
 Watch a video from Alexander Lichter about Nuxt Layers.
 ::
 

docs/2.guide/0.index.md

@@ -16,4 +16,7 @@ surround: false
   ::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"}
   Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
   ::
+  ::card{icon="i-ph-book-open-duotone" title="Recipes" to="/docs/guide/recipes"}
+  Find solutions to common problems and learn how to implement them in your Nuxt project.
+  ::
 ::

docs/2.guide/1.concepts/1.auto-imports.md

@@ -60,6 +60,10 @@ That means that (with very few exceptions) you cannot use them outside a Nuxt pl
 
 If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
+Watch a video from Alexander Lichter about handling async code in composables and fixing `Nuxt instance is unavailable` in your app.
+::
+
 ::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"}
 Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
 ::
@@ -168,3 +172,7 @@ export default defineNuxtConfig({
   }
 })
 ```
+
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
+Watch a video from Alexander Lichter on how to easily set up custom auto imports.
+::

docs/2.guide/1.concepts/8.typescript.md

@@ -65,6 +65,10 @@ This file contains the recommended basic TypeScript configuration for your proje
 
 [Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
 
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"}
+Watch a video from Daniel Roe explaining built-in Nuxt aliases.
+::
+
 ::note
 Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
 ::

docs/2.guide/2.directory-structure/1.components.md

@@ -259,7 +259,7 @@ Watch Learn Vue video about Nuxt Server Components.
 ::
 
 ::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
-Read Daniel Roe's guide to Nuxt server components
+Read Daniel Roe's guide to Nuxt Server Components.
 ::
 
 ### Standalone server components

docs/2.guide/2.directory-structure/1.modules.md

@@ -46,7 +46,11 @@ export default defineEventHandler(() => {
 
 When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
 
-Local modules are registered in alphabetical order. You can change the order by adding a number to the front of each directory name:
+Modules are executed in the following sequence:
+- First, the modules defined in [`nuxt.config.ts`](/docs/api/nuxt-config#modules-1) are loaded.
+- Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
+
+You can change the order of local module by adding a number to the front of each directory name:
 
 ```bash [Directory structure]
 modules/

docs/2.guide/2.directory-structure/1.plugins.md

@@ -76,6 +76,10 @@ export default defineNuxtPlugin({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
+Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
+::
+
 ::note
 If you are using the object-syntax, the properties may be statically analyzed in future to produce a more optimized build. So you should not define them at runtime. :br
 For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.

docs/2.guide/2.directory-structure/2.env.md

@@ -33,11 +33,25 @@ npx nuxi dev --dotenv .env.local
 
 When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
 
-## Production Preview
+## Production
 
 **After your server is built**, you are responsible for setting environment variables when you run the server.
 
-Your `.env` file will not be read at this point. How you do this is different for every environment.
+Your `.env` files will not be read at this point. How you do this is different for every environment.
+
+This design decision was made to ensure compatibility across various deployment environments, some of which may not have a traditional file system available, such as serverless platforms or edge networks like Cloudflare Workers.
+
+Since `.env` files are not used in production, you must explicitly set environment variables using the tools and methods provided by your hosting environment. Here are some common approaches:
+
+* You can pass the environment variables as arguments using the terminal:
+
+   `$ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs`
+
+* You can set environment variables in shell configuration files like `.bashrc` or `.profile`.
+
+* Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
+
+## Production Preview
 
 For local production preview purpose, we recommend using [`nuxi preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
 

docs/2.guide/3.going-further/1.experimental-features.md

@@ -306,6 +306,10 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
+Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
+::
+
 ## watcher
 
 Set an alternative watcher that will be used as the watching service for Nuxt.
@@ -340,6 +344,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
+Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
+::
+
 It is particularly important when enabling this feature to make sure that any unique key of your data
 is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch
 data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch`
@@ -378,6 +386,16 @@ This option allows exposing some route metadata defined in `definePageMeta` at b
 
 This only works with static or strings/arrays rather than variables or conditional assignment. See [original issue](https://github.com/nuxt/nuxt/issues/24770) for more information and context.
 
+<!-- You can disable this feature if it causes issues in your project.
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    scanPageMeta: false
+  }
+})
+``` -->
+
 ## cookieStore
 
 Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.

docs/2.guide/3.going-further/10.runtime-config.md

@@ -61,6 +61,10 @@ Setting the default of `runtimeConfig` values to *differently named environment
 It is advised to use environment variables that match the structure of your `runtimeConfig` object.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
+Watch a video from Alexander Lichter showcasing the top mistake developers make using runtimeConfig.
+::
+
 #### Example
 
 ```sh [.env]

docs/2.guide/3.going-further/4.kit.md

@@ -15,6 +15,10 @@ Discover all Nuxt Kit utilities.
 
 You can install the latest Nuxt Kit by adding it to the `dependencies` section of your `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by Nuxt.
 
+::note
+`@nuxt/kit` and `@nuxt/schema` are key dependencies for Nuxt. If you are installing it separately, make sure that the versions of `@nuxt/kit` and `@nuxt/schema` are equal to or greater than your `nuxt` version to avoid any unexpected behavior.
+::
+
 ```json [package.json]
 {
   "dependencies": {

docs/2.guide/4.recipes/3.custom-usefetch.md

@@ -0,0 +1,105 @@
+---
+navigation.title: 'Custom useFetch'
+title: Custom useFetch in Nuxt
+description: How to create a custom fetcher for calling your external API in Nuxt 3.
+---
+
+When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
+
+The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
+
+However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
+
+## Custom `$fetch`
+
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
+
+::note
+`$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
+::
+
+Let's pretend here that:
+- The main API is https://api.nuxt.com
+- We are storing the JWT token in a session with [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
+- If the API responds with a `401` status code, we redirect the user to the `/login` page
+
+```ts [plugins/api.ts]
+export default defineNuxtPlugin(() => {
+  const { session } = useUserSession()
+
+  const api = $fetch.create({
+    baseURL: 'https://api.nuxt.com',
+    onRequest({ request, options, error }) {
+      if (session.value?.token) {
+        const headers = options.headers ||= {}
+        if (Array.isArray(headers)) {
+          headers.push(['Authorization', `Bearer ${session.value?.token}`])
+        } else if (headers instanceof Headers) {
+          headers.set('Authorization', `Bearer ${session.value?.token}`)
+        } else {
+          headers.Authorization = `Bearer ${session.value?.token}`
+        }
+      }
+    },
+    async onResponseError({ response }) {
+      if (response.status === 401) {
+        await navigateTo('/login')
+      }
+    }
+  })
+
+  // Expose to useNuxtApp().$api
+  return {
+    provide: {
+      api
+    }
+  }
+})
+```
+
+With this Nuxt plugin, `$api` is exposed from `useNuxtApp()` to make API calls directly from the Vue components:
+
+```vue [app.vue]
+<script setup>
+const { $api } = useNuxtApp()
+const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
+</script>
+```
+
+::callout
+Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
+::
+
+## Custom `useFetch`
+
+Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
+
+```ts [composables/useAPI.ts]
+import type { UseFetchOptions } from 'nuxt/app'
+
+export function useAPI<T>(
+  url: string | (() => string),
+  options: Omit<UseFetchOptions<T>, 'default'> & { default: () => T | Ref<T> },
+) {
+  return useFetch(url, {
+    ...options,
+    $fetch: useNuxtApp().$api
+  })
+}
+```
+
+Let's use the new composable and have a nice and clean component:
+
+```vue [app.vue]
+<script setup>
+const { data: modules } = await useAPI('/modules')
+</script>
+```
+
+::callout{icon="i-simple-icons-youtube" color="red" to="https://www.youtube.com/watch?v=jXH8Tr-exhI"}
+Watch a video about custom `$fetch` and Repository Pattern in Nuxt.
+::
+
+::note
+We are currently discussing to find a cleaner way to let you create a custom fetcher, see https://github.com/nuxt/nuxt/issues/14736.
+::

docs/3.api/1.components/4.nuxt-link.md

@@ -25,6 +25,22 @@ In this example, we use `<NuxtLink>` component to link to another page of the ap
 </template>
 ```
 
+### Passing Params to Dynamic Routes
+
+In this example, we pass the `id` param to link to the route `~/pages/posts/[id].vue`.
+
+```vue [pages/index.vue]
+<template>
+  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
+    Post 123
+  </NuxtLink>
+</template>
+```
+
+::tip
+Check out the Pages panel in Nuxt DevTools to see the route name and the params it might take.
+::
+
 ### Handling 404s
 
 When using `<NuxtLink>` for `/public` directory files or when pointing to a different app on the same domain, you should use the `external` prop.

docs/3.api/1.components/5.nuxt-loading-indicator.md

@@ -30,6 +30,7 @@ You can pass custom HTML or components through the loading indicator's default s
 ## Props
 
 - `color`: The color of the loading bar. It can be set to `false` to turn off explicit color styling.
+- `errorColor`: The color of the loading bar when `error` is set to `true`.
 - `height`: Height of the loading bar, in pixels (default `3`).
 - `duration`: Duration of the loading bar, in milliseconds (default `2000`).
 - `throttle`: Throttle the appearing and hiding, in milliseconds (default `200`).

docs/3.api/2.composables/use-cookie.md

@@ -59,13 +59,10 @@ Use these options to set the expiration of the cookie.
 The given number will be converted to an integer by rounding down. By default, no maximum age is set.
 
 `expires`: Specifies the `Date` object to be the value for the [`Expires` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.1).
-By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and
+By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application.
-will delete it on a condition like exiting a web browser application.
 
 ::note
-The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and
+The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time!
-`maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this,
-so if both are set, they should point to the same date and time!
 ::
 
 ::note
@@ -74,22 +71,29 @@ If neither of `expires` and `maxAge` is set, the cookie will be session-only and
 
 ### `httpOnly`
 
-Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy,
+Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy, the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
-the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
 
 ::warning
-Be careful when setting this to `true`, as compliant clients will not allow client-side
+Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`.
-JavaScript to see the cookie in `document.cookie`.
 ::
 
 ### `secure`
 
-Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy,
+Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy, the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
-the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
 
 ::warning
-Be careful when setting this to `true`, as compliant clients will not send the cookie back to
+Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
-the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
+::
+
+### `partitioned`
+
+Specifies the `boolean` value for the [`Partitioned` `Set-Cookie`](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1) attribute. When truthy, the `Partitioned` attribute is set, otherwise it is not. By default, the `Partitioned` attribute is not set.
+
+::note
+This is an attribute that has not yet been fully standardized, and may change in the future.
+This also means many clients may ignore this attribute until they understand it.
+
+More information can be found in the [proposal](https://github.com/privacycg/CHIPS).
 ::
 
 ### `domain`
@@ -114,23 +118,18 @@ More information about the different enforcement levels can be found in [the spe
 
 ### `encode`
 
-Specifies a function that will be used to encode a cookie's value. Since the value of a cookie
+Specifies a function that will be used to encode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.
-has a limited character set (and must be a simple string), this function can be used to encode
-a value into a string suited for a cookie's value.
 
 The default encoder is the `JSON.stringify` + `encodeURIComponent`.
 
 ### `decode`
 
-Specifies a function that will be used to decode a cookie's value. Since the value of a cookie
+Specifies a function that will be used to decode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object.
-has a limited character set (and must be a simple string), this function can be used to decode
-a previously encoded cookie value into a JavaScript string or other object.
 
 The default decoder is `decodeURIComponent` + [destr](https://github.com/unjs/destr).
 
 ::note
-If an error is thrown from this function, the original, non-decoded cookie value will
+If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value.
-be returned as the cookie's value.
 ::
 
 ### `default`

docs/3.api/2.composables/use-fetch.md

@@ -66,6 +66,10 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
 `useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
 :link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
 
 :read-more{to="/docs/getting-started/data-fetching"}
@@ -83,6 +87,8 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
   - `headers`: Request headers.
   - `baseURL`: Base URL for the request.
   - `timeout`: Milliseconds to automatically abort request
+  - `cache`: Handles cache control according to [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch#cache)
+    - You can pass boolean to disable the cache or you can pass one of the following values: `default`, `no-store`, `reload`, `no-cache`, `force-cache`, and `only-if-cached`.
 
 ::note
 All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.

docs/3.api/2.composables/use-loading-indicator.md

@@ -26,6 +26,11 @@ It hooks into [`page:loading:start`](/docs/api/advanced/hooks#app-hooks-runtime)
 - **type**: `Ref<boolean>`
 - **description**: The loading state
 
+### `error`
+
+- **type**: `Ref<boolean>`
+- **description**: The error state
+
 ### `progress`
 
 - **type**: `Ref<number>`
@@ -39,7 +44,7 @@ Set `isLoading` to true and start to increase the `progress` value.
 
 ### `finish()`
 
-Set the `progress` value to `100`, stop all timers and intervals then reset the loading state `500` ms later. `finish` accepts a `{ force: true }` option to skip the interval before the state is reset.
+Set the `progress` value to `100`, stop all timers and intervals then reset the loading state `500` ms later. `finish` accepts a `{ force: true }` option to skip the interval before the state is reset, and `{ error: true }` to change the loading bar color and set the error property to true.
 
 ### `clear()`
 

docs/3.api/2.composables/use-nuxt-app.md

@@ -138,6 +138,10 @@ Nuxt exposes the following properties through `ssrContext`:
 
   Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt.
 
+  ::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
+  Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes.
+  ::
+
   In the example below, we define a reducer (or a serializer) and a reviver (or deserializer) for the [Luxon](https://moment.github.io/luxon/#/) DateTime class, using a payload plugin.
 
   ```ts [plugins/date-time-payload.ts]

docs/3.api/2.composables/use-state.md

@@ -25,6 +25,10 @@ Because the data inside `useState` will be serialized to JSON, it is important t
 `useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+Watch a video from Alexander Lichter about why and when to use `useState()`.
+::
+
 ## Using `shallowRef`
 
 If you don't need your state to be deeply reactive, you can combine `useState` with [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref). This can improve performance when your state contains large objects and arrays.

docs/5.community/4.contribution.md

@@ -32,6 +32,10 @@ We'll do our best to follow our [internal issue decision making flowchart](https
 
 ### Send a Pull Request
 
+::Tip
+On windows, you need to clone the repository with `git clone -c core.symlinks=true https://github.com/nuxt/nuxt.git` to make symlinks work.
+::
+
 We always welcome pull requests! ❤️
 
 #### Before You Start

docs/5.community/6.roadmap.md

@@ -38,12 +38,12 @@ Translations | -             | [nuxt/translations#4](https://github.com/nuxt/tra
 
 In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below.
 
-Module         | Status              | Nuxt Support | Repository | Description
+Module                              | Status              | Nuxt Support | Repository | Description
----------------|---------------------|--------------|------------|-------------------
+------------------------------------|---------------------|--------------|------------|-------------------
-Scripts        | April 2024          | 3.x          | `nuxt/scripts` to be announced | Easy 3rd party script management. [nuxt/nuxt#22016](https://github.com/nuxt/nuxt/discussions/22016)
+[Scripts](https://scripts.nuxt.com) | Public Preview      | 3.x          | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
-A11y           | Planned             | 3.x          | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
+A11y                                | Planned             | 3.x          | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
-Auth           | Planned             | 3.x          | `nuxt/auth` to be announced | Nuxt 3 support is planned after session support
+Auth                                | Planned             | 3.x          | `nuxt/auth` to be announced | Nuxt 3 support is planned after session support.
-Hints          | Planned             | 3.x          | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices
+Hints                               | Planned             | 3.x          | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
 
 ## Release Cycle
 
@@ -64,9 +64,9 @@ Each active version has its own nightly releases which are generated automatical
 Release                                 |                                                                                                  | Initial release | End Of Life  | Docs
 ----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
 **4.x** (scheduled)                     |                                                                                           | 2024 Q2         |              |  
-**3.x** (stable)           | <a href="https://npmjs.com/package/nuxt"><img alt="Nuxt latest 3.x version" src="https://flat.badgen.net/npm/v/nuxt?label="></a>            | 2022-11-16      | TBA          | [nuxt.com](/docs)
+**3.x** (stable)           | <a href="https://npmjs.com/package/nuxt"><img alt="Nuxt latest 3.x version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a>            | 2022-11-16      | TBA          | [nuxt.com](/docs)
-**2.x** (maintenance)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label="></a>         | 2018-09-21      | 2024-06-30   | [v2.nuxt.com](https://v2.nuxt.com/docs)
+**2.x** (maintenance)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a>         | 2018-09-21      | 2024-06-30   | [v2.nuxt.com](https://v2.nuxt.com/docs)
-**1.x** (unsupported)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label="></a>         | 2018-01-08      | 2019-09-21 | &nbsp;
+**1.x** (unsupported)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a>         | 2018-01-08      | 2019-09-21 | &nbsp;
 
 ### Support Status
 

docs/5.community/7.changelog.md

@@ -68,6 +68,16 @@ navigation.icon: i-ph-notification-duotone
   ::card
   ---
   icon: i-simple-icons-github
+  title: nuxt/scripts
+  to: https://github.com/nuxt/scripts/tags
+  target: _blank
+  ui.icon.base: text-black dark:text-white
+  ---
+  Nuxt Scripts releases. (Public Preview)
+  ::
+  ::card
+  ---
+  icon: i-simple-icons-github
   title: nuxt/ui
   to: https://github.com/nuxt/ui/releases
   target: _blank

package.json

@@ -20,6 +20,7 @@
     "lint:knip": "pnpx knip",
     "play": "nuxi dev playground",
     "play:build": "nuxi build playground",
+    "play:generate": "nuxi generate playground",
     "play:preview": "nuxi preview playground",
     "test": "pnpm test:fixtures && pnpm test:fixtures:dev && pnpm test:fixtures:webpack && pnpm test:unit && pnpm test:runtime && pnpm test:types && pnpm typecheck",
     "test:prepare": "jiti ./test/prepare.ts",
@@ -40,20 +41,20 @@
     "@nuxt/webpack-builder": "workspace:*",
     "magic-string": "^0.30.10",
     "nuxt": "workspace:*",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vue": "3.4.27"
   },
   "devDependencies": {
-    "@eslint/js": "9.2.0",
+    "@eslint/js": "9.3.0",
-    "@nuxt/eslint-config": "0.3.12",
+    "@nuxt/eslint-config": "0.3.13",
     "@nuxt/kit": "workspace:*",
-    "@nuxt/test-utils": "3.12.1",
+    "@nuxt/test-utils": "3.13.1",
     "@nuxt/webpack-builder": "workspace:*",
-    "@testing-library/vue": "8.0.3",
+    "@testing-library/vue": "8.1.0",
     "@types/eslint__js": "8.42.3",
     "@types/fs-extra": "11.0.4",
-    "@types/node": "20.12.11",
+    "@types/node": "20.12.13",
     "@types/semver": "7.5.8",
     "@vitest/coverage-v8": "1.6.0",
     "@vue/test-utils": "2.4.6",
@@ -61,25 +62,25 @@
     "changelogen": "0.5.5",
     "consola": "3.2.3",
     "devalue": "5.0.0",
-    "eslint": "9.2.0",
+    "eslint": "9.3.0",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-perfectionist": "2.10.0",
     "eslint-typegen": "0.2.4",
-    "execa": "9.0.1",
+    "execa": "9.1.0",
     "fs-extra": "11.2.0",
     "globby": "14.0.1",
     "h3": "1.11.1",
-    "happy-dom": "14.10.1",
+    "happy-dom": "14.12.0",
     "jiti": "1.21.0",
-    "markdownlint-cli": "0.40.0",
+    "markdownlint-cli": "0.41.0",
     "nitropack": "2.9.6",
     "nuxi": "3.11.1",
     "nuxt": "workspace:*",
     "nuxt-content-twoslash": "0.0.10",
     "ofetch": "1.3.4",
     "pathe": "1.1.2",
-    "playwright-core": "1.44.0",
+    "playwright-core": "1.44.1",
-    "rimraf": "5.0.5",
+    "rimraf": "5.0.7",
     "semver": "7.6.2",
     "std-env": "3.7.0",
     "typescript": "5.4.5",
@@ -88,9 +89,9 @@
     "vitest-environment-nuxt": "1.0.0",
     "vue": "3.4.27",
     "vue-router": "4.3.2",
-    "vue-tsc": "2.0.16"
+    "vue-tsc": "2.0.19"
   },
-  "packageManager": "pnpm@9.1.0",
+  "packageManager": "pnpm@9.1.3",
   "engines": {
     "node": "^16.10.0 || >=18.0.0"
   },

packages/kit/package.json

@@ -44,7 +44,7 @@
     "semver": "^7.6.2",
     "ufo": "^1.5.3",
     "unctx": "^2.3.1",
-    "unimport": "^3.7.1",
+    "unimport": "^3.7.2",
     "untyped": "^1.4.2"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "lodash-es": "4.17.21",
     "nitropack": "2.9.6",
     "unbuild": "latest",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vitest": "1.6.0",
     "webpack": "5.91.0"
   },

packages/kit/src/compatibility.ts

@@ -4,7 +4,7 @@ import type { Nuxt, NuxtCompatibility, NuxtCompatibilityIssues } from '@nuxt/sch
 import { useNuxt } from './context'
 
 export function normalizeSemanticVersion (version: string) {
-  return version.replace(/-[0-9]+\.[0-9a-f]+/, '') // Remove edge prefix
+  return version.replace(/-\d+\.[0-9a-f]+/, '') // Remove edge prefix
 }
 
 const builderMap = {

packages/kit/src/internal/template.ts

@@ -27,7 +27,7 @@ export async function compileTemplate<T> (template: NuxtTemplate<T>, ctx: any) {
 }
 
 /** @deprecated */
-const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
+const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"\{(.+)\}"(?=,?$)/gm, r => JSON.parse(r).replace(/^\{(.*)\}$/, '$1'))
 
 /** @deprecated */
 const importSources = (sources: string | string[], { lazy = false } = {}) => {

packages/kit/src/loader/config.ts

@@ -4,6 +4,8 @@ import type { ConfigLayer, ConfigLayerMeta, LoadConfigOptions } from 'c12'
 import { loadConfig } from 'c12'
 import type { NuxtConfig, NuxtOptions } from '@nuxt/schema'
 import { NuxtConfigSchema } from '@nuxt/schema'
+import { globby } from 'globby'
+import defu from 'defu'
 
 export interface LoadNuxtConfigOptions extends LoadConfigOptions<NuxtConfig> {}
 
@@ -11,12 +13,19 @@ const layerSchemaKeys = ['future', 'srcDir', 'rootDir', 'dir']
 const layerSchema = Object.fromEntries(Object.entries(NuxtConfigSchema).filter(([key]) => layerSchemaKeys.includes(key)))
 
 export async function loadNuxtConfig (opts: LoadNuxtConfigOptions): Promise<NuxtOptions> {
+  // Automatically detect and import layers from `~~/layers/` directory
+  opts.overrides = defu(opts.overrides, {
+    _extends: await globby('layers/*', {
+      onlyDirectories: true,
+      cwd: opts.cwd || process.cwd(),
+    }),
+  });
   (globalThis as any).defineNuxtConfig = (c: any) => c
   const result = await loadConfig<NuxtConfig>({
     name: 'nuxt',
     configFile: 'nuxt.config',
     rcFile: '.nuxtrc',
-    extend: { extendKey: ['theme', 'extends'] },
+    extend: { extendKey: ['theme', 'extends', '_extends'] },
     dotenv: true,
     globalRc: true,
     ...opts,

packages/kit/src/module/define.ts

@@ -73,8 +73,8 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
     const key = `nuxt:module:${uniqueKey || (Math.round(Math.random() * 10000))}`
     const mark = performance.mark(key)
     const res = await module.setup?.call(null as any, _options, nuxt) ?? {}
-    const perf = performance.measure(key, mark?.name) // TODO: remove when Node 14 reaches EOL
+    const perf = performance.measure(key, mark.name)
-    const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL
+    const setupTime = Math.round((perf.duration * 100)) / 100
 
     // Measure setup time
     if (setupTime > 5000 && uniqueKey !== '@nuxt/telemetry') {

packages/kit/src/plugin.ts

@@ -3,7 +3,6 @@ import type { NuxtPlugin, NuxtPluginTemplate } from '@nuxt/schema'
 import { useNuxt } from './context'
 import { addTemplate } from './template'
 import { resolveAlias } from './resolve'
-import { logger } from './logger'
 
 /**
  * Normalize a nuxt plugin object
@@ -20,12 +19,6 @@ export function normalizePlugin (plugin: NuxtPlugin | string): NuxtPlugin {
     throw new Error('Invalid plugin. src option is required: ' + JSON.stringify(plugin))
   }
 
-  // TODO: only scan top-level files #18418
-  const nonTopLevelPlugin = plugin.src.match(/\/plugins\/[^/]+\/index\.[^/]+$/i)
-  if (nonTopLevelPlugin && nonTopLevelPlugin.length > 0 && !useNuxt().options.plugins.find(i => (typeof i === 'string' ? i : i.src).endsWith(nonTopLevelPlugin[0]))) {
-    logger.warn(`[deprecation] You are using a plugin that is within a subfolder of your plugins directory without adding it to your config explicitly. You can move it to the top-level plugins directory, or include the file '~${nonTopLevelPlugin[0]}' in your plugins config (https://nuxt.com/docs/api/nuxt-config#plugins-1) to remove this warning.`)
-  }
-
   // Normalize full path to plugin
   plugin.src = normalize(resolveAlias(plugin.src))
 

packages/kit/src/runtime-config.ts

@@ -36,12 +36,12 @@ export function updateRuntimeConfig (runtimeConfig: Record<string, unknown>) {
 }
 
 /**
- * @internal
- *
  * https://github.com/unjs/nitro/blob/main/src/runtime/utils.env.ts.
- *
+*
  * These utils will be replaced by util exposed from nitropack. See https://github.com/unjs/nitro/pull/2404
  * for more context and future plans.)
+ *
+ * @internal
  */
 
 type EnvOptions = {
@@ -94,7 +94,7 @@ function applyEnv (
   return obj
 }
 
-const envExpandRx = /{{(.*?)}}/g
+const envExpandRx = /\{\{(.*?)\}\}/g
 
 function _expandFromEnv (value: string, env: Record<string, any> = process.env) {
   return value.replace(envExpandRx, (match, key) => {

packages/kit/src/template.ts

@@ -202,7 +202,7 @@ export async function _generateTypes (nuxt: Nuxt) {
     } else {
       const path = stats?.isFile()
         // remove extension
-        ? relativePath.replace(/(?<=\w)\.\w+$/g, '')
+        ? relativePath.replace(/\b\.\w+$/g, '')
         // non-existent file probably shouldn't be resolved
         : aliases[alias]
 
@@ -230,7 +230,7 @@ export async function _generateTypes (nuxt: Nuxt) {
     tsConfig.compilerOptions!.paths[alias] = await Promise.all(paths.map(async (path: string) => {
       if (!isAbsolute(path)) { return path }
       const stats = await fsp.stat(path).catch(() => null /* file does not exist */)
-      return relativeWithDot(nuxt.options.buildDir, stats?.isFile() ? path.replace(/(?<=\w)\.\w+$/g, '') /* remove extension */ : path)
+      return relativeWithDot(nuxt.options.buildDir, stats?.isFile() ? path.replace(/\b\.\w+$/g, '') /* remove extension */ : path)
     }))
   }
 

packages/nuxt/package.json

@@ -60,14 +60,14 @@
   },
   "dependencies": {
     "@nuxt/devalue": "^2.0.2",
-    "@nuxt/devtools": "^1.2.0",
+    "@nuxt/devtools": "^1.3.2",
     "@nuxt/kit": "workspace:*",
     "@nuxt/schema": "workspace:*",
     "@nuxt/telemetry": "^2.5.4",
     "@nuxt/vite-builder": "workspace:*",
-    "@unhead/dom": "^1.9.10",
+    "@unhead/dom": "^1.9.11",
-    "@unhead/ssr": "^1.9.10",
+    "@unhead/ssr": "^1.9.11",
-    "@unhead/vue": "^1.9.10",
+    "@unhead/vue": "^1.9.11",
     "@vue/shared": "^3.4.27",
     "acorn": "8.11.3",
     "c12": "^1.10.0",
@@ -76,7 +76,7 @@
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "devalue": "^5.0.0",
-    "esbuild": "^0.21.1",
+    "esbuild": "^0.21.4",
     "escape-string-regexp": "^5.0.0",
     "estree-walker": "^3.0.3",
     "fs-extra": "^11.2.0",
@@ -99,6 +99,7 @@
     "pkg-types": "^1.1.1",
     "radix3": "^1.1.2",
     "scule": "^1.3.0",
+    "semver": "^7.6.2",
     "std-env": "^3.7.0",
     "strip-literal": "^2.1.0",
     "ufo": "^1.5.3",
@@ -106,7 +107,7 @@
     "uncrypto": "^0.1.3",
     "unctx": "^2.3.1",
     "unenv": "^1.9.0",
-    "unimport": "^3.7.1",
+    "unimport": "^3.7.2",
     "unplugin": "^1.10.1",
     "unplugin-vue-router": "^0.7.0",
     "unstorage": "^1.10.2",
@@ -117,13 +118,13 @@
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@nuxt/ui-templates": "1.3.3",
+    "@nuxt/ui-templates": "1.3.4",
     "@parcel/watcher": "2.4.1",
     "@types/estree": "1.0.5",
     "@types/fs-extra": "11.0.4",
     "@vitejs/plugin-vue": "5.0.4",
     "unbuild": "latest",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vitest": "1.6.0"
   },
   "peerDependencies": {

packages/nuxt/src/app/components/nuxt-loading-indicator.ts

@@ -20,20 +20,24 @@ export default defineComponent({
       type: [String, Boolean],
       default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)',
     },
+    errorColor: {
+      type: String,
+      default: 'repeating-linear-gradient(to right,#f87171 0%,#ef4444 100%)',
+    },
     estimatedProgress: {
       type: Function as unknown as () => (duration: number, elapsed: number) => number,
       required: false,
     },
   },
   setup (props, { slots, expose }) {
-    const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
+    const { progress, isLoading, error, start, finish, clear } = useLoadingIndicator({
       duration: props.duration,
       throttle: props.throttle,
       estimatedProgress: props.estimatedProgress,
     })
 
     expose({
-      progress, isLoading, start, finish, clear,
+      progress, isLoading, error, start, finish, clear,
     })
 
     return () => h('div', {
@@ -47,7 +51,7 @@ export default defineComponent({
         width: 'auto',
         height: `${props.height}px`,
         opacity: isLoading.value ? 1 : 0,
-        background: props.color || undefined,
+        background: error.value ? props.errorColor : props.color || undefined,
         backgroundSize: `${(100 / progress.value) * 100}% auto`,
         transform: `scaleX(${progress.value}%)`,
         transformOrigin: 'left',

packages/nuxt/src/app/components/nuxt-root.vue

@@ -1,7 +1,8 @@
 <template>
   <Suspense @resolve="onResolve">
+    <div v-if="abortRender" />
     <ErrorComponent
-      v-if="error"
+      v-else-if="error"
       :error="error"
     />
     <IslandRenderer
@@ -53,6 +54,8 @@ if (import.meta.dev && results && results.some(i => i && 'then' in i)) {
 
 // error handling
 const error = useError()
+// render an empty <div> when plugins have thrown an error but we're not yet rendering the error page
+const abortRender = import.meta.server && error.value && !nuxtApp.ssrContext.error
 onErrorCaptured((err, target, info) => {
   nuxtApp.hooks.callHook('vue:error', err, target, info).catch(hookError => console.error('[nuxt] Error in `vue:error` hook', hookError))
   if (import.meta.server || (isNuxtError(err) && (err.fatal || err.unhandled))) {

packages/nuxt/src/app/composables/asyncData.ts

@@ -8,7 +8,10 @@ import { createError } from './error'
 import { onNuxtReady } from './ready'
 
 // @ts-expect-error virtual file
-import { asyncDataDefaults } from '#build/nuxt.config.mjs'
+import { asyncDataDefaults, resetAsyncDataToUndefined } from '#build/nuxt.config.mjs'
+
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
 
 export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
@@ -42,7 +45,7 @@ export interface AsyncDataOptions<
   ResT,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > {
   /**
    * Whether to fetch on the server side.
@@ -117,7 +120,7 @@ export interface _AsyncData<DataT, ErrorT> {
   refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
   execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
   clear: () => void
-  error: Ref<ErrorT | null>
+  error: Ref<ErrorT | DefaultAsyncDataErrorValue>
   status: Ref<AsyncDataRequestStatus>
 }
 
@@ -138,11 +141,11 @@ export function useAsyncData<
   NuxtErrorDataT = unknown,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
 /**
  * Provides access to data that resolves asynchronously in an SSR-friendly composable.
  * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -158,7 +161,7 @@ export function useAsyncData<
 > (
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
 /**
  * Provides access to data that resolves asynchronously in an SSR-friendly composable.
  * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -171,12 +174,12 @@ export function useAsyncData<
   NuxtErrorDataT = unknown,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
 /**
  * Provides access to data that resolves asynchronously in an SSR-friendly composable.
  * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -194,14 +197,14 @@ export function useAsyncData<
   key: string,
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
 export function useAsyncData<
   ResT,
   NuxtErrorDataT = unknown,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
-> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> {
+> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue> {
   const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
   if (typeof args[0] !== 'string') { args.unshift(autoKey) }
 
@@ -226,14 +229,14 @@ export function useAsyncData<
         const value = nuxtApp.ssrContext!._sharedPrerenderCache!.get(key)
         if (value) { return value as Promise<ResT> }
 
-        const promise = nuxtApp.runWithContext(_handler)
+        const promise = Promise.resolve().then(() => nuxtApp.runWithContext(_handler))
 
         nuxtApp.ssrContext!._sharedPrerenderCache!.set(key, promise)
         return promise
       }
 
   // Used to get default values
-  const getDefault = () => null
+  const getDefault = () => asyncDataDefaults.value
   const getDefaultCachedData = () => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key]
 
   // Apply defaults
@@ -250,11 +253,12 @@ export function useAsyncData<
     console.warn('[nuxt] `boolean` values are deprecated for the `dedupe` option of `useAsyncData` and will be removed in the future. Use \'cancel\' or \'defer\' instead.')
   }
 
+  // TODO: make more precise when v4 lands
   const hasCachedData = () => options.getCachedData!(key, nuxtApp) != null
 
   // Create or use a shared asyncData entity
   if (!nuxtApp._asyncData[key] || !options.immediate) {
-    nuxtApp.payload._errors[key] ??= null
+    nuxtApp.payload._errors[key] ??= asyncDataDefaults.errorValue
 
     const _ref = options.deep ? ref : shallowRef
 
@@ -263,11 +267,15 @@ export function useAsyncData<
       pending: ref(!hasCachedData()),
       error: toRef(nuxtApp.payload._errors, key),
       status: ref('idle'),
+      _default: options.default!,
     }
   }
 
   // TODO: Else, somehow check for conflicting keys with different defaults or fetcher
-  const asyncData = { ...nuxtApp._asyncData[key] } as AsyncData<DataT | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>)>
+  const asyncData = { ...nuxtApp._asyncData[key] } as { _default?: unknown } & AsyncData<DataT | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>)>
+
+  // Don't expose default function to end user
+  delete asyncData._default
 
   asyncData.refresh = asyncData.execute = (opts = {}) => {
     if (nuxtApp._asyncDataPromises[key]) {
@@ -307,7 +315,7 @@ export function useAsyncData<
         nuxtApp.payload.data[key] = result
 
         asyncData.data.value = result
-        asyncData.error.value = null
+        asyncData.error.value = asyncDataDefaults.errorValue
         asyncData.status.value = 'success'
       })
       .catch((error: any) => {
@@ -404,11 +412,11 @@ export function useLazyAsyncData<
   DataE = Error,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
 export function useLazyAsyncData<
   ResT,
   DataE = Error,
@@ -418,18 +426,18 @@ export function useLazyAsyncData<
 > (
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
 export function useLazyAsyncData<
   ResT,
   DataE = Error,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
 export function useLazyAsyncData<
   ResT,
   DataE = Error,
@@ -440,15 +448,15 @@ export function useLazyAsyncData<
   key: string,
   handler: (ctx?: NuxtApp) => Promise<ResT>,
   options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
 
 export function useLazyAsyncData<
   ResT,
   DataE = Error,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
-> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> {
+> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue> {
   const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
   if (typeof args[0] !== 'string') { args.unshift(autoKey) }
   const [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>]
@@ -463,12 +471,12 @@ export function useLazyAsyncData<
 }
 
 /** @since 3.1.0 */
-export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> } {
+export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | DefaultAsyncDataValue> } {
   const nuxtApp = useNuxtApp()
 
   // Initialize value when key is not already set
   if (!(key in nuxtApp.payload.data)) {
-    nuxtApp.payload.data[key] = null
+    nuxtApp.payload.data[key] = asyncDataDefaults.value
   }
 
   return {
@@ -520,12 +528,12 @@ function clearNuxtDataByKey (nuxtApp: NuxtApp, key: string): void {
   }
 
   if (key in nuxtApp.payload._errors) {
-    nuxtApp.payload._errors[key] = null
+    nuxtApp.payload._errors[key] = asyncDataDefaults.errorValue
   }
 
   if (nuxtApp._asyncData[key]) {
-    nuxtApp._asyncData[key]!.data.value = undefined
+    nuxtApp._asyncData[key]!.data.value = resetAsyncDataToUndefined ? undefined : nuxtApp._asyncData[key]!._default()
-    nuxtApp._asyncData[key]!.error.value = null
+    nuxtApp._asyncData[key]!.error.value = asyncDataDefaults.errorValue
     nuxtApp._asyncData[key]!.pending.value = false
     nuxtApp._asyncData[key]!.status.value = 'idle'
   }

packages/nuxt/src/app/composables/error.ts

@@ -4,6 +4,9 @@ import { toRef } from 'vue'
 import { useNuxtApp } from '../nuxt'
 import { useRouter } from './router'
 
+// @ts-expect-error virtual file
+import { nuxtDefaultErrorValue } from '#build/nuxt.config.mjs'
+
 export const NUXT_ERROR_SIGNATURE = '__nuxt_error'
 
 /** @since 3.0.0 */
@@ -47,7 +50,7 @@ export const clearError = async (options: { redirect?: string } = {}) => {
     await useRouter().replace(options.redirect)
   }
 
-  error.value = null
+  error.value = nuxtDefaultErrorValue
 }
 
 /** @since 3.0.0 */

packages/nuxt/src/app/composables/fetch.ts

@@ -8,6 +8,9 @@ import { useRequestFetch } from './ssr'
 import type { AsyncData, AsyncDataOptions, KeysOf, MultiWatchSources, PickFrom } from './asyncData'
 import { useAsyncData } from './asyncData'
 
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
+
 // @ts-expect-error virtual file
 import { fetchDefaults } from '#build/nuxt.config.mjs'
 
@@ -30,7 +33,7 @@ export interface UseFetchOptions<
   ResT,
   DataT = ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
   R extends NitroFetchRequest = string & {},
   M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>,
 > extends Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'watch'>, ComputedFetchOptions<R, M> {
@@ -54,11 +57,11 @@ export function useFetch<
   _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
   DataT = _ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
 /**
  * Fetch data from an API endpoint with an SSR-friendly composable.
  * See {@link https://nuxt.com/docs/api/composables/use-fetch}
@@ -77,7 +80,7 @@ export function useFetch<
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
 export function useFetch<
   ResT = void,
   ErrorT = FetchError,
@@ -86,7 +89,7 @@ export function useFetch<
   _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
   DataT = _ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>,
@@ -161,8 +164,10 @@ export function useFetch<
      * @see https://github.com/unjs/ofetch/blob/bb2d72baa5d3f332a2185c20fc04e35d2c3e258d/src/fetch.ts#L152
      */
     const timeoutLength = toValue(opts.timeout)
+    let timeoutId: NodeJS.Timeout
     if (timeoutLength) {
-      setTimeout(() => controller.abort(), timeoutLength)
+      timeoutId = setTimeout(() => controller.abort(), timeoutLength)
+      controller.signal.onabort = () => clearTimeout(timeoutId)
     }
 
     let _$fetch = opts.$fetch || globalThis.$fetch
@@ -175,7 +180,7 @@ export function useFetch<
       }
     }
 
-    return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any) as Promise<_ResT>
+    return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any).finally(() => { clearTimeout(timeoutId) }) as Promise<_ResT>
   }, _asyncDataOptions)
 
   return asyncData
@@ -190,11 +195,11 @@ export function useLazyFetch<
   _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
   DataT = _ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
 export function useLazyFetch<
   ResT = void,
   ErrorT = FetchError,
@@ -207,7 +212,7 @@ export function useLazyFetch<
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>
-): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
+): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
 export function useLazyFetch<
   ResT = void,
   ErrorT = FetchError,
@@ -216,7 +221,7 @@ export function useLazyFetch<
   _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
   DataT = _ResT,
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
-  DefaultT = null,
+  DefaultT = DefaultAsyncDataValue,
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
   arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>,

packages/nuxt/src/app/composables/loading-indicator.ts

@@ -23,9 +23,10 @@ export type LoadingIndicator = {
   _cleanup: () => void
   progress: Ref<number>
   isLoading: Ref<boolean>
+  error: Ref<boolean>
   start: () => void
   set: (value: number) => void
-  finish: (opts?: { force?: boolean }) => void
+  finish: (opts?: { force?: boolean, error?: boolean }) => void
   clear: () => void
 }
 
@@ -40,6 +41,7 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
   const nuxtApp = useNuxtApp()
   const progress = ref(0)
   const isLoading = ref(false)
+  const error = ref(false)
   let done = false
   let rafId: number
 
@@ -47,7 +49,10 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
   let hideTimeout: number | NodeJS.Timeout
   let resetTimeout: number | NodeJS.Timeout
 
-  const start = () => set(0)
+  const start = () => {
+    error.value = false
+    set(0)
+  }
 
   function set (at = 0) {
     if (nuxtApp.isHydrating) {
@@ -76,11 +81,14 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
     }
   }
 
-  function finish (opts: { force?: boolean } = {}) {
+  function finish (opts: { force?: boolean, error?: boolean } = {}) {
     progress.value = 100
     done = true
     clear()
     _clearTimeouts()
+    if (opts.error) {
+      error.value = true
+    }
     if (opts.force) {
       progress.value = 0
       isLoading.value = false
@@ -145,6 +153,7 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
     _cleanup,
     progress: computed(() => progress.value),
     isLoading: computed(() => isLoading.value),
+    error: computed(() => error.value),
     start,
     set,
     finish,

packages/nuxt/src/app/composables/manifest.ts

@@ -1,7 +1,6 @@
 import type { MatcherExport, RouteMatcher } from 'radix3'
 import { createMatcherFromExport, createRouter as createRadixRouter, toRouteMatcher } from 'radix3'
 import { defu } from 'defu'
-import { useAppConfig } from '../config'
 import { useRuntimeConfig } from '../nuxt'
 // @ts-expect-error virtual file
 import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
@@ -25,9 +24,7 @@ function fetchManifest () {
   if (!isAppManifestEnabled) {
     throw new Error('[nuxt] app manifest should be enabled with `experimental.appManifest`')
   }
-  // @ts-expect-error private property
+  manifest = $fetch<NuxtAppManifest>(buildAssetsURL(`builds/meta/${useRuntimeConfig().app.buildId}.json`))
-  const buildId = useAppConfig().nuxt?.buildId
-  manifest = $fetch<NuxtAppManifest>(buildAssetsURL(`builds/meta/${buildId}.json`))
   manifest.then((m) => {
     matcher = createMatcherFromExport(m.matcher)
   })

packages/nuxt/src/app/composables/payload.ts

@@ -1,9 +1,8 @@
 import { hasProtocol, joinURL, withoutTrailingSlash } from 'ufo'
 import { parse } from 'devalue'
 import { useHead } from '@unhead/vue'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, onServerPrefetch } from 'vue'
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
-import { useAppConfig } from '../config'
 
 import { useRoute } from './router'
 import { getAppManifest, getRouteRules } from './manifest'
@@ -17,9 +16,9 @@ interface LoadPayloadOptions {
 }
 
 /** @since 3.0.0 */
-export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record<string, any> | Promise<Record<string, any>> | null {
+export async function loadPayload (url: string, opts: LoadPayloadOptions = {}): Promise<Record<string, any> | null> {
   if (import.meta.server || !payloadExtraction) { return null }
-  const payloadURL = _getPayloadURL(url, opts)
+  const payloadURL = await _getPayloadURL(url, opts)
   const nuxtApp = useNuxtApp()
   const cache = nuxtApp._payloadCache = nuxtApp._payloadCache || {}
   if (payloadURL in cache) {
@@ -40,25 +39,34 @@ export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record
   return cache[payloadURL]
 }
 /** @since 3.0.0 */
-export function preloadPayload (url: string, opts: LoadPayloadOptions = {}) {
+export function preloadPayload (url: string, opts: LoadPayloadOptions = {}): Promise<void> {
-  const payloadURL = _getPayloadURL(url, opts)
+  const nuxtApp = useNuxtApp()
-  useHead({
+  const promise = _getPayloadURL(url, opts).then((payloadURL) => {
-    link: [
+    nuxtApp.runWithContext(() => useHead({
-      { rel: 'modulepreload', href: payloadURL },
+      link: [
-    ],
+        { rel: 'modulepreload', href: payloadURL },
+      ],
+    }))
   })
+  if (import.meta.server) {
+    onServerPrefetch(() => promise)
+  }
+  return promise
 }
 
 // --- Internal ---
 
 const filename = renderJsonPayloads ? '_payload.json' : '_payload.js'
-function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
+async function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
   const u = new URL(url, 'http://localhost')
   if (u.host !== 'localhost' || hasProtocol(u.pathname, { acceptRelative: true })) {
     throw new Error('Payload URL must not include hostname: ' + url)
   }
-  const hash = opts.hash || (opts.fresh ? Date.now() : (useAppConfig().nuxt as any)?.buildId)
+  const config = useRuntimeConfig()
-  return joinURL(useRuntimeConfig().app.baseURL, u.pathname, filename + (hash ? `?${hash}` : ''))
+  const hash = opts.hash || (opts.fresh ? Date.now() : config.app.buildId)
+  const cdnURL = config.app.cdnURL
+  const baseOrCdnURL = cdnURL && await isPrerendered(url) ? cdnURL : config.app.baseURL
+  return joinURL(baseOrCdnURL, u.pathname, filename + (hash ? `?${hash}` : ''))
 }
 
 async function _importPayload (payloadURL: string) {

packages/nuxt/src/app/composables/router.ts

@@ -169,8 +169,7 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
         nuxtApp.ssrContext!._renderResponse = {
           statusCode: sanitizeStatusCode(options?.redirectCode || 302, 302),
           body: `<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=${encodedLoc}"></head></html>`,
-          // do not encode as this would break some modules and some environments
+          headers: { location: encodeURI(location) },
-          headers: { location },
         }
         return response
       }

packages/nuxt/src/app/defaults.ts

@@ -0,0 +1,7 @@
+// TODO: temporary module for backwards compatibility
+
+export type DefaultAsyncDataErrorValue = null
+export type DefaultAsyncDataValue = null
+export type DefaultErrorValue = null
+
+export {}

packages/nuxt/src/app/nuxt.ts

@@ -1,4 +1,4 @@
-import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive } from 'vue'
+import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive, shallowReactive } from 'vue'
 import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue'
 import type { RouteLocationNormalizedLoaded } from '#vue-router'
 import type { HookCallback, Hookable } from 'hookable'
@@ -20,13 +20,15 @@ import type { LoadingIndicator } from '../app/composables/loading-indicator'
 import type { RouteAnnouncer } from '../app/composables/route-announcer'
 import type { ViewTransition } from './plugins/view-transitions.client'
 
+// @ts-expect-error virtual file
+import { appId } from '#build/nuxt.config.mjs'
+
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultErrorValue } from '#app/defaults'
 import type { NuxtAppLiterals } from '#app'
 
-// @ts-expect-error virtual import
+function getNuxtAppCtx (appName = appId || 'nuxt-app') {
-import { buildId } from '#build/nuxt.config.mjs'
+  return getContext<NuxtApp>(appName, {
-
-function getNuxtAppCtx (appName?: string) {
-  return getContext<NuxtApp>(appName || buildId || 'nuxt-app', {
     asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server,
   })
 }
@@ -92,8 +94,8 @@ export interface NuxtPayload {
   state: Record<string, any>
   once: Set<string>
   config?: Pick<RuntimeConfig, 'public' | 'app'>
-  error?: NuxtError | null
+  error?: NuxtError | DefaultErrorValue
-  _errors: Record<string, NuxtError | null>
+  _errors: Record<string, NuxtError | DefaultAsyncDataErrorValue>
   [key: string]: unknown
 }
 
@@ -120,10 +122,12 @@ interface _NuxtApp {
   _asyncDataPromises: Record<string, Promise<any> | undefined>
   /** @internal */
   _asyncData: Record<string, {
-    data: Ref<any>
+    data: Ref<unknown>
     pending: Ref<boolean>
-    error: Ref<Error | null>
+    error: Ref<Error | DefaultAsyncDataErrorValue>
     status: Ref<AsyncDataRequestStatus>
+    /** @internal */
+    _default: () => unknown
   } | undefined>
 
   /** @internal */
@@ -244,7 +248,7 @@ export interface CreateOptions {
 export function createNuxtApp (options: CreateOptions) {
   let hydratingCount = 0
   const nuxtApp: NuxtApp = {
-    name: buildId,
+    _name: appId || 'nuxt-app',
     _scope: effectScope(),
     provide: undefined,
     globalName: 'nuxt',
@@ -252,12 +256,11 @@ export function createNuxtApp (options: CreateOptions) {
       get nuxt () { return __NUXT_VERSION__ },
       get vue () { return nuxtApp.vueApp.version },
     },
-    payload: reactive({
+    payload: shallowReactive({
-      data: {},
+      data: shallowReactive({}),
-      state: {},
+      state: reactive({}),
       once: new Set<string>(),
-      _errors: {},
+      _errors: shallowReactive({}),
-      ...(import.meta.client ? window.__NUXT__ ?? {} : { serverRendered: true }),
     }),
     static: {
       data: {},
@@ -288,11 +291,32 @@ export function createNuxtApp (options: CreateOptions) {
       }
     },
     _asyncDataPromises: {},
-    _asyncData: {},
+    _asyncData: shallowReactive({}),
     _payloadRevivers: {},
     ...options,
   } as any as NuxtApp
 
+  if (import.meta.server) {
+    nuxtApp.payload.serverRendered = true
+  }
+
+  // TODO: remove/refactor in https://github.com/nuxt/nuxt/issues/25336
+  if (import.meta.client && window.__NUXT__) {
+    for (const key in window.__NUXT__) {
+      switch (key) {
+        case 'data':
+        case 'state':
+        case '_errors':
+          // Preserve reactivity for non-rich payload support
+          Object.assign(nuxtApp.payload[key], window.__NUXT__[key])
+          break
+
+        default:
+          nuxtApp.payload[key] = window.__NUXT__[key]
+      }
+    }
+  }
+
   nuxtApp.hooks = createHooks<RuntimeNuxtHooks>()
   nuxtApp.hook = nuxtApp.hooks.hook
 

packages/nuxt/src/app/plugins/dev-server-logs.ts

@@ -1,13 +1,21 @@
-import { consola, createConsola } from 'consola'
+import { createConsola } from 'consola'
 import type { LogObject } from 'consola'
 import { parse } from 'devalue'
 
+import { h } from 'vue'
 import { defineNuxtPlugin } from '../nuxt'
 
 // @ts-expect-error virtual file
 import { devLogs, devRootDir } from '#build/nuxt.config.mjs'
 
-export default defineNuxtPlugin((nuxtApp) => {
+const devRevivers: Record<string, (data: any) => any> = import.meta.server
+  ? {}
+  : {
+      VNode: data => h(data.type, data.props),
+      URL: data => new URL(data),
+    }
+
+export default defineNuxtPlugin(async (nuxtApp) => {
   if (import.meta.test) { return }
 
   if (import.meta.server) {
@@ -23,42 +31,18 @@ export default defineNuxtPlugin((nuxtApp) => {
         date: true,
       },
     })
-    const hydrationLogs = new Set<string>()
-    consola.wrapConsole()
-    consola.addReporter({
-      log (logObj) {
-        try {
-          hydrationLogs.add(JSON.stringify(logObj.args))
-        } catch {
-          // silently ignore - the worst case is a user gets log twice
-        }
-      },
-    })
     nuxtApp.hook('dev:ssr-logs', (logs) => {
       for (const log of logs) {
-        // deduplicate so we don't print out things that are logged on client
+        logger.log(normalizeServerLog({ ...log }))
-        try {
-          if (!hydrationLogs.size || !hydrationLogs.has(JSON.stringify(log.args))) {
-            logger.log(normalizeServerLog({ ...log }))
-          }
-        } catch {
-          logger.log(normalizeServerLog({ ...log }))
-        }
       }
     })
-
-    nuxtApp.hooks.hook('app:suspense:resolve', () => consola.restoreAll())
-    nuxtApp.hooks.hookOnce('dev:ssr-logs', () => hydrationLogs.clear())
   }
 
-  // pass SSR logs after hydration
+  if (typeof window !== 'undefined') {
-  nuxtApp.hooks.hook('app:suspense:resolve', async () => {
+    const content = document.getElementById('__NUXT_LOGS__')?.textContent
-    if (typeof window !== 'undefined') {
+    const logs = content ? parse(content, { ...devRevivers, ...nuxtApp._payloadRevivers }) as LogObject[] : []
-      const content = document.getElementById('__NUXT_LOGS__')?.textContent
+    await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
-      const logs = content ? parse(content, nuxtApp._payloadRevivers) as LogObject[] : []
+  }
-      await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
-    }
-  })
 })
 
 function normalizeFilenames (stack?: string) {

packages/nuxt/src/components/client-fallback-auto-id.ts

@@ -10,7 +10,7 @@ interface LoaderOptions {
   transform?: ComponentsOptions['transform']
   rootDir: string
 }
-const CLIENT_FALLBACK_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/
+const CLIENT_FALLBACK_RE = /<(?:NuxtClientFallback|nuxt-client-fallback)(?: [^>]*)?>/
 const CLIENT_FALLBACK_GLOBAL_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/g
 export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions) => {
   const exclude = options.transform?.exclude || []
@@ -37,7 +37,7 @@ export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions
 
       s.replace(CLIENT_FALLBACK_GLOBAL_RE, (full, name, attrs) => {
         count++
-        if (/ :?uid=/g.test(attrs)) { return full }
+        if (/ :?uid=/.test(attrs)) { return full }
         return `<${name} :uid="'${hash(relativeID)}' + JSON.stringify($props) + '${count}'"  ${attrs ?? ''}>`
       })
 

packages/nuxt/src/components/islandsTransform.ts

@@ -25,7 +25,7 @@ interface ComponentChunkOptions {
 }
 
 const SCRIPT_RE = /<script[^>]*>/g
-const HAS_SLOT_OR_CLIENT_RE = /(<slot[^>]*>)|(nuxt-client)/
+const HAS_SLOT_OR_CLIENT_RE = /<slot[^>]*>|nuxt-client/
 const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/
 const NUXTCLIENT_ATTR_RE = /\s:?nuxt-client(="[^"]*")?/g
 const IMPORT_CODE = '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'' + '\nimport NuxtTeleportSsrSlot from \'#app/components/nuxt-teleport-island-slot\''

packages/nuxt/src/components/loader.ts

@@ -43,7 +43,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
       const s = new MagicString(code)
 
       // replace `_resolveComponent("...")` to direct import
-      s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*?)["'][\s,]*[^)]*\)/g, (full: string, lazy: string, name: string) => {
+      s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*)["'][^)]*\)/g, (full: string, lazy: string, name: string) => {
         const component = findComponent(components, name, options.mode)
         if (component) {
           // @ts-expect-error TODO: refactor to nuxi

packages/nuxt/src/components/module.ts

@@ -18,7 +18,7 @@ function compareDirByPathLength ({ path: pathA }: { path: string }, { path: path
   return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
 }
 
-const DEFAULT_COMPONENTS_DIRS_RE = /\/components(\/global|\/islands)?$/
+const DEFAULT_COMPONENTS_DIRS_RE = /\/components(?:\/(?:global|islands))?$/
 
 export type getComponentsT = (mode?: 'client' | 'server' | 'all') => Component[]
 

packages/nuxt/src/components/scan.ts

@@ -85,8 +85,8 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
        */
       let fileName = basename(filePath, fileExt)
 
-      const island = /\.(island)(\.global)?$/.test(fileName) || dir.island
+      const island = /\.island(?:\.global)?$/.test(fileName) || dir.island
-      const global = /\.(global)(\.island)?$/.test(fileName) || dir.global
+      const global = /\.global(?:\.island)?$/.test(fileName) || dir.global
       const mode = island ? 'server' : (fileName.match(/(?<=\.)(client|server)(\.global|\.island)*$/)?.[1] || 'all') as 'client' | 'server' | 'all'
       fileName = fileName.replace(/(\.(client|server))?(\.global|\.island)*$/, '')
 

packages/nuxt/src/components/templates.ts

@@ -104,8 +104,8 @@ export const componentsTypeTemplate = {
     const buildDir = nuxt.options.buildDir
     const componentTypes = app.components.filter(c => !c.island).map((c) => {
       const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
-        ? relative(buildDir, c.filePath).replace(/(?<=\w)\.(?!vue)\w+$/g, '')
+        ? relative(buildDir, c.filePath).replace(/\b\.(?!vue)\w+$/g, '')
-        : c.filePath.replace(/(?<=\w)\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`
+        : c.filePath.replace(/\b\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`
       return [
         c.pascalName,
         c.island || c.mode === 'server' ? `IslandComponent<${type}>` : type,

packages/nuxt/src/components/tree-shake.ts

@@ -16,7 +16,7 @@ interface TreeShakeTemplatePluginOptions {
 type AcornNode<N extends Node> = N & { start: number, end: number }
 
 const SSR_RENDER_RE = /ssrRenderComponent/
-const PLACEHOLDER_EXACT_RE = /^(fallback|placeholder)$/
+const PLACEHOLDER_EXACT_RE = /^(?:fallback|placeholder)$/
 const CLIENT_ONLY_NAME_RE = /^(?:_unref\()?(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly\)?)$/
 const PARSER_OPTIONS = { sourceType: 'module', ecmaVersion: 'latest' }
 

packages/nuxt/src/core/app.ts

@@ -85,8 +85,8 @@ export async function generateApp (nuxt: Nuxt, app: NuxtApp, options: { filter?:
       changedTemplates.push(template)
     }
 
-    const perf = performance.measure(fullPath, mark?.name) // TODO: remove when Node 14 reaches EOL
+    const perf = performance.measure(fullPath, mark.name)
-    const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL
+    const setupTime = Math.round((perf.duration * 100)) / 100
 
     if (nuxt.options.debug || setupTime > 500) {
       logger.info(`Compiled \`${template.filename}\` in ${setupTime}ms`)
@@ -179,7 +179,12 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
   app.middleware = []
   for (const config of reversedConfigs) {
     const middlewareDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.middleware || 'middleware'
-    const middlewareFiles = await resolveFiles(config.srcDir, `${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`)
+    const middlewareFiles = await resolveFiles(config.srcDir, [
+      `${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`,
+      ...nuxt.options.future.compatibilityVersion === 4
+        ? [`${middlewareDir}/*/index{${nuxt.options.extensions.join(',')}}`]
+        : [],
+    ])
     for (const file of middlewareFiles) {
       const name = getNameFromPath(file)
       if (!name) {
@@ -200,7 +205,7 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
       ...config.srcDir
         ? await resolveFiles(config.srcDir, [
           `${pluginDir}/*{${nuxt.options.extensions.join(',')}}`,
-          `${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`, // TODO: remove, only scan top-level plugins #18418
+          `${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`,
         ])
         : [],
     ].map(plugin => normalizePlugin(plugin as NuxtPlugin)))

packages/nuxt/src/core/builder.ts

@@ -24,7 +24,7 @@ export async function build (nuxt: Nuxt) {
       if (event === 'change') { return }
       const path = resolve(nuxt.options.srcDir, relativePath)
       const relativePaths = nuxt.options._layers.map(l => relative(l.config.srcDir || l.cwd, path))
-      const restartPath = relativePaths.find(relativePath => /^(app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath))
+      const restartPath = relativePaths.find(relativePath => /^(?:app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath))
       if (restartPath) {
         if (restartPath.startsWith('app')) {
           app.mainComponent = undefined

packages/nuxt/src/core/nitro.ts

@@ -161,6 +161,8 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
         'nuxt3/dist',
         'nuxt-nightly/dist',
         distDir,
+        // Ensure app config files have auto-imports injected even if they are pure .js files
+        ...nuxt.options._layers.map(layer => resolve(layer.config.srcDir, 'app.config')),
       ],
       traceInclude: [
         // force include files used in generated code from the runtime-compiler
@@ -218,9 +220,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
 
   // Add app manifest handler and prerender configuration
   if (nuxt.options.experimental.appManifest) {
-    // @ts-expect-error untyped nuxt property
+    const buildId = nuxt.options.runtimeConfig.app.buildId ||= nuxt.options.buildId
-    const buildId = nuxt.options.appConfig.nuxt!.buildId ||=
-      (nuxt.options.dev ? 'dev' : nuxt.options.test ? 'test' : nuxt.options.buildId)
     const buildTimestamp = Date.now()
 
     const manifestPrefix = joinURL(nuxt.options.app.buildAssetsDir, 'builds')
@@ -383,7 +383,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
       tsConfig.compilerOptions.paths[alias] = [absolutePath]
       tsConfig.compilerOptions.paths[`${alias}/*`] = [`${absolutePath}/*`]
     } else {
-      tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/(?<=\w)\.\w+$/g, '')] /* remove extension */
+      tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/\b\.\w+$/g, '')] /* remove extension */
     }
   }
 

packages/nuxt/src/core/nuxt.ts

@@ -10,9 +10,10 @@ import { readPackageJSON, resolvePackageJSON } from 'pkg-types'
 
 import escapeRE from 'escape-string-regexp'
 import fse from 'fs-extra'
-import { withoutLeadingSlash } from 'ufo'
+import { withTrailingSlash, withoutLeadingSlash } from 'ufo'
 
 import defu from 'defu'
+import { gt, satisfies } from 'semver'
 import pagesModule from '../pages/module'
 import metaModule from '../head/module'
 import componentsModule from '../components/module'
@@ -63,6 +64,11 @@ const nightlies = {
   '@nuxt/kit': '@nuxt/kit-nightly',
 }
 
+const keyDependencies = [
+  '@nuxt/kit',
+  '@nuxt/schema',
+]
+
 async function initNuxt (nuxt: Nuxt) {
   // Register user hooks
   for (const config of nuxt.options._layers.map(layer => layer.config).reverse()) {
@@ -71,6 +77,17 @@ async function initNuxt (nuxt: Nuxt) {
     }
   }
 
+  // Restart Nuxt when layer directories are added or removed
+  const layersDir = withTrailingSlash(resolve(nuxt.options.rootDir, 'layers'))
+  nuxt.hook('builder:watch', (event, relativePath) => {
+    const path = resolve(nuxt.options.srcDir, relativePath)
+    if (event === 'addDir' || event === 'unlinkDir') {
+      if (path.startsWith(layersDir)) {
+        return nuxt.callHook('restart', { hard: true })
+      }
+    }
+  })
+
   // Set nuxt instance for useNuxt
   nuxtCtx.set(nuxt)
   nuxt.hook('close', () => nuxtCtx.unset())
@@ -112,6 +129,8 @@ async function initNuxt (nuxt: Nuxt) {
     if (nuxt.options.typescript.shim) {
       opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/vue-shim.d.ts') })
     }
+    // Add shims for `#build/*` imports that do not already have matching types
+    opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/build.d.ts') })
     // Add module augmentations directly to NuxtConfig
     opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/schema.d.ts') })
     opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/app.config.d.ts') })
@@ -253,6 +272,9 @@ async function initNuxt (nuxt: Nuxt) {
     ...nuxt.options._layers.filter(i => i.cwd.includes('node_modules')).map(i => i.cwd as string),
   )
 
+  // Ensure we can resolve dependencies within layers
+  nuxt.options.modulesDir.push(...nuxt.options._layers.map(l => resolve(l.cwd, 'node_modules')))
+
   // Init user modules
   await nuxt.callHook('modules:before')
   const modulesToInstall = []
@@ -540,6 +562,12 @@ async function initNuxt (nuxt: Nuxt) {
     addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client'))
   }
 
+  // Show compatibility version banner when Nuxt is running with a compatibility version
+  // that is different from the current major version
+  if (!(satisfies(nuxt._version, nuxt.options.future.compatibilityVersion + '.x'))) {
+    console.info(`Running with compatibility version \`${nuxt.options.future.compatibilityVersion}\``)
+  }
+
   await nuxt.callHook('ready', nuxt)
 }
 
@@ -605,6 +633,8 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
 
   const nuxt = createNuxt(options)
 
+  await Promise.all(keyDependencies.map(dependency => checkDependencyVersion(dependency, nuxt._version)))
+
   // We register hooks layer-by-layer so any overrides need to be registered separately
   if (opts.overrides?.hooks) {
     nuxt.hooks.addHooks(opts.overrides.hooks)
@@ -621,4 +651,15 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
   return nuxt
 }
 
-const RESTART_RE = /^(app|error|app\.config)\.(js|ts|mjs|jsx|tsx|vue)$/i
+async function checkDependencyVersion (name: string, nuxtVersion: string): Promise<void> {
+  const path = await resolvePath(name).catch(() => null)
+
+  if (!path) { return }
+  const { version } = await readPackageJSON(path)
+
+  if (version && gt(nuxtVersion, version)) {
+    console.warn(`[nuxt] Expected \`${name}\` to be at least \`${nuxtVersion}\` but got \`${version}\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+  }
+}
+
+const RESTART_RE = /^(?:app|error|app\.config)\.(?:js|ts|mjs|jsx|tsx|vue)$/i

packages/nuxt/src/core/plugins/import-protection.ts

@@ -22,7 +22,7 @@ export const nuxtImportProtections = (nuxt: { options: NuxtOptions }, options: {
   ])
 
   patterns.push([
-    /^((|~|~~|@|@@)\/)?nuxt\.config(\.|$)/,
+    /^((~|~~|@|@@)?\/)?nuxt\.config(\.|$)/,
     'Importing directly from a `nuxt.config` file is not allowed. Instead, use runtime config or a module.',
   ])
 

packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts

@@ -6,11 +6,17 @@ import type { H3Event } from 'h3'
 import { withTrailingSlash } from 'ufo'
 import { getContext } from 'unctx'
 
+import { isVNode } from 'vue'
 import type { NitroApp } from '#internal/nitro/app'
 
 // @ts-expect-error virtual file
 import { rootDir } from '#internal/dev-server-logs-options'
 
+const devReducers: Record<string, (data: any) => any> = {
+  VNode: data => isVNode(data) ? { type: data.type, props: data.props } : undefined,
+  URL: data => data instanceof URL ? data.toString() : undefined,
+}
+
 interface NuxtDevAsyncContext {
   logs: LogObject[]
   event: H3Event
@@ -54,9 +60,10 @@ export default (nitroApp: NitroApp) => {
     const ctx = asyncContext.tryUse()
     if (!ctx) { return }
     try {
-      htmlContext.bodyAppend.unshift(`<script type="application/json" id="__NUXT_LOGS__">${stringify(ctx.logs, ctx.event.context._payloadReducers)}</script>`)
+      htmlContext.bodyAppend.unshift(`<script type="application/json" id="__NUXT_LOGS__">${stringify(ctx.logs, { ...devReducers, ...ctx.event.context._payloadReducers })}</script>`)
     } catch (e) {
-      console.warn('[nuxt] Failed to stringify dev server logs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.', e)
+      const shortError = e instanceof Error && 'toString' in e ? ` Received \`${e.toString()}\`.` : ''
+      console.warn(`[nuxt] Failed to stringify dev server logs.${shortError} You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.`)
     }
   })
 }
@@ -70,8 +77,8 @@ function getStack () {
   return stack.stack?.replace(EXCLUDE_TRACE_RE, '').replace(/^Error.*\n/, '') || ''
 }
 
-const FILENAME_RE = /at.*\(([^:)]+)[):]/
+const FILENAME_RE = /at[^(]*\(([^:)]+)[):]/
-const FILENAME_RE_GLOBAL = /at.*\(([^)]+)\)/g
+const FILENAME_RE_GLOBAL = /at[^(]*\(([^)]+)\)/g
 function extractFilenameFromStack (stacktrace: string) {
   return stacktrace.match(FILENAME_RE)?.[1].replace(withTrailingSlash(rootDir), '')
 }

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -21,7 +21,7 @@ import type { HeadEntryOptions } from '@unhead/schema'
 import type { Link, Script, Style } from '@unhead/vue'
 import { createServerHead } from '@unhead/vue'
 
-import { defineRenderHandler, getRouteRules, useAppConfig, useRuntimeConfig, useStorage } from '#internal/nitro'
+import { defineRenderHandler, getRouteRules, useRuntimeConfig, useStorage } from '#internal/nitro'
 import { useNitroApp } from '#internal/nitro/app'
 
 // @ts-expect-error virtual file
@@ -327,7 +327,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
 
   // Whether we are prerendering route
   const _PAYLOAD_EXTRACTION = import.meta.prerender && process.env.NUXT_PAYLOAD_EXTRACTION && !ssrContext.noSSR && !isRenderingIsland
-  const payloadURL = _PAYLOAD_EXTRACTION ? joinURL(ssrContext.runtimeConfig.app.baseURL, url, process.env.NUXT_JSON_PAYLOADS ? '_payload.json' : '_payload.js') + '?' + (useAppConfig().nuxt as any)?.buildId : undefined
+  const payloadURL = _PAYLOAD_EXTRACTION ? joinURL(ssrContext.runtimeConfig.app.cdnURL || ssrContext.runtimeConfig.app.baseURL, url, process.env.NUXT_JSON_PAYLOADS ? '_payload.json' : '_payload.js') + '?' + ssrContext.runtimeConfig.app.buildId : undefined
   if (import.meta.prerender) {
     ssrContext.payload.prerenderedAt = Date.now()
   }
@@ -646,7 +646,7 @@ function getServerComponentHTML (body: string[]): string {
 
 const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/
 const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/
-const SSR_CLIENT_SLOT_MARKER = /^island-slot=(?:[^;]*);(.*)$/
+const SSR_CLIENT_SLOT_MARKER = /^island-slot=[^;]*;(.*)$/
 
 function getSlotIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandResponse['slots'] {
   if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined }

packages/nuxt/src/core/schema.ts

@@ -1,6 +1,6 @@
 import { existsSync } from 'node:fs'
 import { mkdir, writeFile } from 'node:fs/promises'
-import { pathToFileURL } from 'node:url'
+import { fileURLToPath, pathToFileURL } from 'node:url'
 import { dirname, resolve } from 'pathe'
 import chokidar from 'chokidar'
 import { interopDefault } from 'mlly'
@@ -26,7 +26,7 @@ export default defineNuxtModule({
     const resolver = createResolver(import.meta.url)
 
     // Initialize untyped/jiti loader
-    const _resolveSchema = jiti(dirname(import.meta.url), {
+    const _resolveSchema = jiti(dirname(fileURLToPath(import.meta.url)), {
       esmResolve: true,
       interopDefault: true,
       cache: false,

packages/nuxt/src/core/templates.ts

@@ -130,6 +130,12 @@ declare module '#app' {
   }
 }
 
+declare module '#app/defaults' {
+  type DefaultAsyncDataErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
+  type DefaultAsyncDataValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
+  type DefaultErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
+}
+
 declare module 'vue' {
   interface ComponentCustomProperties extends NuxtAppInjections { }
 }
@@ -266,10 +272,13 @@ export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
 export const appConfigDeclarationTemplate: NuxtTemplate = {
   filename: 'types/app.config.d.ts',
   getContents ({ app, nuxt }) {
+    const typesDir = join(nuxt.options.buildDir, 'types')
+    const configPaths = app.configs.map(path => relative(typesDir, path).replace(/\b\.\w+$/g, ''))
+
     return `
 import type { CustomAppConfig } from 'nuxt/schema'
 import type { Defu } from 'defu'
-${app.configs.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id.replace(/(?<=\w)\.\w+$/g, ''))}`).join('\n')}
+${configPaths.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
 
 declare const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}
 type ResolvedAppConfig = Defu<typeof inlineConfig, [${app.configs.map((_id: string, index: number) => `typeof cfg${index}`).join(', ')}]>
@@ -393,11 +402,43 @@ export const nuxtConfigTemplate: NuxtTemplate = {
       `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
       `export const devLogs = ${JSON.stringify(ctx.nuxt.options.features.devLogs)}`,
       `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
-      `export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`,
+      `export const asyncDataDefaults = ${JSON.stringify({
+        ...ctx.nuxt.options.experimental.defaults.useAsyncData,
+        value: ctx.nuxt.options.experimental.defaults.useAsyncData.value === 'null' ? null : undefined,
+        errorValue: ctx.nuxt.options.experimental.defaults.useAsyncData.errorValue === 'null' ? null : undefined,
+      })}`,
+      `export const resetAsyncDataToUndefined = ${ctx.nuxt.options.experimental.resetAsyncDataToUndefined}`,
+      `export const nuxtDefaultErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}`,
       `export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`,
       `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`,
       `export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`,
-      `export const buildId = ${JSON.stringify(ctx.nuxt.options.buildId)}`,
+      `export const appId = ${JSON.stringify(ctx.nuxt.options.appId)}`,
     ].join('\n\n')
   },
 }
+
+const TYPE_FILENAME_RE = /\.([cm])?[jt]s$/
+const DECLARATION_RE = /\.d\.[cm]?ts$/
+export const buildTypeTemplate: NuxtTemplate = {
+  filename: 'types/build.d.ts',
+  getContents ({ app }) {
+    let declarations = ''
+
+    for (const file of app.templates) {
+      if (file.write || !file.filename || DECLARATION_RE.test(file.filename)) {
+        continue
+      }
+
+      if (TYPE_FILENAME_RE.test(file.filename)) {
+        const typeFilenames = new Set([file.filename.replace(TYPE_FILENAME_RE, '.d.$1ts'), file.filename.replace(TYPE_FILENAME_RE, '.d.ts')])
+        if (app.templates.some(f => f.filename && typeFilenames.has(f.filename))) {
+          continue
+        }
+      }
+
+      declarations += 'declare module ' + JSON.stringify(join('#build', file.filename)) + ';\n'
+    }
+
+    return declarations
+  },
+}

packages/nuxt/src/core/utils/plugins.ts

@@ -34,7 +34,7 @@ export function isVue (id: string, opts: { type?: Array<'template' | 'script' |
   return true
 }
 
-const JS_RE = /\.((c|m)?j|t)sx?$/
+const JS_RE = /\.(?:[cm]?j|t)sx?$/
 
 export function isJS (id: string) {
   // JavaScript files

packages/nuxt/src/imports/presets.ts

@@ -135,6 +135,7 @@ export const scriptsStubsPreset = {
     'useScriptGoogleMaps',
     'useScriptNpm',
   ],
+  priority: -1,
   from: '#app/composables/script-stubs',
 } satisfies InlinePreset
 

packages/nuxt/src/pages/module.ts

@@ -422,11 +422,6 @@ export default defineNuxtModule({
       getContents: () => 'export { START_LOCATION, useRoute } from \'vue-router\'',
     })
 
-    // Optimize vue-router to ensure we share the same injection symbol
-    nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
-    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
-    nuxt.options.vite.optimizeDeps.include.push('vue-router')
-
     nuxt.options.vite.resolve = nuxt.options.vite.resolve || {}
     nuxt.options.vite.resolve.dedupe = nuxt.options.vite.resolve.dedupe || []
     nuxt.options.vite.resolve.dedupe.push('vue-router')

packages/nuxt/src/pages/plugins/route-injection.ts

@@ -1,10 +1,13 @@
 import { createUnplugin } from 'unplugin'
 import MagicString from 'magic-string'
 import type { Nuxt } from '@nuxt/schema'
+import { stripLiteral } from 'strip-literal'
 import { isVue } from '../../core/utils'
 
-const INJECTION_RE = /\b_ctx\.\$route\b/g
+const INJECTION_RE_TEMPLATE = /\b_ctx\.\$route\b/g
-const INJECTION_SINGLE_RE = /\b_ctx\.\$route\b/
+const INJECTION_RE_SCRIPT = /\bthis\.\$route\b/g
+
+const INJECTION_SINGLE_RE = /\bthis\.\$route\b|\b_ctx\.\$route\b/
 
 export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
   return {
@@ -14,14 +17,30 @@ export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
       return isVue(id, { type: ['template', 'script'] })
     },
     transform (code) {
-      if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol')) { return }
+      if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol') || code.includes('this._.provides[__nuxt_route_symbol')) { return }
 
       let replaced = false
       const s = new MagicString(code)
-      s.replace(INJECTION_RE, () => {
+      const strippedCode = stripLiteral(code)
-        replaced = true
+
-        return '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)'
+      // Local helper function for regex-based replacements using `strippedCode`
-      })
+      const replaceMatches = (regExp: RegExp, replacement: string) => {
+        for (const match of strippedCode.matchAll(regExp)) {
+          const start = match.index!
+          const end = start + match[0].length
+          s.overwrite(start, end, replacement)
+          if (!replaced) {
+            replaced = true
+          }
+        }
+      }
+
+      // handles `$route` in template
+      replaceMatches(INJECTION_RE_TEMPLATE, '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)')
+
+      // handles `this.$route` in script
+      replaceMatches(INJECTION_RE_SCRIPT, '(this._.provides[__nuxt_route_symbol] || this.$route)')
+
       if (replaced) {
         s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from \'#app/components/injections\';\n')
       }

packages/nuxt/src/pages/runtime/plugins/prerender.server.ts

@@ -23,7 +23,7 @@ export default defineNuxtPlugin(async () => {
 
 // Implementation
 
-const OPTIONAL_PARAM_RE = /^\/?:.*(\?|\(\.\*\)\*)$/
+const OPTIONAL_PARAM_RE = /^\/?:.*(?:\?|\(\.\*\)\*)$/
 
 function processRoutes (routes: RouteRecordRaw[], currentPath = '/', routesToPrerender = new Set<string>()) {
   for (const route of routes) {

packages/nuxt/src/pages/utils.ts

@@ -135,7 +135,7 @@ export async function generateRoutesFromFiles (files: ScannedFile[], options: Ge
   return prepareRoutes(routes)
 }
 
-const SFC_SCRIPT_RE = /<script\s*[^>]*>([\s\S]*?)<\/script\s*[^>]*>/i
+const SFC_SCRIPT_RE = /<script[^>]*>([\s\S]*?)<\/script[^>]*>/i
 export function extractScriptContent (html: string) {
   const match = html.match(SFC_SCRIPT_RE)
 
@@ -146,7 +146,7 @@ export function extractScriptContent (html: string) {
   return null
 }
 
-const PAGE_META_RE = /(definePageMeta\([\s\S]*?\))/
+const PAGE_META_RE = /definePageMeta\([\s\S]*?\)/
 const DYNAMIC_META_KEY = '__nuxt_dynamic_meta_key' as const
 
 const pageContentsCache: Record<string, string> = {}
@@ -261,7 +261,7 @@ function getRoutePath (tokens: SegmentToken[]): string {
   }, '/')
 }
 
-const PARAM_CHAR_RE = /[\w\d_.]/
+const PARAM_CHAR_RE = /[\w.]/
 
 function parseSegment (segment: string) {
   let state: SegmentParserState = SegmentParserState.initial
@@ -537,7 +537,7 @@ export function pathToNitroGlob (path: string) {
     return null
   }
 
-  return path.replace(/\/(?:[^:/]+)?:\w+.*$/, '/**')
+  return path.replace(/\/[^:/]*:\w.*$/, '/**')
 }
 
 export function resolveRoutePaths (page: NuxtPage, parent = '/'): string[] {

packages/nuxt/test/load-nuxt.test.ts

@@ -1,11 +1,32 @@
 import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { normalize } from 'pathe'
 import { withoutTrailingSlash } from 'ufo'
+import { readPackageJSON } from 'pkg-types'
+import { inc } from 'semver'
 import { loadNuxt } from '../src'
+import { version } from '../package.json'
 
 const repoRoot = withoutTrailingSlash(normalize(fileURLToPath(new URL('../../../', import.meta.url))))
 
+vi.stubGlobal('console', {
+  ...console,
+  error: vi.fn(console.error),
+  warn: vi.fn(console.warn),
+})
+
+vi.mock('pkg-types', async (og) => {
+  const originalPkgTypes = (await og<typeof import('pkg-types')>())
+  return {
+    ...originalPkgTypes,
+    readPackageJSON: vi.fn(originalPkgTypes.readPackageJSON),
+  }
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
 describe('loadNuxt', () => {
   it('respects hook overrides', async () => {
     let hookRan = false
@@ -24,3 +45,44 @@ describe('loadNuxt', () => {
     expect(hookRan).toBe(true)
   })
 })
+
+describe('dependency mismatch', () => {
+  it('expect mismatched dependency to log a warning', async () => {
+    vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
+      version: '3.0.0',
+    }))
+
+    const nuxt = await loadNuxt({
+      cwd: repoRoot,
+    })
+
+    expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/kit\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+    expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/schema\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+
+    vi.mocked(readPackageJSON).mockRestore()
+    await nuxt.close()
+  })
+  it.each([
+    {
+      name: 'nuxt version is lower',
+      depVersion: inc(version, 'minor'),
+    },
+    {
+      name: 'version matches',
+      depVersion: version,
+    },
+  ])('expect no warning when $name.', async ({ depVersion }) => {
+    vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
+      depVersion,
+    }))
+
+    const nuxt = await loadNuxt({
+      cwd: repoRoot,
+    })
+
+    expect(console.warn).not.toHaveBeenCalled()
+
+    await nuxt.close()
+    vi.mocked(readPackageJSON).mockRestore()
+  })
+})

packages/nuxt/test/route-injection.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest'
+import { compileScript, compileTemplate, parse } from '@vue/compiler-sfc'
+import type { Plugin } from 'vite'
+import type { Nuxt } from '@nuxt/schema'
+
+import { RouteInjectionPlugin } from '../src/pages/plugins/route-injection'
+
+describe('route-injection:transform', () => {
+  const injectionPlugin = RouteInjectionPlugin({ options: { sourcemap: { client: false, server: false } } } as Nuxt).raw({}, { framework: 'rollup' }) as Plugin
+
+  const transform = async (source: string) => {
+    const result = await (injectionPlugin.transform! as Function).call({ error: null, warn: null } as any, source, 'test.vue')
+    const code: string = typeof result === 'string' ? result : result?.code
+    let depth = 0
+    return code.split('\n').map((l) => {
+      l = l.trim()
+      if (l.match(/^[}\]]/)) { depth-- }
+      const res = ''.padStart(depth * 2, ' ') + l
+      if (l.match(/[{[]$/)) { depth++ }
+      return res
+    }).join('\n')
+  }
+
+  it('should correctly inject route in template', async () => {
+    const sfc = `<template>{{ $route.path }}</template>`
+    const res = compileTemplate({
+      filename: 'test.vue',
+      id: 'test.vue',
+      source: sfc,
+    })
+    const transformResult = await transform(res.code)
+    expect(transformResult).toMatchInlineSnapshot(`
+      "import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
+      import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+      export function render(_ctx, _cache) {
+        return (_openBlock(), _createElementBlock("template", null, [
+          _createTextVNode(_toDisplayString((_ctx._.provides[__nuxt_route_symbol] || _ctx.$route).path), 1 /* TEXT */)
+        ]))
+      }"
+    `)
+  })
+
+  it('should correctly inject route in options api', async () => {
+    const sfc = `
+      <template>{{ thing }}</template>
+      <script>
+      export default {
+        computed: {
+          thing () {
+            return this.$route.path
+          }
+        }
+      }
+      </script>
+    `
+
+    const res = compileScript(parse(sfc).descriptor, { id: 'test.vue' })
+    const transformResult = await transform(res.content)
+    expect(transformResult).toMatchInlineSnapshot(`
+      "import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
+
+      export default {
+        computed: {
+          thing () {
+            return (this._.provides[__nuxt_route_symbol] || this.$route).path
+          }
+        }
+      }
+      "
+    `)
+  })
+})

packages/nuxt/test/treeshake-client.test.ts

@@ -182,7 +182,7 @@ describe('treeshake client only in ssr', () => {
         expect(treeshaken).not.toContain('ssrRenderComponent(_unref(HelloWorld')
         expect(treeshaken).toContain('ssrRenderComponent(_unref(Glob')
       }
-      expect(treeshaken.replace(/data-v-[\d\w]{8}/g, 'data-v-one-hash').replace(/scoped=[\d\w]{8}/g, 'scoped=one-hash')).toMatchSnapshot()
+      expect(treeshaken.replace(/data-v-\w{8}/g, 'data-v-one-hash').replace(/scoped=\w{8}/g, 'scoped=one-hash')).toMatchSnapshot()
     })
   }
 

packages/schema/package.json

@@ -35,16 +35,16 @@
   },
   "devDependencies": {
     "@nuxt/telemetry": "2.5.4",
-    "@nuxt/ui-templates": "1.3.3",
+    "@nuxt/ui-templates": "1.3.4",
     "@types/file-loader": "5.0.4",
     "@types/pug": "2.0.10",
     "@types/sass-loader": "8.0.8",
-    "@unhead/schema": "1.9.10",
+    "@unhead/schema": "1.9.11",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
     "@vue/compiler-core": "3.4.27",
     "@vue/compiler-sfc": "3.4.27",
-    "@vue/language-core": "2.0.16",
+    "@vue/language-core": "2.0.19",
     "c12": "1.10.0",
     "esbuild-loader": "4.1.0",
     "h3": "1.11.1",
@@ -54,7 +54,7 @@
     "unbuild": "latest",
     "unctx": "2.3.1",
     "unenv": "1.9.0",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vue": "3.4.27",
     "vue-bundle-renderer": "2.1.0",
     "vue-loader": "17.4.2",
@@ -71,7 +71,7 @@
     "scule": "^1.3.0",
     "std-env": "^3.7.0",
     "ufo": "^1.5.3",
-    "unimport": "^3.7.1",
+    "unimport": "^3.7.2",
     "uncrypto": "^0.1.3",
     "untyped": "^1.4.2"
   },

packages/schema/src/config/app.ts

@@ -45,7 +45,17 @@ export default defineUntypedSchema({
     /**
      * The base path of your Nuxt application.
      *
-     * This can be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
+     * For example:
+     * @example
+     * ```ts
+     * export default defineNuxtConfig({
+     *   app: {
+     *     baseURL: '/prefix/'
+     *   }
+     * })
+     * ```
+     *
+     * This can also be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
      * @example
      * ```bash
      * NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
@@ -63,6 +73,16 @@ export default defineUntypedSchema({
     /**
      * An absolute URL to serve the public folder from (production-only).
      *
+     * For example:
+     * @example
+     * ```ts
+     * export default defineNuxtConfig({
+     *   app: {
+     *     cdnURL: 'https://mycdn.org/'
+     *   }
+     * })
+     * ```
+     *
      * This can be set to a different value at runtime by setting the `NUXT_APP_CDN_URL` environment variable.
      * @example
      * ```bash
@@ -241,6 +261,7 @@ export default defineUntypedSchema({
   /**
    * Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page
    * rendered with `ssr: false`.
+   *
    * - If it is unset, it will use `~/app/spa-loading-template.html` file in one of your layers, if it exists.
    * - If it is false, no SPA loading indicator will be loaded.
    * - If true, Nuxt will look for `~/app/spa-loading-template.html` file in one of your layers, or a

packages/schema/src/config/common.ts

@@ -154,11 +154,23 @@ export default defineUntypedSchema({
     $resolve: async (val: string | undefined, get): Promise<string> => resolve(await get('rootDir') as string, val || '.nuxt'),
   },
 
+  /**
+   * For multi-app projects, the unique name of the Nuxt application.
+   */
+  appId: {
+    $resolve: (val: string) => val ?? 'nuxt-app',
+  },
+
   /**
    * A unique identifier matching the build. This may contain the hash of the current state of the project.
    */
   buildId: {
-    $resolve: (val: string) => val ?? randomUUID(),
+    $resolve: async (val: string | undefined, get): Promise<string> => {
+      if (typeof val === 'string') { return val }
+
+      const [isDev, isTest] = await Promise.all([get('dev') as Promise<boolean>, get('test') as Promise<boolean>])
+      return isDev ? 'dev' : isTest ? 'test' : randomUUID()
+    },
   },
 
   /**
@@ -236,7 +248,8 @@ export default defineUntypedSchema({
    *
    * Nuxt tries to resolve each item in the modules array using node require path
    * (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used.
-   * @note Modules are executed sequentially so the order is important.
+   * @note Modules are executed sequentially so the order is important. First, the modules defined in `nuxt.config.ts` are loaded. Then, modules found in the `modules/`
+   * directory are executed, and they load in alphabetical order.
    * @example
    * ```js
    * modules: [
@@ -527,11 +540,12 @@ export default defineUntypedSchema({
    */
   runtimeConfig: {
     $resolve: async (val: RuntimeConfig, get): Promise<Record<string, unknown>> => {
-      const app = await get('app') as Record<string, string>
+      const [app, buildId] = await Promise.all([get('app') as Promise<Record<string, string>>, get('buildId') as Promise<string>])
       provideFallbackValues(val)
       return defu(val, {
         public: {},
         app: {
+          buildId,
           baseURL: app.baseURL,
           buildAssetsDir: app.buildAssetsDir,
           cdnURL: app.cdnURL,

packages/schema/src/config/experimental.ts

@@ -29,6 +29,7 @@ export default defineUntypedSchema({
      *     compileTemplate: true,
      *     templateUtils: true,
      *     relativeWatchPaths: true,
+     *     resetAsyncDataToUndefined: true,
      *     defaults: {
      *       useAsyncData: {
      *         deep: true
@@ -45,6 +46,11 @@ export default defineUntypedSchema({
      * @type {3 | 4}
      */
     compatibilityVersion: 3,
+    /**
+     * This enables early access to the experimental multi-app support.
+     * @see [Nuxt Issue #21635](https://github.com/nuxt/nuxt/issues/21635)
+     */
+    multiApp: false,
     /**
      * This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
      * for frameworks like Nuxt and Vite.
@@ -136,8 +142,18 @@ export default defineUntypedSchema({
     /**
      * Tree shakes contents of client-only components from server bundle.
      * @see [Nuxt PR #5750](https://github.com/nuxt/framework/pull/5750)
+     * @deprecated This option will no longer be configurable in Nuxt v4
      */
-    treeshakeClientOnly: true,
+    treeshakeClientOnly: {
+      async $resolve (val, get) {
+        const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
+        if (isV4 && val === false) {
+          console.warn('Enabling `experimental.treeshakeClientOnly` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+          return true
+        }
+        return val ?? true
+      },
+    },
 
     /**
      * Emit `app:chunkError` hook when there is an error loading vite/webpack
@@ -246,19 +262,51 @@ export default defineUntypedSchema({
     /**
      * Config schema support
      * @see [Nuxt Issue #15592](https://github.com/nuxt/nuxt/issues/15592)
+     * @deprecated This option will no longer be configurable in Nuxt v4
      */
-    configSchema: true,
+    configSchema: {
+      async $resolve (val, get) {
+        const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
+        if (isV4 && val === false) {
+          console.warn('Enabling `experimental.configSchema` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+          return true
+        }
+        return val ?? true
+      },
+    },
 
     /**
      * Whether or not to add a compatibility layer for modules, plugins or user code relying on the old
      * `@vueuse/head` API.
      *
-     * This can be disabled for most Nuxt sites to reduce the client-side bundle by ~0.5kb.
+     * This is disabled to reduce the client-side bundle by ~0.5kb.
+     * @deprecated This feature will be removed in Nuxt v4.
      */
-    polyfillVueUseHead: false,
+    polyfillVueUseHead: {
+      async $resolve (val, get) {
+        const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
+        if (isV4 && val === true) {
+          console.warn('Disabling `experimental.polyfillVueUseHead` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+          return false
+        }
+        return val ?? false
+      },
+    },
 
-    /** Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header. */
+    /**
-    respectNoSSRHeader: false,
+     * Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
+     * @deprecated This feature will be removed in Nuxt v4.
+     */
+    respectNoSSRHeader: {
+      async $resolve (val, get) {
+        const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
+        if (isV4 && val === true) {
+          console.warn('Disabling `experimental.respectNoSSRHeader` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+          return false
+        }
+        return val ?? false
+      },
+    },
 
     /** Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories. */
     localLayerAliases: true,
@@ -295,8 +343,10 @@ export default defineUntypedSchema({
 
     /**
      * Use new experimental head optimisations:
+     *
      * - Add the capo.js head plugin in order to render tags in of the head in a more performant way.
      * - Uses the hash hydration plugin to reduce initial hydration
+     *
      * @see [Nuxt Discussion #22632](https://github.com/nuxt/nuxt/discussions/22632]
      */
     headNext: true,
@@ -345,7 +395,11 @@ export default defineUntypedSchema({
      * })
      * ```
      */
-    sharedPrerenderData: false,
+    sharedPrerenderData: {
+      async $resolve (val, get) {
+        return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
+      },
+    },
 
     /**
      * Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
@@ -368,6 +422,18 @@ export default defineUntypedSchema({
        * Options that apply to `useAsyncData` (and also therefore `useFetch`)
        */
       useAsyncData: {
+        /** @type {'undefined' | 'null'} */
+        value: {
+          async $resolve (val, get) {
+            return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4 ? 'undefined' : 'null')
+          },
+        },
+        /** @type {'undefined' | 'null'} */
+        errorValue: {
+          async $resolve (val, get) {
+            return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4 ? 'undefined' : 'null')
+          },
+        },
         deep: {
           async $resolve (val, get) {
             return val ?? !((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
@@ -429,5 +495,15 @@ export default defineUntypedSchema({
         return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion !== 4)
       },
     },
+
+    /**
+     * Whether `clear` and `clearNuxtData` should reset async data to its _default_ value or update
+     * it to `null`/`undefined`.
+     */
+    resetAsyncDataToUndefined: {
+      async $resolve (val, get) {
+        return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion !== 4)
+      },
+    },
   },
 })

packages/schema/src/config/nitro.ts

@@ -46,11 +46,13 @@ export default defineUntypedSchema({
    * Nitro server handlers.
    *
    * Each handler accepts the following options:
+   *
    * - handler: The path to the file defining the handler.
    * - route: The route under which the handler is available. This follows the conventions of https://github.com/unjs/radix3.
    * - method: The HTTP method of requests that should be handled.
    * - middleware: Specifies whether it is a middleware handler.
    * - lazy: Specifies whether to use lazy loading to import the handler.
+   *
    * @see https://nuxt.com/docs/guide/directory-structure/server
    * @note Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt.
    * @example

packages/schema/src/config/typescript.ts

@@ -41,6 +41,7 @@ export default defineUntypedSchema({
           'ofetch',
           // Key nuxt dependencies
           '@unhead/vue',
+          '@nuxt/devtools',
           'vue',
           '@vue/runtime-core',
           '@vue/compiler-sfc',

packages/schema/src/config/webpack.ts

@@ -157,7 +157,11 @@ export default defineUntypedSchema({
        * See https://github.com/esbuild-kit/esbuild-loader
        * @type {Omit<typeof import('esbuild-loader')['LoaderOptions'], 'loader'>}
        */
-      esbuild: {},
+      esbuild: {
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+        tsconfigRaw: '{}',
+      },
 
       /**
        * See: https://github.com/webpack-contrib/file-loader#options

packages/ui-templates/lib/dev.ts

@@ -23,7 +23,7 @@ export const DevRenderingPlugin = () => {
       const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8'))
 
       return template(contents, {
-        interpolate: /{{{?([\s\S]+?)}?}}/g,
+        interpolate: /\{\{\{?([\s\S]+?)\}?\}\}/g,
       })({
         messages: { ...genericMessages, ...messages },
       })

packages/ui-templates/lib/render.ts

@@ -58,7 +58,7 @@ export const RenderPlugin = () => {
         }
 
         // Inline our scripts
-        const scriptSources = Array.from(html.matchAll(/<script[^>]*src="(.*)"[^>]*>[\s\S]*?<\/script>/g))
+        const scriptSources = Array.from(html.matchAll(/<script[^>]*src="([^"]*)"[^>]*>[\s\S]*?<\/script>/g))
           .filter(([_block, src]) => src?.match(/^\/.*\.js$/))
 
         for (const [scriptBlock, src] of scriptSources) {
@@ -79,10 +79,10 @@ export const RenderPlugin = () => {
         const messages = JSON.parse(readFileSync(r(`templates/${templateName}/messages.json`), 'utf-8'))
 
         // Serialize into a js function
-        const chunks = html.split(/\{{2,3}\s*[^{}]+\s*\}{2,3}/g).map(chunk => JSON.stringify(chunk))
+        const chunks = html.split(/\{{2,3}[^{}]+\}{2,3}/g).map(chunk => JSON.stringify(chunk))
         const hasMessages = chunks.length > 1
         let templateString = chunks.shift()
-        for (const expression of html.matchAll(/\{{2,3}(\s*[^{}]+\s*)\}{2,3}/g)) {
+        for (const expression of html.matchAll(/\{{2,3}([^{}]+)\}{2,3}/g)) {
           templateString += ` + (${expression[1].trim()}) + ${chunks.shift()}`
         }
         if (chunks.length > 0) {
@@ -98,28 +98,28 @@ export const RenderPlugin = () => {
         ].join('\n')
 
         const templateContent = html
-          .match(/<body.*?>([\s\S]*)<\/body>/)?.[0]
+          .match(/<body[^>]*>([\s\S]*)<\/body>/)?.[0]
-          .replace(/(?<=<|<\/)body/g, 'div')
+          .replace(/(?<=<\/|<)body/g, 'div')
           .replace(/messages\./g, '')
           .replace(/<script[^>]*>([\s\S]*?)<\/script>/g, '')
           .replace(/<a href="(\/[^"]*)"([^>]*)>([\s\S]*)<\/a>/g, '<NuxtLink to="$1"$2>\n$3\n</NuxtLink>')
 
-          .replace(/<([^>]+) ([a-z]+)="([^"]*)({{\s*(\w+?)\s*}})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>')
+          .replace(/<([^>]+) ([a-z]+)="([^"]*)(\{\{\s*(\w+)\s*\}\})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>')
-          .replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-text="$1" />')
+          .replace(/>\{\{\s*(\w+)\s*\}\}<\/[\w-]*>/g, ' v-text="$1" />')
-          .replace(/>{{{\s*(\w+?)\s*}}}<\/[\w-]*>/g, ' v-html="$1" />')
+          .replace(/>\{\{\{\s*(\w+)\s*\}\}\}<\/[\w-]*>/g, ' v-html="$1" />')
         // We are not matching <link> <script> and <meta> tags as these aren't used yet in nuxt/ui
         // and should be taken care of wherever this SFC is used
-        const title = html.match(/<title.*?>([\s\S]*)<\/title>/)?.[1].replace(/{{([\s\S]+?)}}/g, (r) => {
+        const title = html.match(/<title[^>]*>([\s\S]*)<\/title>/)?.[1].replace(/\{\{([\s\S]+?)\}\}/g, (r) => {
           return `\${${r.slice(2, -2)}}`.replace(/messages\./g, 'props.')
         })
         const styleContent = Array.from(html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)).map(block => block[1]).join('\n')
-        const globalStyles = styleContent.replace(/(\.[^{\d][^{]*?\{[^}]*?\})+.?/g, (r) => {
+        const globalStyles = styleContent.replace(/(\.[^{\d][^{]*\{[^}]*\})+.?/g, (r) => {
           const lastChar = r[r.length - 1]
           if (lastChar && !['}', '.', '@', '*', ':'].includes(lastChar)) {
             return ';' + lastChar
           }
           return lastChar
-        }).replace(/@media[^{]*?\{\}/g, '')
+        }).replace(/@media[^{]*\{\}/g, '')
         const inlineScripts = Array.from(html.matchAll(/<script>([\s\S]*?)<\/script>/g))
           .map(block => block[1])
           .filter(i => !i.includes('const t=document.createElement("link")'))

packages/ui-templates/package.json

@@ -20,9 +20,9 @@
   },
   "devDependencies": {
     "@types/html-minifier": "4.0.5",
-    "@unocss/reset": "0.60.0",
+    "@unocss/reset": "0.60.3",
     "critters": "0.0.22",
-    "execa": "9.0.1",
+    "execa": "9.1.0",
     "globby": "14.0.1",
     "html-minifier": "4.0.0",
     "jiti": "1.21.0",
@@ -30,7 +30,7 @@
     "pathe": "1.1.2",
     "prettier": "3.2.5",
     "scule": "1.3.0",
-    "unocss": "0.60.0",
+    "unocss": "0.60.3",
-    "vite": "5.2.11"
+    "vite": "5.2.12"
   }
 }