-
-
-
-
-
-```
-
-Use a slot as fallback until `
-
-
-
-
-
-```
-
-
-
-
-## `Loading comments...
- -
-
-
-
-
-
-```
-
-## `
-
-
-
-
-```
## Library Authors
diff --git a/docs/2.guide/2.directory-structure/1.middleware.md b/docs/2.guide/2.directory-structure/1.middleware.md
index 22c63eb24a..e4e97484d3 100644
--- a/docs/2.guide/2.directory-structure/1.middleware.md
+++ b/docs/2.guide/2.directory-structure/1.middleware.md
@@ -125,12 +125,12 @@ However, if you want to avoid this behaviour you can do so:
```ts twoslash [middleware/example.ts]
export default defineNuxtRouteMiddleware(to => {
// skip middleware on server
- if (process.server) return
+ if (import.meta.server) return
// skip middleware on client side entirely
- if (process.client) return
+ if (import.meta.client) return
// or only skip middleware on initial client load
const nuxtApp = useNuxtApp()
- if (process.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
+ if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
})
```
diff --git a/docs/2.guide/2.directory-structure/1.modules.md b/docs/2.guide/2.directory-structure/1.modules.md
index b98df654e6..2664e5601e 100644
--- a/docs/2.guide/2.directory-structure/1.modules.md
+++ b/docs/2.guide/2.directory-structure/1.modules.md
@@ -56,3 +56,7 @@ modules/
```
:read-more{to="/docs/guide/going-further/modules"}
+
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch" target="_blank"}
+Watch Vue School video about Nuxt private modules.
+::
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
index 2332295f8a..6ebd687bb1 100644
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/docs/2.guide/2.directory-structure/1.pages.md
@@ -57,7 +57,7 @@ If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to
```
-Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages, HTML comments are considered elements as well.
+Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages. HTML comments are considered elements as well.
This means that when the route is server-rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client-side navigation the transition between routes will fail and you'll see that the route will not be rendered.
@@ -357,12 +357,16 @@ function navigate(){
```
+## Client-Only Pages
+
+You can define a page as [client only](/docs/guide/directory-structure/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+
## Server-Only Pages
You can define a page as [server only](/docs/guide/directory-structure/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
-::note
-You will also need to enable `experimental.componentIslands` in order to make this possible.
+::alert{type=warning}
+Server-only pages must have a single root element. (HTML comments are considered elements as well.)
::
## Custom Routing
diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md
index 995e6212d1..4de600585d 100644
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/2.guide/2.directory-structure/1.plugins.md
@@ -78,7 +78,7 @@ export default defineNuxtPlugin({
::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: process.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.
+For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.
::
## Registration Order
diff --git a/docs/2.guide/2.directory-structure/3.app-config.md b/docs/2.guide/2.directory-structure/3.app-config.md
index d8eb2ce4be..93c15381f8 100644
--- a/docs/2.guide/2.directory-structure/3.app-config.md
+++ b/docs/2.guide/2.directory-structure/3.app-config.md
@@ -99,7 +99,7 @@ Nuxt uses a custom merging strategy for the `AppConfig` within [the layers](/doc
This strategy is implemented using a [Function Merger](https://github.com/unjs/defu#function-merger), which allows defining a custom merging strategy for every key in `app.config` that has an array as value.
::note
-The Function Merger should only be used in the base `app.config` of your application.
+The function merger can only be used in the extended layers and not the main `app.config` in project.
::
Here's an example of how you can use:
diff --git a/docs/2.guide/3.going-further/10.runtime-config.md b/docs/2.guide/3.going-further/10.runtime-config.md
index f4ca19cd94..e84823704c 100644
--- a/docs/2.guide/3.going-further/10.runtime-config.md
+++ b/docs/2.guide/3.going-further/10.runtime-config.md
@@ -98,7 +98,7 @@ The behavior is different between the client-side and server-side:
const config = useRuntimeConfig()
console.log('Runtime config:', config)
-if (process.server) {
+if (import.meta.server) {
console.log('API secret:', config.apiSecret)
}
@@ -164,3 +164,7 @@ declare module 'nuxt/schema' {
// It is always important to ensure you import/export something when augmenting a type
export {}
```
+
+::note
+`nuxt/schema` is provided as a convenience for end-users to access the version of the schema used by Nuxt in their project. Module authors should instead augment `@nuxt/schema`.
+::
diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md
index f7eae0f03f..3eb0d0d424 100644
--- a/docs/2.guide/3.going-further/3.modules.md
+++ b/docs/2.guide/3.going-further/3.modules.md
@@ -30,6 +30,10 @@ This will create a `my-module` project with all the boilerplate necessary to dev
Learn how to perform basic tasks with the module starter.
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/navigating-the-official-starter-template" target="_blank"}
+Watch Vue School video about Nuxt module starter template.
+::
+
#### How to Develop
While your module source code lives inside the `src` directory, in most cases, to develop a module, you need a Nuxt application. That's what the `playground` directory is about. It's a Nuxt application you can tinker with that is already configured to run with your module.
@@ -255,6 +259,10 @@ export default defineNuxtModule({
When you need to handle more complex configuration alterations, you should consider using [defu](https://github.com/unjs/defu).
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options" target="_blank"}
+Watch Vue School video about altering Nuxt configuration.
+::
+
#### Exposing Options to Runtime
Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig).
@@ -288,6 +296,10 @@ Be careful not to expose any sensitive module configuration on the public runtim
:read-more{to="/docs/guide/going-further/runtime-config"}
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/passing-and-exposing-module-options" target="_blank"}
+Watch Vue School video about passing and exposing Nuxt module options.
+::
+
#### Injecting Plugins With `addPlugin`
Plugins are a common way for a module to add runtime logic. You can use the `addPlugin` utility to register them from your module.
@@ -511,6 +523,10 @@ export default defineNuxtModule({
:read-more{to="/docs/api/advanced/hooks"}
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks" target="_blank"}
+Watch Vue School video about using Nuxt lifecycle hooks in modules.
+::
+
::note
**Module cleanup**
:br
@@ -733,6 +749,10 @@ The module starter comes with a default set of tools and configurations (e.g. ES
[Nuxt Module ecosystem](/modules) represents more than 15 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types" target="_blank"}
+Watch Vue School video about Nuxt module types.
+::
+
### Module Types
**Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxtjs.org)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!
diff --git a/docs/2.guide/3.going-further/8.custom-routing.md b/docs/2.guide/3.going-further/8.custom-routing.md
index b8f39b048d..b3e408c2a3 100644
--- a/docs/2.guide/3.going-further/8.custom-routing.md
+++ b/docs/2.guide/3.going-further/8.custom-routing.md
@@ -105,7 +105,7 @@ export default defineNuxtConfig({
const resolver = createResolver(import.meta.url)
// add a route
files.push({
- path: resolver.resolve('./runtime/app/router-options')
+ path: resolver.resolve('./runtime/app/router-options'),
optional: true
})
}
@@ -172,6 +172,6 @@ import { createMemoryHistory } from 'vue-router'
export default Loading comments...
diff --git a/docs/3.api/1.components/1.dev-only.md b/docs/3.api/1.components/1.dev-only.md new file mode 100644 index 0000000000..a65b5cbc56 --- /dev/null +++ b/docs/3.api/1.components/1.dev-only.md @@ -0,0 +1,51 @@ +--- +title: '
+
+
+
+
+
+```
+
+## Slots
+
+- `#fallback`: if you ever require to have a replacement during production.
+
+```vue
+
+
+
+
+
+
+
+```
diff --git a/docs/3.api/1.components/1.nuxt-client-fallback.md b/docs/3.api/1.components/1.nuxt-client-fallback.md
index 1f07dd09fa..22d9d6b6f0 100644
--- a/docs/3.api/1.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/1.components/1.nuxt-client-fallback.md
@@ -12,10 +12,25 @@ links:
size: xs
---
+Nuxt provides the `
+
+
+
+
+```
+
## Events
- `@ssr-error`: Event emitted when a child triggers an error in SSR. Note that this will only be triggered on the server.
@@ -30,7 +45,7 @@ This component is experimental and in order to use it you must enable the `exper
## Props
-- `placeholderTag` | `fallbackTag`: Specify a fallback tag to be rendered if the slot fails to render.
+- `placeholderTag` | `fallbackTag`: Specify a fallback tag to be rendered if the slot fails to render on the server.
- **type**: `string`
- **default**: `div`
- `placeholder` | `fallback`: Specify fallback content to be rendered if the slot fails to render.
diff --git a/docs/3.api/1.components/3.nuxt-layout.md b/docs/3.api/1.components/3.nuxt-layout.md
index cc8bf04191..1ff8168ade 100644
--- a/docs/3.api/1.components/3.nuxt-layout.md
+++ b/docs/3.api/1.components/3.nuxt-layout.md
@@ -55,6 +55,10 @@ Please note the layout name is normalized to kebab-case, so if your layout file
Read more about dynamic layouts.
::
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/guide/directory-structure/layouts) directory.
+ - **type**: `string`
+ - **default**: `null`
+
## Additional Props
`NuxtLayout` also accepts any additional props that you may need to pass to the layout. These custom props are then made accessible as attributes.
@@ -83,6 +87,8 @@ console.log(layoutCustomProps.title) // I am a custom layout
`
@@ -93,13 +99,27 @@ console.log(layoutCustomProps.title) // I am a custom layout
```
+```vue [layouts/custom.vue]
+
+
+ default layout
+
-````
+```
+
+```vue [layouts/default.vue]
+
+
+
+ `
- **description**: force refetch the server component by refetching it.
+
+## Events
+
+- `error`
+ - **parameters**:
+ - **error**:
+ - **type**: `unknown`
+ - **description**: emitted when when `NuxtIsland` fails to fetch the new island.
diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md
index 43b2bc4e24..da3cb8f39c 100644
--- a/docs/3.api/2.composables/use-async-data.md
+++ b/docs/3.api/2.composables/use-async-data.md
@@ -119,10 +119,10 @@ type AsyncDataOptions = {
deep?: boolean
dedupe?: 'cancel' | 'defer'
default?: () => DataT | Ref | null
- transform?: (input: DataT) => DataT
+ transform?: (input: DataT) => DataT | Promise
pick?: string[]
watch?: WatchSource[]
- getCachedData?: (key: string) => DataT
+ getCachedData?: (key: string, nuxtApp: NuxtApp) => DataT
}
type AsyncData = {
@@ -130,6 +130,7 @@ type AsyncData = {
pending: Ref
refresh: (opts?: AsyncDataExecuteOptions) => Promise
execute: (opts?: AsyncDataExecuteOptions) => Promise
+ clear: () => void
error: Ref
status: Ref
};
diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
index 96bfa3850e..bd4d30d647 100644
--- a/docs/3.api/2.composables/use-fetch.md
+++ b/docs/3.api/2.composables/use-fetch.md
@@ -144,11 +144,11 @@ type UseFetchOptions = {
server?: boolean
lazy?: boolean
immediate?: boolean
- getCachedData?: (key: string) => DataT
+ getCachedData?: (key: string, nuxtApp: NuxtApp) => DataT
deep?: boolean
dedupe?: 'cancel' | 'defer'
default?: () => DataT
- transform?: (input: DataT) => DataT
+ transform?: (input: DataT) => DataT | Promise
pick?: string[]
watch?: WatchSource[] | false
}
@@ -158,6 +158,7 @@ type AsyncData = {
pending: Ref
refresh: (opts?: AsyncDataExecuteOptions) => Promise
execute: (opts?: AsyncDataExecuteOptions) => Promise
+ clear: () => void
error: Ref
status: Ref
}
diff --git a/docs/3.api/2.composables/use-id.md b/docs/3.api/2.composables/use-id.md
index 9cd649696b..ecadfa8f94 100644
--- a/docs/3.api/2.composables/use-id.md
+++ b/docs/3.api/2.composables/use-id.md
@@ -4,7 +4,7 @@ description: Generate an SSR-friendly unique identifier that can be passed to ac
---
::important
-This composable is available since [Nuxt v3.10](/v3-10#ssr-safe-accessible-unique-id-creation).
+This composable is available since [Nuxt v3.10](/blog/v3-10#ssr-safe-accessible-unique-id-creation).
::
`useId` generates an SSR-friendly unique identifier that can be passed to accessibility attributes.
@@ -19,11 +19,15 @@ const id = useId()
('color', () => 'pink')
export default defineNuxtPlugin((nuxtApp) => {
- if (process.server) {
+ if (import.meta.server) {
const color = useColor()
}
})
@@ -128,9 +128,9 @@ Nuxt exposes the following properties through `ssrContext`:
It is also possible to use more advanced types, such as `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError`.
- Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own serializer/deserializer for types that are not supported by Nuxt.
+ 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.
- In the example below, we define a serializer for the [Luxon](https://moment.github.io/luxon/#/) DateTime class.
+ 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]
/**
@@ -159,7 +159,7 @@ export default defineComponent({
setup (_props, { slots, emit }) {
const nuxtApp = useNuxtApp()
onErrorCaptured((err) => {
- if (process.client && !nuxtApp.isHydrating) {
+ if (import.meta.client && !nuxtApp.isHydrating) {
// ...
}
})
diff --git a/docs/3.api/2.composables/use-preview-mode.md b/docs/3.api/2.composables/use-preview-mode.md
new file mode 100644
index 0000000000..360350f19e
--- /dev/null
+++ b/docs/3.api/2.composables/use-preview-mode.md
@@ -0,0 +1,82 @@
+---
+title: "usePreviewMode"
+description: "Use usePreviewMode to check and control preview mode in Nuxt"
+---
+
+# `usePreviewMode`
+
+You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) to rerender preview content.
+
+```js
+const { enabled, state } = usePreviewMode()
+```
+
+## Options
+
+### Custom `enable` check
+
+You can specify a custom way to enable preview mode. By default the `usePreviewMode` composable will enable preview mode if there is a `preview` param in url that is equal to `true` (for example, `http://localhost:3000?preview=true`). You can wrap the `usePreviewMode` into custom composable, to keep options consistent across usages and prevent any errors.
+
+```js
+export function useMyPreviewMode () {
+ return usePreviewMode({
+ shouldEnable: () => {
+ return !!route.query.customPreview
+ }
+ });
+}
+```
+
+### Modify default state
+
+`usePreviewMode` will try to store the value of a `token` param from url in state. You can modify this state and it will be available for all [`usePreviewMode`](/docs/api/composables/use-preview-mode) calls.
+
+```js
+const data1 = ref('data1')
+
+const { enabled, state } = usePreviewMode({
+ getState: (currentState) => {
+ return { data1, data2: 'data2' }
+ }
+})
+```
+
+::note
+The `getState` function will append returned values to current state, so be careful not to accidentally overwrite important state.
+::
+
+## Example
+
+```vue [pages/some-page.vue]
+
+
+
+ async function errorhandler (error: H3Error,
const isRenderingError = event.path.startsWith('/__nuxt_error') || !!reqHeaders['x-nuxt-error']
// HTML response (via SSR)
- const res = isRenderingError ? null : await useNitroApp().localFetch(
- withQuery(joinURL(useRuntimeConfig().app.baseURL, '/__nuxt_error'), errorObject),
- {
- headers: { ...reqHeaders, 'x-nuxt-error': 'true' },
- redirect: 'manual'
- }
- ).catch(() => null)
+ const res = isRenderingError
+ ? null
+ : await useNitroApp().localFetch(
+ withQuery(joinURL(useRuntimeConfig(event).app.baseURL, '/__nuxt_error'), errorObject),
+ {
+ headers: { ...reqHeaders, 'x-nuxt-error': 'true' },
+ redirect: 'manual'
+ }
+ ).catch(() => null)
// Fallback to static rendered error page
if (!res) {
diff --git a/packages/nuxt/src/core/runtime/nitro/paths.ts b/packages/nuxt/src/core/runtime/nitro/paths.ts
index 0d2a027687..5286a12944 100644
--- a/packages/nuxt/src/core/runtime/nitro/paths.ts
+++ b/packages/nuxt/src/core/runtime/nitro/paths.ts
@@ -1,20 +1,23 @@
-import { joinURL } from 'ufo'
+import { joinRelativeURL } from 'ufo'
import { useRuntimeConfig } from '#internal/nitro'
export function baseURL (): string {
+ // TODO: support passing event to `useRuntimeConfig`
return useRuntimeConfig().app.baseURL
}
export function buildAssetsDir (): string {
+ // TODO: support passing event to `useRuntimeConfig`
return useRuntimeConfig().app.buildAssetsDir as string
}
export function buildAssetsURL (...path: string[]): string {
- return joinURL(publicAssetsURL(), buildAssetsDir(), ...path)
+ return joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path)
}
export function publicAssetsURL (...path: string[]): string {
+ // TODO: support passing event to `useRuntimeConfig`
const app = useRuntimeConfig().app
const publicBase = app.cdnURL as string || app.baseURL
- return path.length ? joinURL(publicBase, ...path) : publicBase
+ return path.length ? joinRelativeURL(publicBase, ...path) : publicBase
}
diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index 5fb732d0ab..1b367f432d 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/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, useRuntimeConfig, useStorage } from '#internal/nitro'
+import { defineRenderHandler, getRouteRules, useAppConfig, useRuntimeConfig, useStorage } from '#internal/nitro'
import { useNitroApp } from '#internal/nitro/app'
// @ts-expect-error virtual file
@@ -29,9 +29,9 @@ import unheadPlugins from '#internal/unhead-plugins.mjs'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtPayload, NuxtSSRContext } from '#app'
// @ts-expect-error virtual file
-import { appHead, appRootId, appRootTag } from '#internal/nuxt.config.mjs'
+import { appHead, appRootId, appRootTag, appTeleportId, appTeleportTag, componentIslands } from '#internal/nuxt.config.mjs'
// @ts-expect-error virtual file
-import { buildAssetsURL, publicAssetsURL } from '#paths'
+import { buildAssetsURL, publicAssetsURL } from '#internal/nuxt/paths'
// @ts-expect-error private property consumed by vite-generated url helpers
globalThis.__buildAssetsURL = buildAssetsURL
@@ -53,6 +53,18 @@ export interface NuxtRenderHTMLContext {
bodyAppend: string[]
}
+export interface NuxtIslandSlotResponse {
+ props: Array
+ fallback?: string
+}
+
+export interface NuxtIslandClientResponse {
+ html: string
+ props: unknown
+ chunk: string
+ slots?: Record
+}
+
export interface NuxtIslandContext {
id?: string
name: string
@@ -62,16 +74,6 @@ export interface NuxtIslandContext {
components: Record>
}
-export interface NuxtIslandSlotResponse {
- props: Array
- fallback?: string
-}
-export interface NuxtIslandClientResponse {
- html: string
- props: unknown
- chunk: string
-}
-
export interface NuxtIslandResponse {
id?: string
html: string
@@ -135,7 +137,7 @@ const getSSRRenderer = lazyCachedFunction(async () => {
if (import.meta.dev && process.env.NUXT_VITE_NODE_OPTIONS) {
renderer.rendererContext.updateManifest(await getClientManifest())
}
- return `<${appRootTag}${appRootId ? ` id="${appRootId}"` : ''}>${html}`
+ return APP_ROOT_OPEN_TAG + html + APP_ROOT_CLOSE_TAG
}
return renderer
@@ -147,10 +149,11 @@ const getSPARenderer = lazyCachedFunction(async () => {
// @ts-expect-error virtual file
const spaTemplate = await import('#spa-template').then(r => r.template).catch(() => '')
+ .then(r => APP_ROOT_OPEN_TAG + r + APP_ROOT_CLOSE_TAG)
const options = {
manifest,
- renderToString: () => `<${appRootTag}${appRootId ? ` id="${appRootId}"` : ''}>${spaTemplate}`,
+ renderToString: () => spaTemplate,
buildAssetsURL
}
// Create SPA renderer and cache the result for all requests
@@ -158,7 +161,7 @@ const getSPARenderer = lazyCachedFunction(async () => {
const result = await renderer.renderToString({})
const renderToString = (ssrContext: NuxtSSRContext) => {
- const config = useRuntimeConfig()
+ const config = useRuntimeConfig(ssrContext.event)
ssrContext.modules = ssrContext.modules || new Set()
ssrContext!.payload = {
_errors: {},
@@ -184,21 +187,25 @@ const payloadCache = import.meta.prerender ? useStorage('internal:nuxt:prerender
const islandCache = import.meta.prerender ? useStorage('internal:nuxt:prerender:island') : null
const islandPropCache = import.meta.prerender ? useStorage('internal:nuxt:prerender:island-props') : null
const sharedPrerenderPromises = import.meta.prerender && process.env.NUXT_SHARED_DATA ? new Map>() : null
-const sharedPrerenderCache = import.meta.prerender && process.env.NUXT_SHARED_DATA ? {
- get (key: string): Promise {
- if (sharedPrerenderPromises!.has(key)) {
- return sharedPrerenderPromises!.get(key)!
+const sharedPrerenderKeys = new Set()
+const sharedPrerenderCache = import.meta.prerender && process.env.NUXT_SHARED_DATA
+ ? {
+ get (key: string): Promise | undefined {
+ if (sharedPrerenderKeys.has(key)) {
+ return sharedPrerenderPromises!.get(key) ?? useStorage('internal:nuxt:prerender:shared').getItem(key) as Promise
+ }
+ },
+ async set (key: string, value: Promise): Promise {
+ sharedPrerenderKeys.add(key)
+ sharedPrerenderPromises!.set(key, value)
+ useStorage('internal:nuxt:prerender:shared').setItem(key, await value as any)
+ // free up memory after the promise is resolved
+ .finally(() => sharedPrerenderPromises!.delete(key))
+ }
}
- return useStorage('internal:nuxt:prerender:shared').getItem(key) as Promise
- },
- async set (key: string, value: Promise) {
- sharedPrerenderPromises!.set(key, value)
- return useStorage('internal:nuxt:prerender:shared').setItem(key, await value as any)
- // free up memory after the promise is resolved
- .finally(() => sharedPrerenderPromises!.delete(key))
- },
-} : null
+ : null
+const ISLAND_SUFFIX_RE = /\.json(\?.*)?$/
async function getIslandContext (event: H3Event): Promise {
// TODO: Strict validation for url
let url = event.path || ''
@@ -206,8 +213,9 @@ async function getIslandContext (event: H3Event): Promise {
// rehydrate props from cache so we can rerender island if cache does not have it any more
url = await islandPropCache!.getItem(event.path) as string
}
- url = url.substring('/__nuxt_island'.length + 1) || ''
- const [componentName, hashId] = url.split('?')[0].replace(/\.json$/, '').split('_')
+ const componentParts = url.substring('/__nuxt_island'.length + 1).replace(ISLAND_SUFFIX_RE, '').split('_')
+ const hashId = componentParts.length > 1 ? componentParts.pop() : undefined
+ const componentName = componentParts.join('_')
// TODO: Validate context
const context = event.method === 'GET' ? getQuery(event) : await readBody(event)
@@ -219,14 +227,21 @@ async function getIslandContext (event: H3Event): Promise {
name: componentName,
props: destr(context.props) || {},
slots: {},
- components: {},
+ components: {}
}
return ctx
}
-const PAYLOAD_URL_RE = process.env.NUXT_JSON_PAYLOADS ? /\/_payload(\.[a-zA-Z0-9]+)?.json(\?.*)?$/ : /\/_payload(\.[a-zA-Z0-9]+)?.js(\?.*)?$/
-const ROOT_NODE_REGEX = new RegExp(`^<${appRootTag}${appRootId ? ` id="${appRootId}"` : ''}>([\\s\\S]*)$`)
+const HAS_APP_TELEPORTS = !!(appTeleportTag && appTeleportId)
+const APP_TELEPORT_OPEN_TAG = HAS_APP_TELEPORTS ? `<${appTeleportTag} id="${appTeleportId}">` : ''
+const APP_TELEPORT_CLOSE_TAG = HAS_APP_TELEPORTS ? `` : ''
+
+const APP_ROOT_OPEN_TAG = `<${appRootTag}${appRootId ? ` id="${appRootId}"` : ''}>`
+const APP_ROOT_CLOSE_TAG = ``
+
+const PAYLOAD_URL_RE = process.env.NUXT_JSON_PAYLOADS ? /\/_payload.json(\?.*)?$/ : /\/_payload.js(\?.*)?$/
+const ROOT_NODE_REGEX = new RegExp(`^${APP_ROOT_OPEN_TAG}([\\s\\S]*)${APP_ROOT_CLOSE_TAG}$`)
const PRERENDER_NO_SSR_ROUTES = new Set(['/index.html', '/200.html', '/404.html'])
@@ -250,7 +265,7 @@ export default defineRenderHandler(async (event): Promise i!.trim())
}
-function joinTags (tags: string[]) {
+function joinTags (tags: Array) {
return tags.join('')
}
function joinAttrs (chunks: string[]) {
- return chunks.join(' ')
+ if (chunks.length === 0) { return '' }
+ return ' ' + chunks.join(' ')
}
function renderHTMLDocument (html: NuxtRenderHTMLContext) {
- return ''
- + ``
- + `${joinTags(html.head)}`
- + `${joinTags(html.bodyPrepend)}${joinTags(html.body)}${joinTags(html.bodyAppend)}
+
+
+
+```
+
+::
+
:read-more{to="/docs/getting-started/transitions"}
## Layout's Ref
To get the ref of a layout component, access it through `ref.value.layoutRef`.
-````vue [app.vue]
+::code-group
+
+```vue [app.vue]
-
+ default layout
+
+
+```
+
+::
:read-more{to="/docs/guide/directory-structure/layouts"}
diff --git a/docs/3.api/1.components/8.nuxt-island.md b/docs/3.api/1.components/8.nuxt-island.md
index a7c3dfc99f..cd715534f2 100644
--- a/docs/3.api/1.components/8.nuxt-island.md
+++ b/docs/3.api/1.components/8.nuxt-island.md
@@ -12,10 +12,6 @@ When rendering an island component, the content of the island component is stati
Changing the island component props triggers a refetch of the island component to re-render it again.
-::read-more{to="/docs/guide/going-further/experimental-features#componentislands" icon="i-ph-star-duotone"}
-This component is experimental and in order to use it you must enable the `experimental.componentIslands` option in your `nuxt.config`.
-::
-
::note
Global styles of your application are sent with the response.
::
@@ -60,3 +56,11 @@ Some slots are reserved to `NuxtIsland` for special cases.
- `refresh()`
- **type**: `() => Promise
-
+
```
+::note
+`useId` must be used in a component with a single root element, as it uses this root element's attributes to pass the id from server to client.
+::
+
## Parameters
`useId` does not take any parameters.
diff --git a/docs/3.api/2.composables/use-loading-indicator.md b/docs/3.api/2.composables/use-loading-indicator.md
index a451518d71..2e4a5bb97b 100644
--- a/docs/3.api/2.composables/use-loading-indicator.md
+++ b/docs/3.api/2.composables/use-loading-indicator.md
@@ -39,7 +39,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.
+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.
### `clear()`
diff --git a/docs/3.api/2.composables/use-nuxt-app.md b/docs/3.api/2.composables/use-nuxt-app.md
index 20fcefccd7..29a920cdb1 100644
--- a/docs/3.api/2.composables/use-nuxt-app.md
+++ b/docs/3.api/2.composables/use-nuxt-app.md
@@ -51,7 +51,7 @@ export default defineNuxtPlugin((nuxtApp) => {
})
nuxtApp.hook('vue:error', (..._args) => {
console.log('vue:error')
- // if (process.client) {
+ // if (import.meta.client) {
// console.log(..._args)
// }
})
@@ -120,7 +120,7 @@ Nuxt exposes the following properties through `ssrContext`:
export const useColor = () => useState
+ Some base content
+
+
+
+```
diff --git a/docs/3.api/2.composables/use-request-url.md b/docs/3.api/2.composables/use-request-url.md
index a2d4a8e3c8..1ed09bb66b 100644
--- a/docs/3.api/2.composables/use-request-url.md
+++ b/docs/3.api/2.composables/use-request-url.md
@@ -10,6 +10,12 @@ links:
`useRequestURL` is a helper function that returns an [URL object](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) working on both server-side and client-side.
+::important
+When utilizing [Hybrid Rendering](/docs/guide/concepts/rendering#hybrid-rendering) with cache strategies, all incoming request headers are dropped when handling the cached responses via the [Nitro caching layer](https://nitro.unjs.io/guide/cache) (meaning `useRequestURL` will return `localhost` for the `host`).
+
+You can define the [`cache.varies` option](https://nitro.unjs.io/guide/cache#options) to specify headers that will be considered when caching and serving the responses, such as `host` and `x-forwarded-host` for multi-tenant environments.
+::
+
::code-group
```vue [pages/about.vue]
diff --git a/docs/3.api/2.composables/use-seo-meta.md b/docs/3.api/2.composables/use-seo-meta.md
index 8c48d200f5..e28debae32 100644
--- a/docs/3.api/2.composables/use-seo-meta.md
+++ b/docs/3.api/2.composables/use-seo-meta.md
@@ -46,6 +46,6 @@ useSeoMeta({
## Parameters
-There are over 100 parameters. See the [full list of parameters in the source code](https://github.com/harlan-zw/zhead/blob/main/src/metaFlat.ts).
+There are over 100 parameters. See the [full list of parameters in the source code](https://github.com/harlan-zw/zhead/blob/main/packages/zhead/src/metaFlat.ts#L1035).
:read-more{to="/docs/getting-started/seo-meta"}
diff --git a/docs/3.api/3.utils/define-page-meta.md b/docs/3.api/3.utils/define-page-meta.md
index 074229ae36..c70da355a3 100644
--- a/docs/3.api/3.utils/define-page-meta.md
+++ b/docs/3.api/3.utils/define-page-meta.md
@@ -200,7 +200,7 @@ The two routes "/test-category" and "/1234-post" match both `[postId]-[postSlug]
To make sure that we are only matching digits (`\d+`) for `postId` in the `[postId]-[postSlug]` route, we can add the following to the `[postId]-[postSlug].vue` page template:
-```vue [pages/[postId]-[postSlug].vue]
+```vue [pages/[postId\\]-[postSlug\\].vue]
`)
+ } 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 EXCLUDE_TRACE_RE = /^.*at.*(\/node_modules\/(.*\/)?(nuxt|nuxt-nightly|nuxt-edge|nuxt3|consola|@vue)\/.*|core\/runtime\/nitro.*)$\n?/gm
+function getStack () {
+ // Pass along stack traces if needed (for error and warns)
+ // eslint-disable-next-line unicorn/error-message
+ const stack = new Error()
+ Error.captureStackTrace(stack)
+ return stack.stack?.replace(EXCLUDE_TRACE_RE, '').replace(/^Error.*\n/, '') || ''
+}
+
+const FILENAME_RE = /at.*\(([^:)]+)[):]/
+const FILENAME_RE_GLOBAL = /at.*\(([^)]+)\)/g
+function extractFilenameFromStack (stacktrace: string) {
+ return stacktrace.match(FILENAME_RE)?.[1].replace(withTrailingSlash(rootDir), '')
+}
+function normalizeFilenames (stacktrace: string) {
+ // remove line numbers and file: protocol - TODO: sourcemap support for line numbers
+ return stacktrace.replace(FILENAME_RE_GLOBAL, (match, filename) => match.replace(filename, filename.replace('file:///', '/').replace(/:.*$/, '')))
+}
+
+function onConsoleLog (callback: (log: LogObject) => void) {
+ consola.addReporter({
+ log (logObj) {
+ callback(logObj)
+ }
+ })
+ consola.wrapConsole()
+}
diff --git a/packages/nuxt/src/core/runtime/nitro/error.ts b/packages/nuxt/src/core/runtime/nitro/error.ts
index c58bb75fcd..ebb7addc8f 100644
--- a/packages/nuxt/src/core/runtime/nitro/error.ts
+++ b/packages/nuxt/src/core/runtime/nitro/error.ts
@@ -54,13 +54,15 @@ export default
+ Only preview content: {{ state.token }}
+
+
+
+
+