@nuxt/docs-nightly 4.5.0-29655888.a3f0c205 → 4.5.0-29657113.e77d3dbf
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.
|
@@ -230,6 +230,41 @@ definePageMeta({
|
|
|
230
230
|
|
|
231
231
|
:link-example{to="/docs/4.x/examples/routing/pages"}
|
|
232
232
|
|
|
233
|
+
## Named Views
|
|
234
|
+
|
|
235
|
+
A single route can render into multiple `<NuxtPage>` outlets in a parent component by giving each outlet a `name` and providing a sibling page file for each name.
|
|
236
|
+
|
|
237
|
+
Use the `name@view.vue` filename convention to declare a named view alongside the default route file:
|
|
238
|
+
|
|
239
|
+
```bash [Directory Structure]
|
|
240
|
+
-| pages/
|
|
241
|
+
---| parent/
|
|
242
|
+
-----| child.vue
|
|
243
|
+
-----| child@sidebar.vue
|
|
244
|
+
---| parent.vue
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
Then render each outlet by name from the parent:
|
|
248
|
+
|
|
249
|
+
```vue [pages/parent.vue]
|
|
250
|
+
<template>
|
|
251
|
+
<div>
|
|
252
|
+
<NuxtPage />
|
|
253
|
+
<aside>
|
|
254
|
+
<NuxtPage name="sidebar" />
|
|
255
|
+
</aside>
|
|
256
|
+
</div>
|
|
257
|
+
</template>
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
When the user navigates to `/parent/child`, `child.vue` renders into the default `<NuxtPage />` and `child@sidebar.vue` renders into `<NuxtPage name="sidebar" />`. Outlets without a matching named view are left empty.
|
|
261
|
+
|
|
262
|
+
::note
|
|
263
|
+
`definePageMeta` is read from the default route file only. Meta declared inside a `name@view.vue` sibling has no effect on the route.
|
|
264
|
+
::
|
|
265
|
+
|
|
266
|
+
:read-more{title="Named Views" to="https://router.vuejs.org/guide/essentials/named-views.html" target="_blank"}
|
|
267
|
+
|
|
233
268
|
## Route Groups
|
|
234
269
|
|
|
235
270
|
In some cases, you may want to group a set of routes together in a way which doesn't affect file-based routing. For this purpose, you can put files in a folder which is wrapped in parentheses - `(` and `)`.
|
|
@@ -426,10 +426,17 @@ performance in large projects or on Windows platforms.
|
|
|
426
426
|
|
|
427
427
|
You can also set this to `chokidar` to watch all files in your source directory.
|
|
428
428
|
|
|
429
|
+
Set to `'builder'` to reuse the active builder's own file watcher (for example,
|
|
430
|
+
Vite's `server.watcher`) instead of starting a second one. This reduces the
|
|
431
|
+
number of file watchers active in dev mode and becomes the default when
|
|
432
|
+
`future.compatibilityVersion` is `5`. If the active builder does not implement
|
|
433
|
+
its own watcher (currently webpack and rspack), Nuxt logs a warning and falls
|
|
434
|
+
back to its default selection.
|
|
435
|
+
|
|
429
436
|
```ts twoslash [nuxt.config.ts]
|
|
430
437
|
export default defineNuxtConfig({
|
|
431
438
|
experimental: {
|
|
432
|
-
watcher: 'chokidar-granular', // 'chokidar' or '
|
|
439
|
+
watcher: 'chokidar-granular', // 'chokidar', 'parcel' or 'builder' are also options
|
|
433
440
|
},
|
|
434
441
|
})
|
|
435
442
|
```
|
|
@@ -891,6 +898,26 @@ export default defineNuxtConfig({
|
|
|
891
898
|
See PR #31379 for implementation details.
|
|
892
899
|
::
|
|
893
900
|
|
|
901
|
+
## prefetchPreloadTags
|
|
902
|
+
|
|
903
|
+
When a `<NuxtLink>` is prefetched and the destination route has [payload extraction](#payloadextraction) enabled (the default for prerendered and cached routes), forward any `<link rel="preload">` hints that the destination set via [`useHead`](/docs/4.x/api/composables/use-head) (or via modules like [`@nuxt/image`](https://image.nuxt.com)'s `<NuxtImg preload>`) into the current document.
|
|
904
|
+
|
|
905
|
+
The forwarded links are downgraded from `rel="preload"` to `rel="prefetch"` so they don't compete with the current page's critical resources. Only user-defined head tags are forwarded; build-time JS/CSS chunk preloads are already handled separately by the prefetch pipeline.
|
|
906
|
+
|
|
907
|
+
This flag is off by default because, combined with `prefetchOn: 'visibility'` (the `<NuxtLink>` default), it could trigger a lot of cross-route prefetches at once. Enable it once you are confident the destination preloads are worth forwarding for the links your users typically encounter.
|
|
908
|
+
|
|
909
|
+
```ts twoslash [nuxt.config.ts]
|
|
910
|
+
export default defineNuxtConfig({
|
|
911
|
+
experimental: {
|
|
912
|
+
prefetchPreloadTags: true,
|
|
913
|
+
},
|
|
914
|
+
})
|
|
915
|
+
```
|
|
916
|
+
|
|
917
|
+
::read-more{icon="i-simple-icons-github" color="gray" to="https://github.com/nuxt/nuxt/issues/34953" target="_blank"}
|
|
918
|
+
See issue #34953 for motivation.
|
|
919
|
+
::
|
|
920
|
+
|
|
894
921
|
## granularCachedData
|
|
895
922
|
|
|
896
923
|
Whether to call and use the result from `getCachedData` when refreshing data for `useAsyncData` and `useFetch` (whether by `watch`, `refreshNuxtData()`, or a manual `refresh()` call.
|
|
@@ -44,7 +44,7 @@ In a typical Vue application, a new page component is mounted **only after** the
|
|
|
44
44
|
|
|
45
45
|
## Props
|
|
46
46
|
|
|
47
|
-
- `name`: tells `<RouterView>` to render the component with the corresponding name in the matched route record's components option.
|
|
47
|
+
- `name`: tells `<RouterView>` to render the component with the corresponding name in the matched route record's components option. See [Named Views](/docs/4.x/directory-structure/app/pages#named-views) for the `name@view.vue` filename convention.
|
|
48
48
|
- type: `string`
|
|
49
49
|
- `route`: route location that has all of its components resolved.
|
|
50
50
|
- type: `RouteLocationNormalized`
|
|
@@ -25,6 +25,7 @@ Property | Type | Description
|
|
|
25
25
|
`import.meta.server` | boolean | True when evaluated on the server side.
|
|
26
26
|
`import.meta.nitro` | boolean | True when evaluated on the server side.
|
|
27
27
|
`import.meta.dev` | boolean | True when running the Nuxt dev server.
|
|
28
|
+
`import.meta.envName` | string | The current Nuxt environment name, including custom values passed via `--envName`.
|
|
28
29
|
`import.meta.test` | boolean | True when running in a test context.
|
|
29
30
|
`import.meta.prerender` | boolean | True when rendering HTML on the server in the prerender stage of your build.
|
|
30
31
|
|