@nuxt/docs-nightly 4.2.2-29381721.51356a46 → 4.2.2-29385650.ab3dd9a8

package/3.guide/1.concepts/4.server-engine.md

@@ -16,7 +16,7 @@ It is shipped with many features:
 
 ## API Layer
 
-Server [API endpoints](/docs/4.x/guide/directory-structure/server#server-routes) and [Middleware](/docs/4.x/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
+Server [API endpoints](/docs/4.x/directory-structure/server#server-routes) and [Middleware](/docs/4.x/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
 
 Key features include:
 
@@ -26,7 +26,7 @@ Key features include:
 
 Check out [the h3 docs](https://github.com/h3js/h3) for more information.
 
-::read-more{to="/docs/4.x/guide/directory-structure/server#server-routes"}
+::read-more{to="/docs/4.x/directory-structure/server#server-routes"}
 Learn more about the API layer in the `server/` directory.
 ::
 
@@ -53,7 +53,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
 
 The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service worker environments.
 
-Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/4.x/guide/directory-structure/output) directory.
+Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/4.x/directory-structure/output) directory.
 
 The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
 

package/3.guide/1.concepts/5.modules.md

@@ -17,7 +17,7 @@ Explore Nuxt Modules
 
 ## Add Nuxt Modules
 
-Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
+Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/3.guide/1.concepts/7.esm.md

@@ -1,6 +1,7 @@
 ---
 title: 'ES Modules'
 description: "Nuxt uses native ES modules."
+navigation: false
 ---
 
 This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM.

package/3.guide/1.concepts/8.typescript.md

@@ -47,12 +47,12 @@ export default defineNuxtConfig({
 
 ## Auto-generated Types
 
-Nuxt projects rely on auto-generated types to work properly. These types are stored in the [`.nuxt`](/docs/4.x/guide/directory-structure/nuxt) directory and are generated when you run the dev server or build your application. You can also generate these files manually by running `nuxt prepare`.
+Nuxt projects rely on auto-generated types to work properly. These types are stored in the [`.nuxt`](/docs/4.x/directory-structure/nuxt) directory and are generated when you run the dev server or build your application. You can also generate these files manually by running `nuxt prepare`.
 
-The generated `tsconfig.json` files inside the [`.nuxt`](/docs/4.x/guide/directory-structure/nuxt) directory include **recommended basic TypeScript configuration** for your project, references to [auto-imports](/docs/4.x/guide/concepts/auto-imports), [API route types](/docs/4.x/guide/concepts/server-engine#typed-api-routes), path aliases like `#imports`, `~/file`, or `#build/file`, and more.
+The generated `tsconfig.json` files inside the [`.nuxt`](/docs/4.x/directory-structure/nuxt) directory include **recommended basic TypeScript configuration** for your project, references to [auto-imports](/docs/4.x/guide/concepts/auto-imports), [API route types](/docs/4.x/guide/concepts/server-engine#typed-api-routes), path aliases like `#imports`, `~/file`, or `#build/file`, and more.
 
 ::warning
-Nuxt relies on this configuration, and [Nuxt Modules](/docs/4.x/guide/going-further/modules) can extend it as well. For this reason, it is not recommended to modify your `tsconfig.json` file directly, as doing so could overwrite important settings. Instead, extend it via `nuxt.config.ts`. [Learn more about extending the configuration here](/docs/4.x/guide/directory-structure/tsconfig).
+Nuxt relies on this configuration, and [Nuxt Modules](/docs/4.x/guide/going-further/modules) can extend it as well. For this reason, it is not recommended to modify your `tsconfig.json` file directly, as doing so could overwrite important settings. Instead, extend it via `nuxt.config.ts`. [Learn more about extending the configuration here](/docs/4.x/directory-structure/tsconfig).
 ::
 
 ::tip{icon="i-lucide-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
@@ -75,7 +75,7 @@ When you run `nuxt dev`, `nuxt build` or `nuxt prepare`, Nuxt will generate mult
 Each of these files is configured to reference the appropriate dependencies and provide optimal type-checking for their specific context.
 
 ::note
-For backward compatibility, Nuxt still generates `.nuxt/tsconfig.json`. However, we recommend using [TypeScript project references](/docs/4.x/guide/directory-structure/tsconfig) with the new configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, etc.) for better type safety and performance. This legacy file will be removed in a future version of Nuxt.
+For backward compatibility, Nuxt still generates `.nuxt/tsconfig.json`. However, we recommend using [TypeScript project references](/docs/4.x/directory-structure/tsconfig) with the new configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, etc.) for better type safety and performance. This legacy file will be removed in a future version of Nuxt.
 ::
 
 ### Benefits of Project References

package/3.guide/2.best-practices/performance.md

@@ -90,7 +90,7 @@ const show = ref(false)
 
 By using the Lazy prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
-:read-more{title="Lazy loading components" to="/docs/4.x/guide/directory-structure/app/components#dynamic-imports"}
+:read-more{title="Lazy loading components" to="/docs/4.x/directory-structure/app/components#dynamic-imports"}
 
 ### Lazy Hydration
 
@@ -106,7 +106,7 @@ It is not always necessary to hydrate (or make interactive) all the components o
 
 To optimize your app, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks.
 
-:read-more{title="Lazy hydration" to="/docs/4.x/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
+:read-more{title="Lazy hydration" to="/docs/4.x/directory-structure/app/components#delayed-or-lazy-hydration"}
 
 ### Fetching data
 

package/3.guide/3.ai/.navigation.yml

@@ -0,0 +1,3 @@
+title: 'Working with AI'
+titleTemplate: 'Working with AI: %s'
+icon: i-lucide-bot

package/3.guide/3.ai/1.mcp.md

@@ -0,0 +1,255 @@
+---
+title: Nuxt MCP Server
+description: Use Nuxt documentation in your AI assistants with Model Context Protocol support.
+navigation.title: MCP Server
+---
+
+## What is MCP?
+
+MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. Nuxt provides an MCP server that allows AI assistants like Claude Code, Cursor, and Windsurf to access documentation, blog posts, and deployment guides directly.
+
+The MCP server provides structured access to the Nuxt documentation, making it easy for AI tools to understand and assist with Nuxt development.
+
+## Resources
+
+The Nuxt MCP server provides the following resources for discovery:
+
+- **`resource://nuxt-com/documentation-pages`**: Browse all available documentation pages (defaults to v4.x)
+- **`resource://nuxt-com/blog-posts`**: Browse all Nuxt blog posts including releases and tutorials
+- **`resource://nuxt-com/deploy-providers`**: Browse all deployment providers and hosting platforms
+
+You're able to access these resources with tools like Claude Code by using `@`.
+
+## Tools
+
+The Nuxt MCP server provides the following tools organized by category:
+
+### Documentation
+
+- **`list_documentation_pages`**: Lists all available Nuxt documentation pages with their categories and basic information. Supports version filtering (3.x, 4.x, or all)
+- **`get_documentation_page`**: Retrieves documentation page content and details by path
+- **`get_getting_started_guide`**: Gets the getting started guide for a specific Nuxt version
+
+### Blog
+
+- **`list_blog_posts`**: Lists all Nuxt blog posts with metadata including dates, categories, and tags
+- **`get_blog_post`**: Retrieves blog post content and details by path
+
+### Deployment
+
+- **`list_deploy_providers`**: Lists all deployment providers and hosting platforms for Nuxt applications
+- **`get_deploy_provider`**: Retrieves deployment provider details and instructions by path
+
+## Prompts
+
+The Nuxt MCP server provides guided prompts for common workflows:
+
+- **`find_documentation_for_topic`**: Find the best Nuxt documentation for a specific topic or feature
+- **`deployment_guide`**: Get deployment instructions for a specific hosting provider
+- **`migration_help`**: Get help with migrating between Nuxt versions
+
+You're able to access these resources with tools like Claude Code by using `/`.
+
+## Setup
+
+The Nuxt MCP server uses HTTP transport and can be installed in different AI assistants.
+
+### ChatGPT
+
+::note{icon="i-lucide-info"}
+**Custom connectors using MCP are available on ChatGPT for Pro and Plus accounts** on the web.
+::
+
+Follow these steps to set up Nuxt as a connector within ChatGPT:
+
+1. **Enable Developer mode:**
+   - Go to Settings → Connectors → Advanced settings → Developer mode
+
+2. **Open ChatGPT settings**
+
+3. **In the Connectors tab, Create a new connector:**
+   - Give it a name: `Nuxt`
+   - MCP server URL: `https://nuxt.com/mcp`
+   - Authentication: `None`
+
+4. **Click Create**
+
+The Nuxt connector will appear in the composer's "Developer mode" tool later during conversations.
+
+### Claude Code
+
+::note{icon="i-lucide-info"}
+**Ensure Claude Code is installed** - Visit [Anthropic's documentation](https://docs.claude.com/en/docs/claude-code/quickstart) for installation instructions.
+::
+
+Add the server using the CLI command:
+
+```bash
+claude mcp add --transport http nuxt-remote https://nuxt.com/mcp
+```
+
+### Cursor
+
+Click the button below to install the Nuxt MCP server directly in Cursor:
+
+::u-button
+---
+to: "cursor://anysphere.cursor-deeplink/mcp/install?name=nuxt&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vbnV4dC5jb20vbWNwIn0%3D"
+label: Install MCP Server
+color: neutral
+icon: i-custom-cursor
+---
+::
+
+For manual setup, follow these steps:
+
+1. Open Cursor and go to "Settings" > "Tools & MCP"
+2. Add the Nuxt MCP server configuration
+
+Or manually create/update `.cursor/mcp.json` in your project root:
+
+```json [.cursor/mcp.json]
+{
+  "mcpServers": {
+    "nuxt": {
+      "type": "http",
+      "url": "https://nuxt.com/mcp"
+    }
+  }
+}
+```
+
+### Le Chat Mistral
+
+1. Navigate to "Intelligence" > "Connectors"
+2. Click on "Add Connector" button, then select "Custom MCP Connector"
+3. Create your Custom MCP Connector:
+    - Connector Name : `Nuxt`
+    - Connector Server : `https://nuxt.com/mcp`
+
+### Visual Studio Code
+
+::note{icon="i-lucide-info"}
+**Install required extensions** - Ensure you have [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) extensions installed.
+::
+
+1. Open VS Code and access the Command Palette (Ctrl/Cmd + Shift + P)
+2. Type "Preferences: Open Workspace Settings (JSON)" and select it
+3. Navigate to your project's `.vscode` folder or create one if it doesn't exist
+4. Create or edit the `mcp.json` file with the following configuration:
+
+```json [.vscode/mcp.json]
+{
+  "servers": {
+    "nuxt": {
+      "type": "http",
+      "url": "https://nuxt.com/mcp"
+    }
+  }
+}
+```
+
+### GitHub Copilot Agent
+
+::note{icon="i-lucide-info"}
+**Repository administrator access required** to configure MCP servers for GitHub Copilot coding agent.
+::
+
+If you have already configured MCP servers in VS Code (replace the `servers` key with `mcpServers` for GitHub Copilot Agent), you can leverage a similar configuration for GitHub Copilot coding agent. You will need to add a `tools` key specifying which tools are available to Copilot.
+
+1. Navigate to your GitHub repository
+2. Go to **Settings** > **Code & automation** > **Copilot** > **Coding agent**
+3. In the **MCP configuration** section, add the following configuration:
+    ```json
+    {
+      "mcpServers": {
+        "nuxt": {
+          "type": "http",
+          "url": "https://nuxt.com/mcp",
+          "tools": ["*"]
+        }
+      }
+    }
+    ```
+4. Click **Save**
+
+#### Validating the Configuration
+
+To verify the MCP server is configured correctly:
+
+1. Create an issue in your repository and assign it to Copilot
+2. Wait for Copilot to create a pull request
+3. In the pull request, click **View session** in the "Copilot started work" timeline event
+4. Click the ellipsis button (**...**) at the top right, then click **Copilot** in the sidebar
+5. Expand the **Start MCP Servers** step to see the configured Nuxt tools
+
+For more information on using MCP with GitHub Copilot coding agent, see [Extend coding agent with MCP](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp).
+
+### Windsurf
+
+1. Open Windsurf and navigate to "Settings" > "Windsurf Settings" > "Cascade"
+2. Click the "Manage MCPs" button, then select the "View raw config" option
+3. Add the following configuration to your MCP settings:
+
+```json [.codeium/windsurf/mcp_config.json]
+{
+  "mcpServers": {
+    "nuxt": {
+      "type": "http",
+      "url": "https://nuxt.com/mcp"
+    }
+  }
+}
+```
+
+### Zed
+
+1. Open Zed and go to "Settings" > "Open Settings"
+2. Navigate to the JSON settings file
+3. Add the following context server configuration to your settings:
+
+```json [.config/zed/settings.json]
+{
+  "context_servers": {
+    "nuxt": {
+      "source": "custom",
+      "command": "npx",
+      "args": ["mcp-remote", "https://nuxt.com/mcp"],
+      "env": {}
+    }
+  }
+}
+```
+
+### Opencode
+
+1. In your project root, create `opencode.json`
+2. Add the following configuration:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "nuxt": {
+      "type": "remote",
+      "url": "https://nuxt.com/mcp",
+      "enabled": true
+    }
+  }
+}
+```
+
+## Prompts Examples
+
+Once configured, you can ask your AI assistant questions like:
+
+- "List all available Nuxt documentation pages"
+- "Get the introduction documentation"
+- "What's the difference between v3 and v4?"
+- "How do I deploy to Vercel?"
+- "Show me the latest blog posts"
+- "Help me migrate from Nuxt 3 to Nuxt 4"
+- "Search documentation about composables"
+- "Find deployment guides for Cloudflare"
+
+The AI assistant will use the MCP server to fetch structured JSON data and provide guided assistance for Nuxt development.

package/3.guide/3.ai/2.llms-txt.md

@@ -0,0 +1,65 @@
+---
+title: Nuxt LLMs.txt
+description: How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt concepts, APIs, and best practices.
+navigation.title: LLMs.txt
+---
+
+## What is LLMs.txt?
+
+LLMs.txt is a structured documentation format specifically designed for large language models (LLMs). Nuxt provides LLMs.txt files that contain comprehensive information about the framework, making it easy for AI tools to understand and assist with Nuxt development.
+
+These files are optimized for AI consumption and contain structured information about concepts, APIs, usage patterns, and best practices.
+
+## Available routes
+
+We provide LLMs.txt routes to help AI tools access our documentation:
+
+- **`/llms.txt`** - Contains a structured overview of all documentation pages and their links (~5K tokens)
+- **`/llms-full.txt`** - Provides comprehensive documentation including getting started guides, API references, blog posts, and deployment guides (~1M+ tokens)
+
+## Choosing the Right File
+
+::note{icon="i-lucide-info"}
+**Most users should start with `/llms.txt`** - it contains all essential information and works with standard LLM context windows.
+
+Use `/llms-full.txt` only if you need comprehensive implementation details and your AI tool supports large contexts (200K+ tokens).
+::
+
+## Important usage notes
+
+::warning{icon="i-lucide-alert-triangle"}
+**@-symbol must be typed manually** - When using tools like Cursor or Windsurf, the `@` symbol must be typed by hand in the chat interface. Copy-pasting breaks the tool's ability to recognize it as a context reference.
+::
+
+## Usage with AI Tools
+
+### Cursor
+
+Nuxt provides specialized LLMs.txt files that you can reference in Cursor for better AI assistance with Nuxt development.
+
+#### How to use
+
+1. **Direct reference**: Mention the LLMs.txt URLs when asking questions
+2. Add these specific URLs to your project context using `@docs`
+
+[Read more about Cursor Web and Docs Search](https://cursor.com/docs/context/symbols)
+
+### Windsurf
+
+Windsurf can directly access the Nuxt LLMs.txt files to understand framework usage and best practices.
+
+#### Using LLMs.txt with Windsurf
+
+- Use `@docs` to reference specific LLMs.txt URLs
+- Create persistent rules referencing these URLs in your workspace
+
+[Read more about Windsurf Web and Docs Search](https://docs.windsurf.com/windsurf/cascade/web-search)
+
+### Other AI Tools
+
+Any AI tool that supports LLMs.txt can use these routes to better understand Nuxt.
+
+#### Examples for ChatGPT, Claude, or other LLMs
+
+- "Using Nuxt documentation from https://nuxt.com/llms.txt"
+- "Follow complete Nuxt guidelines from https://nuxt.com/llms-full.txt"

package/3.guide/{3.recipes → 4.recipes}/1.custom-routing.md

@@ -5,7 +5,7 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/4.x/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/4.x/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 

package/3.guide/{3.recipes → 4.recipes}/2.vite-plugin.md

@@ -28,7 +28,7 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
 
 ::
 
-Next, we need to import and add it to our [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
+Next, we need to import and add it to our [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file:
 
 ```ts [nuxt.config.ts]
 import yaml from '@rollup/plugin-yaml'

package/3.guide/{3.recipes → 4.recipes}/3.custom-usefetch.md

@@ -12,7 +12,7 @@ However, Nuxt provides a way to create a custom fetcher for your API (or multipl
 
 ## Custom `$fetch`
 
-Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/4.x/guide/directory-structure/app/plugins).
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/4.x/directory-structure/app/plugins).
 
 ::note
 `$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).

package/3.guide/{3.recipes → 4.recipes}/4.sessions-and-authentication.md

@@ -155,7 +155,7 @@ export default defineEventHandler(async (event) => {
 
 ## Protect App Routes
 
-Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
+Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/4.x/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
 
 `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is logged in, and redirect them if they are not.
 

package/3.guide/{4.going-further → 5.going-further}/1.events.md

@@ -1,10 +1,9 @@
 ---
-title: "Events"
+title: "Creating Custom Events"
 description: "Nuxt provides a powerful event system powered by hookable."
+navigation.title: "Custom Events"
 ---
 
-# Events
-
 Using events is a great way to decouple your application and allow for more flexible and modular communication between different parts of your code. Events can have multiple listeners that do not depend on each other. For example, you may wish to send an email to your user each time an order has shipped. Instead of coupling your order processing code to your email code, you can emit an event which a listener can receive and use to dispatch an email.
 
 The Nuxt event system is powered by [unjs/hookable](https://github.com/unjs/hookable), which is the same library that powers the Nuxt hooks system.

package/3.guide/{4.going-further → 5.going-further}/1.experimental-features.md

@@ -131,7 +131,7 @@ Emits `app:chunkError` hook when there is an error loading vite/webpack chunks.
 
 By default, Nuxt will also perform a reload of the new route when a chunk fails to load when navigating to a new route (`automatic`).
 
-Setting `automatic-immediate` will lead Nuxt to perform a reload of the current route right when a chunk fails to load (instead of waiting for navigation). This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/4.x/guide/directory-structure/app/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+Setting `automatic-immediate` will lead Nuxt to perform a reload of the current route right when a chunk fails to load (instead of waiting for navigation). This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/4.x/directory-structure/app/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
@@ -318,7 +318,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/components#server-components"}
+:read-more{to="/docs/4.x/directory-structure/app/components#server-components"}
 
 ::read-more{icon="i-simple-icons-github" to="https://github.com/nuxt/nuxt/issues/19772" target="_blank"}
 You can follow the server components roadmap on GitHub.
@@ -541,7 +541,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/4.x/guide/directory-structure/app/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/4.x/directory-structure/app/pages#typing-custom-metadata).
 
 ## navigationRepaint
 
@@ -665,7 +665,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::read-more{icon="i-simple-icons-github" color="gray" to="/docs/4.x/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
+::read-more{icon="i-simple-icons-github" color="gray" to="/docs/4.x/directory-structure/app/components#delayed-or-lazy-hydration"}
 Read more about lazy hydration.
 ::
 

package/3.guide/{4.going-further → 5.going-further}/1.internals.md

@@ -1,6 +1,7 @@
 ---
 title: "How Nuxt Works?"
 description: "Nuxt is a minimal but highly customizable framework to build web applications."
+navigation: false
 ---
 
 This guide helps you better understand Nuxt internals to develop new solutions and module integrations on top of Nuxt.
@@ -30,7 +31,7 @@ Global usage is possible for the browser but not on the server, to avoid sharing
 
 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/4.x/guide/directory-structure/app/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/4.x/directory-structure/app/plugins).
 
 Check [Nuxt App](/docs/4.x/api/composables/use-nuxt-app) for more information about this interface.
 
@@ -76,6 +77,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/4.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/4.x/guide/directory-structure/app/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/directory-structure/app/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/4.x/guide/going-further/modules).

package/3.guide/{4.going-further → 5.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/4.x/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/4.x/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/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig) option.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -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/4.x/guide/directory-structure/env"}
+:read-more{to="/docs/4.x/directory-structure/env"}
 ::
 
 Runtime config values are **automatically replaced by matching environment variables at runtime**.

package/3.guide/{4.going-further → 5.going-further}/2.hooks.md

@@ -39,7 +39,7 @@ Explore all available Nuxt hooks.
 
 ## App Hooks (Runtime)
 
-App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/guide/directory-structure/app/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/directory-structure/app/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
 ```ts [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -55,7 +55,7 @@ Explore all available App hooks.
 
 ## Server Hooks (Runtime)
 
-These hooks are available for [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
+These hooks are available for [server plugins](/docs/4.x/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
 
 ```ts [~/server/plugins/test.ts]
 export default defineNitroPlugin((nitroApp) => {

package/3.guide/{4.going-further → 5.going-further}/3.modules.md

@@ -117,7 +117,7 @@ Nuxt Modules come with a variety of powerful APIs and patterns allowing them to
 We can consider two kinds of Nuxt Modules:
 
 - published modules are distributed on npm - you can see a list of some community modules on [the Nuxt website](/modules).
-- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/guide/directory-structure/modules).
+- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/directory-structure/modules).
 
 In either case, their anatomy is similar.
 
@@ -224,7 +224,7 @@ Modules, like everything in a Nuxt configuration, aren't included in your applic
 Inside the runtime directory, you can provide any kind of assets related to the Nuxt App:
 - Vue components
 - Composables
-- [Nuxt plugins](/docs/4.x/guide/directory-structure/app/plugins)
+- [Nuxt plugins](/docs/4.x/directory-structure/app/plugins)
 
 To the [server engine](/docs/4.x/guide/concepts/server-engine), Nitro:
 - API routes

package/3.guide/{4.going-further → 5.going-further}/6.nuxt-app.md

@@ -23,7 +23,7 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/guide/directory-structure/app/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/directory-structure/app/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup) (in pages and components).
 
 If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/4.x/api/composables/use-nuxt-app#runwithcontext).
 
@@ -42,7 +42,7 @@ If your composable does not always need `nuxtApp` or you simply want to check if
 
 Plugins also receive `nuxtApp` as the first argument for convenience.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
 ## Providing Helpers
 
@@ -55,7 +55,7 @@ nuxtApp.provide('hello', name => `Hello ${name}!`)
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/plugins#providing-helpers"}
+::read-more{to="/docs/4.x/directory-structure/app/plugins#providing-helpers"}
 It is possible to inject helpers by returning an object with a `provide` key in plugins.
 ::