diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 0d41b7ba33..87c74f0eb4 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:lts@sha256:a5e0ed56f2c20b9689e0f7dd498cac7e08d2a3a283e92d9304e7b9b83e3c6ff3
+FROM node:lts@sha256:de4c8be8232b7081d8846360d73ce6dbff33c6636f2259cd14d82c0de1ac3ff2
RUN apt-get update && \
apt-get install -fy libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdbus-1-3 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2 && \
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
index b04478031a..7194dec4dd 100644
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -19,4 +19,4 @@ jobs:
- name: 'Checkout Repository'
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: 'Dependency Review'
- uses: actions/dependency-review-action@a6993e2c61fd5dc440b409aa1d6904921c5e1894 # v4.3.5
+ uses: actions/dependency-review-action@4081bf99e2866ebe428fc0477b69eb4fcda7220a # v4.4.0
diff --git a/.github/workflows/docs-check-links.yml b/.github/workflows/docs-check-links.yml
index 7d27acd60b..f9e946dbf9 100644
--- a/.github/workflows/docs-check-links.yml
+++ b/.github/workflows/docs-check-links.yml
@@ -29,7 +29,7 @@ jobs:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Lychee link checker
- uses: lycheeverse/lychee-action@7cd0af4c74a61395d455af97419279d86aafaede # for v1.8.0
+ uses: lycheeverse/lychee-action@ae4699150ab670dcfb64cc74e8680e776d9caae2 # for v1.8.0
with:
# arguments with file types to check
args: >-
diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
index 4cf9310b81..57eb019f6c 100644
--- a/docs/1.getting-started/3.configuration.md
+++ b/docs/1.getting-started/3.configuration.md
@@ -33,6 +33,7 @@ You don't have to use TypeScript to build an application with Nuxt. However, it
You can configure fully typed, per-environment overrides in your nuxt.config
```ts twoslash [nuxt.config.ts]
+// @errors: 2353
export default defineNuxtConfig({
$production: {
routeRules: {
@@ -41,10 +42,17 @@ export default defineNuxtConfig({
},
$development: {
//
- }
+ },
+ $myCustomName: {
+ //
+ },
})
```
+To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxi build --envName myCustomName`.
+
+To learn more about the mechanism behind these overrides, please refer to the `c12` documentation on [environment-specific configuration](https://github.com/unjs/c12?tab=readme-ov-file#environment-specific-configuration).
+
::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
::
diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index 9e4e0a47ae..7dff19f2c8 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@@ -88,6 +88,37 @@ It is recommended to use `$fetch` for client-side interactions (event based) or
Read more about `$fetch`.
::
+### Pass Client Headers to the API
+
+During server-side-rendering, since the `$fetch` request takes place 'internally' within the server, it won't include the user's browser cookies.
+
+We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
+
+The example below adds the request headers to an isomorphic `$fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
+
+```vue
+
+```
+
+::caution
+Be very careful before proxying headers to an external API and just include headers that you need. Not all headers are safe to be bypassed and might introduce unwanted behavior. Here is a list of common headers that are NOT to be proxied:
+
+- `host`, `accept`
+- `content-length`, `content-md5`, `content-type`
+- `x-forwarded-host`, `x-forwarded-port`, `x-forwarded-proto`
+- `cf-connecting-ip`, `cf-ray`
+::
+
+::tip
+You can also use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers to the call automatically.
+:::
+
## `useFetch`
The [`useFetch`](/docs/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
@@ -117,8 +148,8 @@ Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
The `useAsyncData` composable is responsible for wrapping async logic and returning the result once it is resolved.
::tip
-`useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))`. :br
-It's developer experience sugar for the most common use case.
+`useFetch(url)` is nearly equivalent to `useAsyncData(url, () => event.$fetch(url))`. :br
+It's developer experience sugar for the most common use case. (You can find out more about `event.fetch` at [`useRequestFetch`](/docs/api/composables/use-request-fetch).)
::
::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
@@ -458,32 +489,13 @@ For finer control, the `status` variable can be:
- `error` when the fetch fails
- `success` when the fetch is completed successfully
-## Passing Headers and cookies
+## Passing Headers and Cookies
-When we call `$fetch` in the browser, user headers like `cookie` will be directly sent to the API. But during server-side-rendering, since the `$fetch` request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response.
+When we call `$fetch` in the browser, user headers like `cookie` will be directly sent to the API.
-### Pass Client Headers to the API
+Normally, during server-side-rendering, since the `$fetch` request takes place 'internally' within the server, it wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.
-We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
-
-The example below adds the request headers to an isomorphic `$fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
-
-```vue
-
-```
-
-::caution
-Be very careful before proxying headers to an external API and just include headers that you need. Not all headers are safe to be bypassed and might introduce unwanted behavior. Here is a list of common headers that are NOT to be proxied:
-
-- `host`, `accept`
-- `content-length`, `content-md5`, `content-type`
-- `x-forwarded-host`, `x-forwarded-port`, `x-forwarded-proto`
-- `cf-connecting-ip`, `cf-ray`
-::
+However, when calling `useFetch` on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
### Pass Cookies From Server-side API Calls on SSR Response
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
index 0efb13daac..57d88ddd5c 100644
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/docs/2.guide/2.directory-structure/1.pages.md
@@ -323,6 +323,10 @@ You may define a name for this page's route.
You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
+#### `props`
+
+Allows accessing the route `params` as props passed to the page component. See[the `vue-router` docs](https://router.vuejs.org/guide/essentials/passing-props) for more information.
+
### Typing Custom Metadata
If you add custom metadata for your pages, you may wish to do so in a type-safe way. It is possible to augment the type of the object accepted by `definePageMeta`:
diff --git a/docs/2.guide/3.going-further/1.experimental-features.md b/docs/2.guide/3.going-further/1.experimental-features.md
index 57cd77803e..40d8c5bebf 100644
--- a/docs/2.guide/3.going-further/1.experimental-features.md
+++ b/docs/2.guide/3.going-further/1.experimental-features.md
@@ -59,14 +59,16 @@ This feature will likely be removed in a near future.
## emitRouteChunkError
-Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a hard reload of the new route when a chunk fails to load.
+Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
+
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediatly, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
- emitRouteChunkError: 'automatic' // or 'manual' or false
+ emitRouteChunkError: 'automatic' // or 'automatic-immediate', 'manual' or false
}
})
```
diff --git a/docs/2.guide/4.recipes/3.custom-usefetch.md b/docs/2.guide/4.recipes/3.custom-usefetch.md
index a0ac6d7e29..45d9651237 100644
--- a/docs/2.guide/4.recipes/3.custom-usefetch.md
+++ b/docs/2.guide/4.recipes/3.custom-usefetch.md
@@ -77,7 +77,7 @@ export function useAPI(
) {
return useFetch(url, {
...options,
- $fetch: useNuxtApp().$api
+ $fetch: useNuxtApp().$api as typeof $fetch
})
}
```
diff --git a/docs/3.api/2.composables/use-runtime-hook.md b/docs/3.api/2.composables/use-runtime-hook.md
new file mode 100644
index 0000000000..c2b3a9ec59
--- /dev/null
+++ b/docs/3.api/2.composables/use-runtime-hook.md
@@ -0,0 +1,43 @@
+---
+title: useRuntimeHook
+description: Registers a runtime hook in a Nuxt application and ensures it is properly disposed of when the scope is destroyed.
+links:
+ - label: Source
+ icon: i-simple-icons-github
+ to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/runtime-hook.ts
+ size: xs
+---
+
+::important
+This composable is available in Nuxt v3.14+.
+::
+
+```ts [signature]
+function useRuntimeHook(
+ name: THookName,
+ fn: RuntimeNuxtHooks[THookName] extends HookCallback ? RuntimeNuxtHooks[THookName] : never
+): void
+```
+
+## Usage
+
+### Parameters
+
+- `name`: The name of the runtime hook to register. You can see the full list of [runtime Nuxt hooks here](/docs/api/advanced/hooks#app-hooks-runtime).
+- `fn`: The callback function to execute when the hook is triggered. The function signature varies based on the hook name.
+
+### Returns
+
+The composable doesn't return a value, but it automatically unregisters the hook when the component's scope is destroyed.
+
+## Example
+
+```vue twoslash [pages/index.vue]
+
+```
diff --git a/docs/3.api/6.advanced/1.hooks.md b/docs/3.api/6.advanced/1.hooks.md
index 894f104728..3c5381308a 100644
--- a/docs/3.api/6.advanced/1.hooks.md
+++ b/docs/3.api/6.advanced/1.hooks.md
@@ -52,7 +52,8 @@ Hook | Arguments | Description
`build:manifest` | `manifest` | Called during the manifest build by Vite and webpack. This allows customizing the manifest that Nitro will use to render `