@nuxt/docs 4.3.1 → 4.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/1.getting-started/02.installation.md +2 -1
  2. package/1.getting-started/09.transitions.md +100 -0
  3. package/1.getting-started/16.deployment.md +2 -3
  4. package/1.getting-started/17.testing.md +63 -8
  5. package/1.getting-started/18.upgrade.md +138 -2
  6. package/2.directory-structure/1.app/1.layouts.md +60 -1
  7. package/3.guide/2.best-practices/hydration.md +13 -13
  8. package/3.guide/2.best-practices/performance.md +2 -3
  9. package/3.guide/3.ai/1.mcp.md +1 -1
  10. package/3.guide/3.ai/2.llms-txt.md +1 -1
  11. package/3.guide/5.recipes/3.custom-usefetch.md +36 -67
  12. package/3.guide/5.recipes/4.sessions-and-authentication.md +1 -1
  13. package/3.guide/6.going-further/1.experimental-features.md +81 -5
  14. package/4.api/1.components/12.nuxt-route-announcer.md +4 -0
  15. package/4.api/1.components/14.nuxt-announcer.md +81 -0
  16. package/4.api/1.components/3.nuxt-layout.md +29 -0
  17. package/4.api/1.components/8.nuxt-island.md +1 -1
  18. package/4.api/2.composables/create-use-async-data.md +90 -0
  19. package/4.api/2.composables/create-use-fetch.md +97 -0
  20. package/4.api/2.composables/use-announcer.md +128 -0
  21. package/4.api/2.composables/use-async-data.md +2 -2
  22. package/4.api/2.composables/use-cookie.md +24 -0
  23. package/4.api/2.composables/use-fetch.md +5 -5
  24. package/4.api/2.composables/use-lazy-fetch.md +1 -0
  25. package/4.api/2.composables/use-route-announcer.md +4 -0
  26. package/4.api/3.utils/clear-nuxt-state.md +4 -2
  27. package/4.api/3.utils/define-page-meta.md +61 -4
  28. package/4.api/4.commands/build.md +3 -2
  29. package/4.api/4.commands/dev.md +2 -1
  30. package/4.api/4.commands/generate.md +2 -1
  31. package/4.api/6.advanced/1.hooks.md +1 -1
  32. package/5.community/2.getting-help.md +1 -1
  33. package/package.json +1 -1
@@ -0,0 +1,128 @@
1
+ ---
2
+ title: 'useAnnouncer'
3
+ description: A composable for announcing messages to screen readers.
4
+ links:
5
+ - label: Source
6
+ icon: i-simple-icons-github
7
+ to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/announcer.ts
8
+ size: xs
9
+ ---
10
+
11
+ ::important
12
+ This composable is available in Nuxt v3.17+.
13
+ ::
14
+
15
+ ## Description
16
+
17
+ A composable for announcing dynamic content changes to screen readers. Unlike [`useRouteAnnouncer`](/docs/api/composables/use-route-announcer) which automatically announces route changes, `useAnnouncer` gives you manual control over what and when to announce.
18
+
19
+ Use this for in-page updates like form validation, async operations, toast notifications, and live content changes.
20
+
21
+ ## Parameters
22
+
23
+ - `politeness`: Sets the default urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`)
24
+
25
+ ## Properties
26
+
27
+ ### `message`
28
+
29
+ - **type**: `Ref<string>`
30
+ - **description**: The current message to announce
31
+
32
+ ### `politeness`
33
+
34
+ - **type**: `Ref<'polite' | 'assertive' | 'off'>`
35
+ - **description**: Screen reader announcement urgency level
36
+
37
+ ## Methods
38
+
39
+ ### `set(message, politeness = "polite")`
40
+
41
+ Sets the message to announce with its urgency level.
42
+
43
+ ### `polite(message)`
44
+
45
+ Sets the message with `politeness = "polite"`. Use for non-urgent updates that can wait for the screen reader to finish its current task.
46
+
47
+ ### `assertive(message)`
48
+
49
+ Sets the message with `politeness = "assertive"`. Use for urgent updates that should interrupt the screen reader immediately.
50
+
51
+ ## Example
52
+
53
+ ```vue [app/pages/contact.vue]
54
+ <script setup lang="ts">
55
+ const { polite, assertive } = useAnnouncer()
56
+
57
+ async function submitForm () {
58
+ try {
59
+ await $fetch('/api/contact', { method: 'POST', body: formData })
60
+ polite('Message sent successfully')
61
+ } catch (error) {
62
+ assertive('Error: Failed to send message')
63
+ }
64
+ }
65
+ </script>
66
+ ```
67
+
68
+ ## Use Cases
69
+
70
+ ### Form Validation
71
+
72
+ ```vue [app/components/LoginForm.vue]
73
+ <script setup lang="ts">
74
+ const { assertive } = useAnnouncer()
75
+
76
+ function validateForm () {
77
+ const errors = []
78
+ if (!email.value) { errors.push('Email is required') }
79
+ if (!password.value) { errors.push('Password is required') }
80
+
81
+ if (errors.length) {
82
+ assertive(`Form has ${errors.length} errors: ${errors.join(', ')}`)
83
+ return false
84
+ }
85
+ return true
86
+ }
87
+ </script>
88
+ ```
89
+
90
+ ### Loading States
91
+
92
+ ```vue [app/pages/dashboard.vue]
93
+ <script setup lang="ts">
94
+ const { polite } = useAnnouncer()
95
+
96
+ const { data, status } = await useFetch('/api/data')
97
+
98
+ watch(status, (newStatus) => {
99
+ if (newStatus === 'pending') {
100
+ polite('Loading data...')
101
+ } else if (newStatus === 'success') {
102
+ polite('Data loaded successfully')
103
+ }
104
+ })
105
+ </script>
106
+ ```
107
+
108
+ ### Search Results
109
+
110
+ ```vue [app/components/Search.vue]
111
+ <script setup lang="ts">
112
+ const { polite } = useAnnouncer()
113
+
114
+ const results = ref([])
115
+
116
+ watch(results, (newResults) => {
117
+ polite(`Found ${newResults.length} results`)
118
+ })
119
+ </script>
120
+ ```
121
+
122
+ ::callout
123
+ You need to add the [`<NuxtAnnouncer>`](/docs/4.x/api/components/nuxt-announcer) component to your app for the announcements to be rendered in the DOM.
124
+ ::
125
+
126
+ ::callout
127
+ For automatic announcements of route/page changes, use [`useRouteAnnouncer`](/docs/4.x/api/composables/use-route-announcer) with the [`<NuxtRouteAnnouncer>`](/docs/4.x/api/components/nuxt-route-announcer) component instead.
128
+ ::
@@ -25,8 +25,8 @@ const { data, status, pending, error, refresh, clear } = await useAsyncData(
25
25
  </script>
26
26
  ```
27
27
 
28
- ::warning{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata"}
29
- If you're using a custom `useAsyncData` wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.
28
+ ::tip{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch"}
29
+ Need a custom `useAsyncData` with pre-defined defaults? Use `createUseAsyncData` to create a fully typed custom composable. See the [custom useFetch recipe](/docs/4.x/guide/recipes/custom-usefetch) for details.
30
30
  ::
31
31
 
32
32
  ::note
@@ -36,6 +36,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
36
36
  default?: () => T | Ref<T>
37
37
  watch?: boolean | 'shallow'
38
38
  readonly?: boolean
39
+ refresh?: boolean
39
40
  }
40
41
 
41
42
  export interface CookieRef<T> extends Ref<T> {}
@@ -60,6 +61,7 @@ Most of the options will be directly passed to the [cookie](https://github.com/j
60
61
  | `encode` | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent` | Custom function to encode the cookie 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. |
61
62
  | `default` | `() => T \| Ref<T>` | `undefined` | Function returning the default value if the cookie does not exist. The function can also return a `Ref`. |
62
63
  | `watch` | `boolean \| 'shallow'` | `true` | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/4.x/api/utils/refresh-cookie). |
64
+ | `refresh` | `boolean` | `false` | If `true`, the cookie expiration will be refreshed on every explicit write (e.g. `cookie.value = cookie.value`), even if the value itself hasn’t changed. Note: the expiration is not refreshed automatically — you must assign to `.value` to trigger it. |
63
65
  | `readonly` | `boolean` | `false` | If `true`, disables writing to the cookie. |
64
66
  | `maxAge` | `number` | `undefined` | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set. |
65
67
  | `expires` | `Date` | `undefined` | Expiration date for the cookie. 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. <br/> **Note:** The [cookie storage model specification](https://datatracker.ietf.org/doc/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! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
@@ -163,6 +165,28 @@ function save () {
163
165
  </template>
164
166
  ```
165
167
 
168
+ ### Refreshing Cookies
169
+
170
+ ```vue
171
+ <script setup lang="ts">
172
+ const session = useCookie(
173
+ 'session', {
174
+ maxAge: 60 * 60, // 1 hour
175
+ refresh: true,
176
+ default: () => 'active',
177
+ })
178
+
179
+ // Even if the value does not change,
180
+ // the cookie expiration will be refreshed
181
+ // every time the setter is called
182
+ session.value = 'active'
183
+ </script>
184
+
185
+ <template>
186
+ <div>Session: {{ session }}</div>
187
+ </template>
188
+ ```
189
+
166
190
  ### Cookies in API Routes
167
191
 
168
192
  You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.
@@ -25,8 +25,8 @@ const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
25
25
  </script>
26
26
  ```
27
27
 
28
- ::warning{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata"}
29
- If you're using a custom `useFetch` wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.
28
+ ::tip{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch"}
29
+ Need a custom `useFetch` with pre-defined defaults (like `baseURL` or auth headers)? Use `createUseFetch` to create a fully typed custom composable.
30
30
  ::
31
31
 
32
32
  ::note
@@ -87,7 +87,7 @@ Keyed state created using `useFetch` can be retrieved across your Nuxt applicati
87
87
  ::
88
88
 
89
89
  ::warning
90
- `useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
90
+ `useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`. To create a custom variant with pre-defined options, use [`createUseFetch`](/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch) instead.
91
91
  ::
92
92
 
93
93
  ::warning
@@ -151,7 +151,6 @@ type UseFetchOptions<DataT> = {
151
151
  pick?: string[]
152
152
  $fetch?: typeof globalThis.$fetch
153
153
  watch?: MultiWatchSources | false
154
- timeout?: MaybeRefOrGetter<number>
155
154
  }
156
155
 
157
156
  type AsyncDataRequestContext = {
@@ -161,6 +160,7 @@ type AsyncDataRequestContext = {
161
160
 
162
161
  type AsyncData<DataT, ErrorT> = {
163
162
  data: Ref<DataT | undefined>
163
+ pending: Ref<boolean>
164
164
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
165
165
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
166
166
  clear: () => void
@@ -192,7 +192,6 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
192
192
  | `body` | `MaybeRefOrGetter<RequestInit['body'] \| Record<string, any>>` | - | Request body. Objects are automatically stringified. |
193
193
  | `headers` | `MaybeRefOrGetter<Record<string, string> \| [key, value][] \| Headers>` | - | Request headers. |
194
194
  | `baseURL` | `MaybeRefOrGetter<string>` | - | Base URL for the request. |
195
- | `timeout` | `MaybeRefOrGetter<number>` | - | Timeout in milliseconds to abort the request. |
196
195
  | `cache` | `boolean \| string` | - | Cache control. Boolean disables cache, or use Fetch API values: `default`, `no-store`, etc. |
197
196
  | `server` | `boolean` | `true` | Whether to fetch on the server. |
198
197
  | `lazy` | `boolean` | `false` | If true, resolves after route loads (does not block navigation). |
@@ -229,6 +228,7 @@ This only caches data when `experimental.payloadExtraction` in `nuxt.config` is
229
228
  | `execute` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Alias for `refresh`. |
230
229
  | `error` | `Ref<ErrorT \| undefined>` | Error object if the data fetching failed. |
231
230
  | `status` | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>` | Status of the data request. See below for possible values. |
231
+ | `pending` | `Ref<boolean>` | Boolean flag indicating whether the current request is in progress. |
232
232
  | `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. |
233
233
 
234
234
  ### Status values
@@ -76,6 +76,7 @@ Returns the same `AsyncData` object as [`useFetch`](/docs/4.x/api/composables/us
76
76
  | `execute` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Alias for `refresh`. |
77
77
  | `error` | `Ref<ErrorT \| undefined>` | Error object if the data fetching failed. |
78
78
  | `status` | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>` | Status of the data request. |
79
+ | `pending` | `Ref<boolean>` | Boolean flag indicating whether the current request is in progress. |
79
80
  | `clear` | `() => void` | Resets `data` to `undefined`, `error` to `undefined`, sets `status` to `idle`, and cancels any pending requests. |
80
81
 
81
82
  :read-more{to="/docs/4.x/api/composables/use-fetch#return-values"}
@@ -56,3 +56,7 @@ const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
56
56
  })
57
57
  </script>
58
58
  ```
59
+
60
+ ::callout
61
+ For announcing dynamic in-page content changes (form validation, toasts, loading states), use [`useAnnouncer`](/docs/4.x/api/composables/use-announcer) instead.
62
+ ::
@@ -9,15 +9,17 @@ links:
9
9
  ---
10
10
 
11
11
  ::note
12
- This method is useful if you want to invalidate the state of `useState`.
12
+ This method is useful if you want to invalidate the state of `useState`. You can also reset the state to its initial value by passing `{ reset: true }` as the second parameter.
13
13
  ::
14
14
 
15
15
  ## Type
16
16
 
17
17
  ```ts [Signature]
18
- export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
18
+ export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean), opts?: ClearNuxtStateOptions): void
19
19
  ```
20
20
 
21
21
  ## Parameters
22
22
 
23
23
  - `keys`: One or an array of keys that are used in [`useState`](/docs/4.x/api/composables/use-state) to delete their cached state. If no keys are provided, **all state** will be invalidated.
24
+ - `opts`: An options object to configure the clear behavior.
25
+ - `reset`: When set to `true`, resets the state to the initial value provided by the `init` function of [`useState`](/docs/4.x/api/composables/use-state) instead of setting it to `undefined`. When not specified, defaults to the value of `experimental.defaults.useState.resetOnClear` in your Nuxt config (which is `true` with `compatibilityVersion: 5`).
@@ -35,10 +35,10 @@ interface PageMeta {
35
35
  groups?: string[]
36
36
  pageTransition?: boolean | TransitionProps
37
37
  layoutTransition?: boolean | TransitionProps
38
- viewTransition?: boolean | 'always'
38
+ viewTransition?: ViewTransitionPageOptions['enabled'] | ViewTransitionPageOptions
39
39
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
40
40
  keepalive?: boolean | KeepAliveProps
41
- layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
41
+ layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey> | { name?: LayoutKey | false, props?: Record<string, unknown> /* or the selected layout's props */ }
42
42
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
43
43
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
44
44
  [key: string]: unknown
@@ -97,10 +97,12 @@ interface PageMeta {
97
97
 
98
98
  **`layout`**
99
99
 
100
- - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>`
100
+ - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>` | `{ name?: LayoutKey | false; props?: Record<string, unknown> /* or the selected layout's props */ }`
101
101
 
102
102
  Set a static or dynamic name of the layout for each route. This can be set to `false` in case the default layout needs to be disabled.
103
103
 
104
+ You can also pass an object with `name` and `props` to pass typed props to your layout component. When your layout defines props with `defineProps`, they will be fully typed in `definePageMeta`.
105
+
104
106
  **`layoutTransition`**
105
107
 
106
108
  - **Type**: `boolean` | [`TransitionProps`](https://vuejs.org/api/built-in-components#transition)
@@ -121,12 +123,18 @@ interface PageMeta {
121
123
 
122
124
  **`viewTransition`**
123
125
 
124
- - **Type**: `boolean | 'always'`
126
+ - **Type**: `boolean | 'always' | ViewTransitionPageOptions`
125
127
 
126
128
  **Experimental feature, only available when [enabled in your nuxt.config file](/docs/4.x/getting-started/transitions#view-transitions-api-experimental)**</br>
127
129
  Enable/disable View Transitions for the current page.
128
130
  If set to true, Nuxt will not apply the transition if the users browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition.
129
131
 
132
+ You can also pass a `ViewTransitionPageOptions` object to configure [view transition types](/docs/4.x/getting-started/transitions#view-transition-types):
133
+ - `enabled`: `boolean | 'always'` - enable/disable the transition
134
+ - `types`: `string[] | (to, from) => string[]` - types applied to any transition involving this page
135
+ - `toTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **to** this page
136
+ - `fromTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **from** this page
137
+
130
138
  **`redirect`**
131
139
 
132
140
  - **Type**: [`RouteRecordRedirectOption`](https://router.vuejs.org/guide/essentials/redirect-and-alias)
@@ -239,3 +247,52 @@ definePageMeta({
239
247
  })
240
248
  </script>
241
249
  ```
250
+
251
+ ### Passing Props to a Layout
252
+
253
+ You can pass props to a layout by using the object syntax for `layout`. If your layout defines props with `defineProps`, the props will be fully typed.
254
+
255
+ ::code-group
256
+
257
+ ```vue [app/pages/dashboard.vue]
258
+ <script setup lang="ts">
259
+ definePageMeta({
260
+ layout: {
261
+ name: 'panel',
262
+ props: {
263
+ sidebar: true,
264
+ title: 'Dashboard',
265
+ },
266
+ },
267
+ })
268
+ </script>
269
+ ```
270
+
271
+ ```vue [app/layouts/panel.vue]
272
+ <script setup lang="ts">
273
+ const props = defineProps<{
274
+ sidebar?: boolean
275
+ title?: string
276
+ }>()
277
+ </script>
278
+
279
+ <template>
280
+ <div>
281
+ <aside v-if="sidebar">
282
+ Sidebar
283
+ </aside>
284
+ <main>
285
+ <h1>{{ title }}</h1>
286
+ <slot />
287
+ </main>
288
+ </div>
289
+ </template>
290
+ ```
291
+
292
+ ::
293
+
294
+ ::tip
295
+ Layout props set via `definePageMeta` are fully typed based on the layout's `defineProps`. You'll get autocomplete and type-checking in your editor.
296
+ ::
297
+
298
+ :read-more{to="/docs/4.x/directory-structure/app/layouts#passing-props-to-layouts"}
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  <!--build-cmd-->
12
12
  ```bash [Terminal]
13
- npx nuxt build [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--prerender] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>]
13
+ npx nuxt build [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--prerender] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--profile[=verbose]]
14
14
  ```
15
15
  <!--/build-cmd-->
16
16
 
@@ -32,10 +32,11 @@ The `build` command creates a `.output` directory with all your application, ser
32
32
  | `--cwd=<directory>` | | Specify the working directory, this takes precedence over ROOTDIR (default: `.`) |
33
33
  | `--logLevel=<silent\|info\|verbose>` | | Specify build-time log level |
34
34
  | `--prerender` | | Build Nuxt and prerender static routes |
35
- | `--preset` | | Nitro server preset |
35
+ | `--preset=<preset>` | | Specify Nitro server preset. Available presets depend on Nitro (e.g. `node-server`, `vercel`, `netlify`, `static`) |
36
36
  | `--dotenv` | | Path to `.env` file to load, relative to the root directory |
37
37
  | `--envName` | | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server) |
38
38
  | `-e, --extends=<layer-name>` | | Extend from a Nuxt layer |
39
+ | `--profile` | | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report. |
39
40
  <!--/build-opts-->
40
41
 
41
42
  ::note
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  <!--dev-cmd-->
12
12
  ```bash [Terminal]
13
- npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--clear] [--no-f, --no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--sslCert] [--sslKey]
13
+ npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--clear] [--no-f, --no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--profile[=verbose]] [--sslCert] [--sslKey]
14
14
  ```
15
15
  <!--/dev-cmd-->
16
16
 
@@ -45,6 +45,7 @@ The `dev` command starts a development server with hot module replacement at [ht
45
45
  | `--qr` | | Display The QR code of public URL when available |
46
46
  | `--public` | | Listen to all network interfaces |
47
47
  | `--tunnel` | | Open a tunnel using https://github.com/unjs/untun |
48
+ | `--profile` | | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report. |
48
49
  | `--sslCert` | | (DEPRECATED) Use `--https.cert` instead. |
49
50
  | `--sslKey` | | (DEPRECATED) Use `--https.key` instead. |
50
51
  <!--/dev-opts-->
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  <!--generate-cmd-->
12
12
  ```bash [Terminal]
13
- npx nuxt generate [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>]
13
+ npx nuxt generate [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--profile[=verbose]]
14
14
  ```
15
15
  <!--/generate-cmd-->
16
16
 
@@ -35,6 +35,7 @@ The `generate` command pre-renders every route of your application and stores th
35
35
  | `--dotenv` | | Path to `.env` file to load, relative to the root directory |
36
36
  | `--envName` | | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server) |
37
37
  | `-e, --extends=<layer-name>` | | Extend from a Nuxt layer |
38
+ | `--profile` | | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report. |
38
39
  <!--/generate-opts-->
39
40
 
40
41
  ::read-more{to="/docs/4.x/getting-started/deployment#static-hosting"}
@@ -30,7 +30,7 @@ Check the [app source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt
30
30
  | `page:loading:end` | - | Client | Called after `page:finish` |
31
31
  | `page:transition:finish` | `pageComponent?` | Client | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition#javascript-hooks) event. |
32
32
  | `dev:ssr-logs` | `logs` | Client | Called with an array of server-side logs that have been passed to the client (if `features.devLogs` is enabled). |
33
- | `page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/4.x/getting-started/transitions#view-transitions-api-experimental). |
33
+ | `page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/4.x/getting-started/transitions#view-transitions-api-experimental). The `transition` argument is a [`ViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) object with a `types` property ([`ViewTransitionTypeSet`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransitionTypeSet)) that can be read or modified. |
34
34
 
35
35
  ## Nuxt Hooks (build time)
36
36
 
@@ -41,7 +41,7 @@ We recommend taking a look at [how to report bugs](/docs/4.x/community/reporting
41
41
 
42
42
  ## "I need professional help"
43
43
 
44
- If the community couldn't provide the help you need in the time-frame you have, NuxtLabs offers professional support with the [Nuxt Experts](https://nuxt.com/enterprise/support).
44
+ If the community couldn't provide the help you need in the time-frame you have, NuxtLabs offers professional support with the [Nuxt Experts](https://nuxt.com/enterprise/agencies).
45
45
 
46
46
  The objective of the Nuxt Expert is to provide support to the Vue ecosystem, while also creating freelance opportunities for those contributing to open-source solutions, thus helping to maintain the sustainability of the ecosystem.
47
47
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs",
3
- "version": "4.3.1",
3
+ "version": "4.4.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",