@nuxt/docs 4.1.2 → 4.2.0

package/2.guide/3.going-further/1.features.md

@@ -7,29 +7,51 @@ Some features of Nuxt are available on an opt-in basis, or can be disabled based
 
 ## `features`
 
+### devLogs
+
+Stream server logs to the client as you are developing. These logs can be handled in the `dev:ssr-logs` hook.
+
+By default, this is enabled in development (when test mode is not active).
+
+If set to `silent`, the logs will not be printed to the browser console.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  features: {
+    devLogs: true,
+  },
+})
+```
+
 ### inlineStyles
 
 Inlines styles when rendering HTML. This is currently available only when using Vite.
 
 You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
 
+It defaults to `(id) => id.includes('.vue')`.
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    inlineStyles: false // or a function to determine inlining
-  }
+    inlineStyles: false, // or a function to determine inlining
+  },
 })
 ```
 
 ### noScripts
 
-Disables rendering of Nuxt scripts and JS resource hints. Can also be configured granularly within `routeRules`.
+Turn off rendering of Nuxt scripts and JavaScript resource hints. Can also be configured granularly within `routeRules`.
+
+You can also disable scripts more granularly within `routeRules`.
+
+If set to 'production' or `true`, JavaScript will be disabled in production mode only. If set to 'all', JavaScript will be disabled in both development and production modes.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    noScripts: true
-  }
+    noScripts: true, // or 'production' | 'all' | false
+  },
 })
 ```
 
@@ -39,23 +61,48 @@ There is also a `future` namespace for early opting-in to new features that will
 
 ### compatibilityVersion
 
-This is used for enabling early access to Nuxt features or flags.
+This enables early access to Nuxt features or flags.
+
+Setting `compatibilityVersion` to `5` changes defaults throughout your Nuxt configuration to opt in to Nuxt v5 behaviour, including enabling the [Vite Environment API](/docs/4.x/guide/going-further/experimental-features#viteenvironmentapi).
 
-It is not configurable yet in Nuxt 4, but once we begin merging breaking changes for v5, it will be possible to enable it.
+```ts
+export default defineNuxtConfig({
+  future: {
+    compatibilityVersion: 5,
+  },
+})
+```
+
+::read-more{to="/docs/4.x/getting-started/upgrade#testing-nuxt-5"}
+Learn more about testing Nuxt 5.
+::
+
+### multiApp
+
+This enables early access to the experimental multi-app support. You can follow the [tracker issue #21635](https://github.com/nuxt/nuxt/issues/21635) to see the progress of multi-app support in Nuxt.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  future: {
+    multiApp: true,
+  },
+})
+```
 
 ### typescriptBundlerResolution
 
-This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
-for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
+This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
 
 It improves type support when using modern libraries with `exports`.
 
 See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
 
+You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   future: {
-    typescriptBundlerResolution: true
-  }
+    typescriptBundlerResolution: false,
+  },
 })
 ```

package/2.guide/3.going-further/1.internals.md

@@ -7,15 +7,15 @@ This guide helps you better understand Nuxt internals to develop new solutions a
 
 ## The Nuxt Interface
 
-When you start Nuxt in development mode with [`nuxt dev`](/docs/api/commands/dev) or building a production application with [`nuxt build`](/docs/api/commands/build),
+When you start Nuxt in development mode with [`nuxt dev`](/docs/4.x/api/commands/dev) or building a production application with [`nuxt build`](/docs/4.x/api/commands/build),
 a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
-some internal state, and a powerful [hooking system](/docs/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
+some internal state, and a powerful [hooking system](/docs/4.x/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
 allowing different components to communicate with each other. You can think of it as **Builder Core**.
 
-This context is globally available to be used with [Nuxt Kit](/docs/guide/going-further/kit) composables.
+This context is globally available to be used with [Nuxt Kit](/docs/4.x/guide/going-further/kit) composables.
 Therefore only one instance of Nuxt is allowed to run per process.
 
-To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/guide/going-further/modules).
+To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/4.x/guide/going-further/modules).
 
 For more details, check out [the source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts).
 
@@ -25,42 +25,42 @@ When rendering a page in the browser or on the server, a shared context will be
 This context keeps vue instance, runtime hooks, and internal states like ssrContext and payload for hydration.
 You can think of it as **Runtime Core**.
 
-This context can be accessed using [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
+This context can be accessed using [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
 Global usage is possible for the browser but not on the server, to avoid sharing context between users.
 
-Since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
+Since [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
 
-To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/guide/directory-structure/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins).
 
-Check [Nuxt App](/docs/api/composables/use-nuxt-app) for more information about this interface.
+Check [Nuxt App](/docs/4.x/api/composables/use-nuxt-app) for more information about this interface.
 
 `nuxtApp` has the following properties:
 
-```js
-const nuxtApp = {
-  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api
+```ts
+interface NuxtApp {
+  vueApp // the global Vue application: https://vuejs.org/api/application.html#application-api
 
-  versions, // an object containing Nuxt and Vue versions
+  versions // an object containing Nuxt and Vue versions
 
   // These let you call and add runtime NuxtApp hooks
   // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
-  hooks,
-  hook,
-  callHook,
+  hooks
+  hook
+  callHook
 
   // Only accessible on server-side
   ssrContext: {
-    url,
-    req,
-    res,
-    runtimeConfig,
-    noSSR,
-  },
+    url
+    req
+    res
+    runtimeConfig
+    noSSR
+  }
 
   // This will be stringified and passed from server to client
   payload: {
-    serverRendered: true,
-    data: {},
+    serverRendered: true
+    data: {}
     state: {}
   }
 
@@ -76,6 +76,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
 
 While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
 
-`nuxt.config` and [Nuxt Modules](/docs/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/guide/directory-structure/plugins) can be used to extend runtime.
+`nuxt.config` and [Nuxt Modules](/docs/4.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) can be used to extend runtime.
 
-When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/guide/going-further/modules).
+When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/4.x/guide/going-further/modules).

package/2.guide/3.going-further/10.runtime-config.md

@@ -5,7 +5,7 @@ description: "Nuxt provides a runtime config API to expose configuration and sec
 
 ## Exposing
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) option.
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig) option.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -14,9 +14,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Keys within public, will be also exposed to the client-side
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 
@@ -45,7 +45,7 @@ The most common way to provide configuration is by using [Environment Variables]
 
 ::note
 The Nuxt CLI has built-in support for reading your `.env` file in development, build and generate. But when you run your built server, **your `.env` file will not be read**.
-:read-more{to="/docs/guide/directory-structure/env"}
+:read-more{to="/docs/4.x/guide/directory-structure/env"}
 ::
 
 Runtime config values are **automatically replaced by matching environment variables at runtime**.
@@ -78,7 +78,7 @@ export default defineNuxtConfig({
     apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
     public: {
       apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
-    }
+    },
   },
 })
 ```
@@ -87,7 +87,7 @@ export default defineNuxtConfig({
 
 ### Vue App
 
-Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) to access the runtime config.
+Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) to access the runtime config.
 
 ::important
 The behavior is different between the client-side and server-side:
@@ -120,14 +120,14 @@ if (import.meta.server) {
 
 ### Plugins
 
-If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
+If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
 
 ```ts [app/plugins/config.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
 
   console.log('API base URL:', config.public.apiBase)
-});
+})
 ```
 
 ### Server Routes
@@ -139,15 +139,15 @@ export default defineEventHandler(async (event) => {
   const { apiSecret } = useRuntimeConfig(event)
   const result = await $fetch('https://my.api.com/test', {
     headers: {
-      Authorization: `Bearer ${apiSecret}`
-    }
+      Authorization: `Bearer ${apiSecret}`,
+    },
   })
   return result
 })
 ```
 
 ::note
-Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
+Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/4.x/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
 ::
 
 ## Typing Runtime Config

package/2.guide/3.going-further/11.nightly-release-channel.md

@@ -57,6 +57,6 @@ To try the latest version of [nuxt/cli](https://github.com/nuxt/cli):
 npx @nuxt/cli-nightly@latest [command]
 ```
 
-::read-more{to="/docs/api/commands"}
+::read-more{to="/docs/4.x/api/commands"}
 Read more about the available commands.
 ::

package/2.guide/3.going-further/2.hooks.md

@@ -9,15 +9,15 @@ The hooking system is powered by [unjs/hookable](https://github.com/unjs/hookabl
 
 ## Nuxt Hooks (Build Time)
 
-These hooks are available for [Nuxt Modules](/docs/guide/going-further/modules) and build context.
+These hooks are available for [Nuxt Modules](/docs/4.x/guide/going-further/modules) and build context.
 
 ### Within `nuxt.config.ts`
 
-```js [nuxt.config.ts]
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
-    close: () => { }
-  }
+    close: () => { },
+  },
 })
 ```
 
@@ -29,19 +29,19 @@ import { defineNuxtModule } from '@nuxt/kit'
 export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.hook('close', async () => { })
-  }
+  },
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nuxt-hooks-build-time"}
+::read-more{to="/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time"}
 Explore all available Nuxt hooks.
 ::
 
 ## App Hooks (Runtime)
 
-App hooks can be mainly used by [Nuxt Plugins](/docs/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
+App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
-```js [app/plugins/test.ts]
+```ts [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('page:start', () => {
     /* your code goes here */
@@ -49,15 +49,15 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#app-hooks-runtime"}
+::read-more{to="/docs/4.x/api/advanced/hooks#app-hooks-runtime"}
 Explore all available App hooks.
 ::
 
 ## Server Hooks (Runtime)
 
-These hooks are available for [server plugins](/docs/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
+These hooks are available for [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
 
-```js [~/server/plugins/test.ts]
+```ts [~/server/plugins/test.ts]
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
     console.log('render:html', html)
@@ -70,7 +70,7 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
+::read-more{to="/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
 Learn more about available Nitro lifecycle hooks.
 ::
 
@@ -79,7 +79,7 @@ Learn more about available Nitro lifecycle hooks.
 You can define your own custom hooks support by extending Nuxt's hook interfaces.
 
 ```ts
-import { HookResult } from "@nuxt/schema";
+import type { HookResult } from '@nuxt/schema'
 
 declare module '#app' {
   interface RuntimeNuxtHooks {
@@ -92,7 +92,7 @@ declare module '#app' {
 
 declare module 'nitropack/types' {
   interface NitroRuntimeHooks {
-    'your-nitro-hook': () => void;
+    'your-nitro-hook': () => void
   }
 }
 ```