@nuxt/docs-nightly 4.4.0-29546548.717c5fbf → 4.4.0-29546812.157e42be

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

@@ -300,6 +300,10 @@ it('can also mount an app', async () => {
 })
 ```
 
+The options object accepts `@vue/test-utils` mount options and the following properties:
+
+  - `route`: the initial route, or `false` to skip the initial route change (default `/`).
+
 #### `renderSuspended`
 
 `renderSuspended` allows you to render any Vue component within the Nuxt environment using `@testing-library/vue`, allowing async setup and access to injections from your Nuxt plugins.
@@ -352,6 +356,10 @@ it('can also render an app', async () => {
 })
 ```
 
+The options object accepts `@testing-library/vue` render options and the following properties:
+
+  - `route`: the initial route, or `false` to skip the initial route change (default `/`).
+
 #### `mockNuxtImport`
 
 `mockNuxtImport` allows you to mock Nuxt's auto import functionality. For example, to mock `useStorage`, you can do so like this:
@@ -368,6 +376,27 @@ mockNuxtImport('useStorage', () => {
 // your tests here
 ```
 
+You can explicitly type the mock for type safety, and use the original implementation passed to the factory function when mocking complex functionality.
+
+```ts twoslash
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+
+mockNuxtImport<typeof useStorage>('useStorage', (original) => {
+  return (...args) => {
+    return { ...original(...args), value: 'mocked storage' }
+  }
+})
+
+// or specify the target to mock
+mockNuxtImport(useStorage, (original) => {
+  return (...args) => {
+    return { ...original(...args), value: 'mocked storage' }
+  }
+})
+
+// your tests here
+```
+
 ::note
 `mockNuxtImport` can only be used once per mocked import per test file. It is actually a macro that gets transformed to `vi.mock` and `vi.mock` is hoisted, as described [in the Vitest docs](https://vitest.dev/api/vi#vi-mock).
 ::
@@ -396,6 +425,25 @@ useStorageMock.mockImplementation(() => {
 })
 ```
 
+If you need to mock behavior only inside a test, you can also use the following approach.
+
+```ts twoslash
+import { beforeEach, vi } from 'vitest'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+
+mockNuxtImport(useRoute, original => vi.fn(original))
+
+beforeEach(() => {
+  vi.resetAllMocks()
+})
+
+// Then, inside a test
+const useRouteOriginal = vi.mocked(useRoute).getMockImplementation()!
+vi.mocked(useRoute).mockImplementation(
+  (...args) => ({ ...useRouteOriginal(...args), path: '/mocked' }),
+)
+```
+
 #### `mockComponent`
 
 `mockComponent` allows you to mock Nuxt's component.
@@ -477,6 +525,12 @@ registerEndpoint('/test/', {
 })
 ```
 
+This object accepts the following properties:
+
+- `handler`: the event handler function
+- `method`: (optional) HTTP method to match (e.g., 'GET', 'POST')
+- `once`: (optional) if true, the handler will only be used for the first matching request and then automatically removed
+
 > **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/4.x/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
 
 #### Conflict with End-To-End Testing

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

@@ -61,6 +61,7 @@ When you set your `future.compatibilityVersion` to `5`, defaults throughout your
 - **Vite Environment API**: Automatically enables the new [Vite Environment API](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for improved build configuration
 - **Normalized Page Names**: Page component names will [match their route names](/docs/4.x/getting-started/upgrade#normalized-page-component-names) for consistent `<KeepAlive>` behavior
 - **`clearNuxtState` resets to defaults**: `clearNuxtState` will [reset state to its initial value](/docs/4.x/getting-started/upgrade#respect-defaults-when-clearing-usestate) instead of setting it to `undefined`
+- **Non-async `callHook`**: [`callHook` may return `void`](/docs/4.x/getting-started/upgrade#non-async-callhook) instead of always returning a `Promise`
 - Other Nuxt 5 improvements and changes as they become available
 
 ::note
@@ -180,6 +181,52 @@ addVitePlugin(() => ({
 Learn more about Vite's Environment API
 ::
 
+### Non-Async `callHook`
+
+🚦 **Impact Level**: Minimal
+
+#### What Changed
+
+With the upgrade to [hookable v6](https://github.com/unjs/hookable), `callHook` may now return `void` instead of always returning `Promise<void>`. This is a significant performance improvement that avoids unnecessary `Promise` allocations when there are no registered hooks or all hooks are synchronous.
+
+By default (with `compatibilityVersion: 4`), Nuxt wraps `callHook` with `Promise.resolve()` so that existing `.then()` and `.catch()` chaining continues to work. With `compatibilityVersion: 5`, this wrapper is removed.
+
+::tip
+This affects both build-time Nuxt hooks (used by Nuxt modules) and runtime Nuxt hooks (which you might use in your application code).
+::
+
+#### Reasons for Change
+
+Hookable v6's `callHook` is 20-40x faster because it avoids creating a `Promise` when one is not needed. This benefits applications with many hook call sites.
+
+#### Migration Steps
+
+If you or your modules use `callHook` with `.then()` or `.catch()` chaining, switch to `await`:
+
+```diff
+- nuxtApp.callHook('my:hook', data).then(() => { ... })
++ await nuxtApp.callHook('my:hook', data)
+```
+
+```diff
+- nuxtApp.hooks.callHook('my:hook', data).catch(err => { ... })
++ try { await nuxtApp.hooks.callHook('my:hook', data) } catch (err) { ... }
+```
+
+::tip
+You can test this feature early by setting `future.compatibilityVersion: 5` (see [Testing Nuxt 5](/docs/4.x/getting-started/upgrade#testing-nuxt-5)) or by enabling it explicitly with `experimental.asyncCallHook: false`.
+::
+
+Alternatively, you can ensure `callHook` always returns a `Promise` with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    asyncCallHook: true,
+  },
+})
+```
+
 ## Migrating to Nuxt 4
 
 Nuxt 4 includes significant improvements and changes. This guide will help you migrate your existing Nuxt 3 application to Nuxt 4.

package/4.api/2.composables/use-fetch.md

@@ -161,6 +161,7 @@ type AsyncDataRequestContext = {
 
 type AsyncData<DataT, ErrorT> = {
   data: Ref<DataT | undefined>
+  pending: Ref<boolean>
   refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
   execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
   clear: () => void
@@ -229,6 +230,7 @@ This only caches data when `experimental.payloadExtraction` in `nuxt.config` is
 | `execute` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Alias for `refresh`.                                                                                                                                              |
 | `error`   | `Ref<ErrorT \| undefined>`                          | Error object if the data fetching failed.                                                                                                                         |
 | `status`  | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>`  | Status of the data request. See below for possible values.                                                                                                        |
+| `pending` | `Ref<boolean>`                                      | Boolean flag indicating whether the current request is in progress.                                                                                                |
 | `clear`   | `() => void`                                        | Resets `data` to `undefined` (or the value of `options.default()` if provided), `error` to `undefined`, set `status` to `idle`, and cancels any pending requests. |
 
 ### Status values

package/4.api/2.composables/use-lazy-fetch.md

@@ -76,6 +76,7 @@ Returns the same `AsyncData` object as [`useFetch`](/docs/4.x/api/composables/us
 | `execute` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Alias for `refresh`.                                                                                             |
 | `error`   | `Ref<ErrorT \| undefined>`                          | Error object if the data fetching failed.                                                                        |
 | `status`  | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>`  | Status of the data request.                                                                                      |
+| `pending` | `Ref<boolean>`                                      | Boolean flag indicating whether the current request is in progress.                                              |
 | `clear`   | `() => void`                                        | Resets `data` to `undefined`, `error` to `undefined`, sets `status` to `idle`, and cancels any pending requests. |
 
 :read-more{to="/docs/4.x/api/composables/use-fetch#return-values"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.4.0-29546548.717c5fbf",
+  "version": "4.4.0-29546812.157e42be",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",