@nuxt/docs 4.2.1 → 4.3.0

package/{2.guide/2.concepts/10.nuxt-lifecycle.md → 3.guide/1.concepts/2.nuxt-lifecycle.md}

@@ -5,15 +5,16 @@ description: "Understanding the lifecycle of Nuxt applications can help you gain
 
 The goal of this chapter is to provide a high-level overview of the different parts of the framework, their execution order, and how they work together.
 
-## Server
+## Server lifecycle
 
 On the server, the following steps are executed for every initial request to your application:
 
-### Step 1: Setup Nitro Server and Nitro Plugins (Once)
+::steps
+### Server plugins :badge[once]{color="info" class="align-middle"}
 
 Nuxt is powered by [Nitro](https://nitro.build/), a modern server engine.
 
-When Nitro starts, it initializes and executes the plugins under the `/server/plugins` directory. These plugins can:
+When Nitro starts, it initializes and executes the plugins under the [`/server/plugins`](/docs/4.x/directory-structure/server#server-plugins) directory. These plugins can:
 - Capture and handle application-wide errors.
 - Register hooks that execute when Nitro shuts down.
 - Register hooks for request lifecycle events, such as modifying responses.
@@ -22,9 +23,9 @@ When Nitro starts, it initializes and executes the plugins under the `/server/pl
 Nitro plugins are executed only once when the server starts. In a serverless environment, the server boots on each incoming request, and so do the Nitro plugins. However, they are not awaited.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/server#server-plugins"}
+:read-more{to="/docs/4.x/directory-structure/server#server-plugins"}
 
-### Step 2: Nitro Server Middleware
+### Server middleware
 
 After initializing the Nitro server, middleware under `server/middleware/` is executed for every request. Middleware can be used for tasks such as authentication, logging, or request transformation.
 
@@ -32,34 +33,34 @@ After initializing the Nitro server, middleware under `server/middleware/` is ex
 Returning a value from middleware will terminate the request and send the returned value as the response. This behavior should generally be avoided to ensure proper request handling!
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/server#server-middleware"}
+:read-more{to="/docs/4.x/directory-structure/server#server-middleware"}
 
-### Step 3: Initialize Nuxt and Execute Nuxt App Plugins
+### App plugins
 
-The Vue and Nuxt instances are created first. Afterward, Nuxt executes its server plugins. This includes:
+The Vue and Nuxt instances are created first. Afterward, Nuxt executes its app plugins. This includes:
 - Built-in plugins, such as Vue Router and `unhead`.
 - Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
 
-Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/4.x/guide/directory-structure/app/plugins).
+Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/4.x/directory-structure/app/plugins).
 
 ::callout{icon="i-lucide-lightbulb"}
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
-### Step 4: Route Validation
+### Route validation
 
 After initializing plugins and before executing middleware, Nuxt calls the `validate` method if it is defined in the `definePageMeta` function. The `validate` method, which can be synchronous or asynchronous, is often used to validate dynamic route parameters.
 
 - The `validate` function should return `true` if the parameters are valid.
-- If validation fails, it should return `false` or an object containing a `statusCode` and/or `statusMessage` to terminate the request.
+- If validation fails, it should return `false` or an object containing a `status` and/or `statusText` to terminate the request.
 
 For more information, see the [Route Validation documentation](/docs/4.x/getting-started/routing#route-validation).
 
 :read-more{to="/docs/4.x/getting-started/routing#route-validation"}
 
-### Step 5: Execute Nuxt App Middleware
+### App middleware
 
 Middleware allows you to run code before navigating to a particular route. It is often used for tasks such as authentication, redirection, or logging.
 
@@ -70,13 +71,13 @@ In Nuxt, there are three types of middleware:
 
 Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.
 
-For details about each type and examples, see the [Middleware documentation](/docs/4.x/guide/directory-structure/app/middleware).
+For details about each type and examples, see the [Middleware documentation](/docs/4.x/directory-structure/app/middleware).
 
 Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/directory-structure/app/middleware"}
 
-### Step 6: Render Page and Components
+### Page and components
 
 Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.
 
@@ -94,7 +95,7 @@ You should avoid code that produces side effects that need cleanup in root scope
 Watch a video from Daniel Roe explaining Server Rendering and Global State.
 ::
 
-### Step 7: Generate HTML Output
+### HTML Output
 
 After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.
 
@@ -106,11 +107,15 @@ After rendering the Vue application to HTML, Nuxt calls the [`app:rendered`](/do
 Before finalizing and sending the HTML, Nitro will call the [`render:html`](/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side) hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.
 ::
 
-## Client (browser)
+::
+
+## Client lifecycle
 
 This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.
 
-### Step 1: Initialize Nuxt and Execute Nuxt App Plugins
+::steps
+
+### App plugins
 
 This step is similar to the server-side execution and includes both built-in and custom plugins.
 
@@ -120,21 +125,21 @@ Custom plugins in the `app/plugins/` directory, such as those without a suffix (
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
-### Step 2: Route Validation
+### Route validation
 
 This step is the same as the server-side execution and includes the `validate` method if defined in the `definePageMeta` function.
 
-### Step 3: Execute Nuxt App Middleware
+### App middleware
 
 Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/middleware#when-middleware-runs"}
+:read-more{to="/docs/4.x/directory-structure/app/middleware#when-middleware-runs"}
 
-### Step 4: Mount Vue Application and Hydration
+### Mount Vue app and hydrate
 
-Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
+Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
 
 To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.
 
@@ -146,6 +151,8 @@ Before mounting the Vue application, Nuxt calls the [`app:beforeMount`](/docs/4.
 After mounting the Vue application, Nuxt calls the [`app:mounted`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.
 ::
 
-### Step 5: Vue Lifecycle
+### Vue lifecycle
 
 Unlike on the server, the browser executes the full [Vue lifecycle](https://vuejs.org/guide/essentials/lifecycle).
+
+::

package/{2.guide/2.concepts/1.auto-imports.md → 3.guide/1.concepts/3.auto-imports.md}

@@ -11,7 +11,7 @@ const count = ref(1) // ref is auto-imported
 </script>
 ```
 
-Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/4.x/guide/directory-structure/app/components), [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils).
+Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/4.x/directory-structure/app/components), [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils).
 
 Contrary to a classic global declaration, Nuxt preserves typings, IDEs completions and hints, and **only includes what is used in your production code**.
 
@@ -20,7 +20,7 @@ In the docs, every function that is not explicitly imported is auto-imported by
 ::
 
 ::note
-In the [`server`](/docs/4.x/guide/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
+In the [`server`](/docs/4.x/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
 ::
 
 ::note
@@ -101,8 +101,8 @@ export const useMyComposable = () => {
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `app/components/` for [Vue components](/docs/4.x/guide/directory-structure/app/components).
-- `app/composables/` for [Vue composables](/docs/4.x/guide/directory-structure/app/composables).
+- `app/components/` for [Vue components](/docs/4.x/directory-structure/app/components).
+- `app/composables/` for [Vue composables](/docs/4.x/directory-structure/app/composables).
 - `app/utils/` for helper functions and other utilities.
 
 :link-example{to="/docs/4.x/examples/features/auto-imports"}
@@ -167,7 +167,7 @@ With this configuration:
 
 Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/components"}
+:read-more{to="/docs/4.x/directory-structure/app/components"}
 
 To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).
 

package/{2.guide/2.concepts → 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/{2.guide/2.concepts → 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({
@@ -41,8 +41,21 @@ export default defineNuxtConfig({
 Nuxt modules are now build-time-only, and the `buildModules` property used in Nuxt 2 is deprecated in favor of `modules`.
 ::
 
+## Disabling Modules
+
+You can disable a module by setting its config key to `false` in your Nuxt config. This is particularly useful when you want to disable modules inherited from layers.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  // Disable `@nuxt/image` module
+  image: false,
+})
+```
+
+:read-more{to="/docs/4.x/guide/going-further/layers#disabling-modules-from-layers"}
+
 ## Create a Nuxt Module
 
 Everyone has the opportunity to develop modules and we cannot wait to see what you will build.
 
-:read-more{to="/docs/4.x/guide/going-further/modules" title="Module Author Guide"}
+:read-more{to="/docs/4.x/guide/modules" title="Module Author Guide"}

package/{2.guide/2.concepts → 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/{2.guide/2.concepts → 3.guide/1.concepts}/8.typescript.md

@@ -27,6 +27,10 @@ To enable type-checking at build or development time, install `vue-tsc` and `typ
   bun add -D vue-tsc typescript
   ```
 
+  ```bash [deno]
+  deno add -D npm:vue-tsc npm:typescript
+  ```
+
 ::
 
 Then, run [`nuxt typecheck`](/docs/4.x/api/commands/typecheck) command to check your types:
@@ -47,12 +51,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/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 +79,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
@@ -95,7 +99,7 @@ Similarly:
 - For the `server` context, place the augmentation file in the `server/` directory.
 - For types that are **shared between the app and server**, place the file in the `shared/` directory.
 
-::read-more{to="/docs/4.x/guide/going-further/modules#extending-tsconfigjson"}
+::read-more{to="/docs/4.x/guide/modules/recipes-advanced#extend-typescript-config"}
 Read more about augmenting specific type contexts from **files outside those contexts** in the Module Author Guide.
 ::
 

package/{2.guide/5.best-practices → 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,277 @@
+---
+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
+```
+
+### Claude Desktop
+
+#### Setup Instructions
+
+1. Open Claude Desktop and navigate to "Settings" > "Developer".
+2. Click on "Edit Config". This will open the local Claude directory.
+3. Modify the `claude_desktop_config.json` file with your custom MCP server configuration.
+    ```json [claude_desktop_config.json]
+    {
+      "mcpServers": {
+        "nuxt": {
+          "command": "npx",
+          "args": [
+            "mcp-remote",
+            "https://nuxt.com/mcp"
+          ]
+        }
+      }
+    }
+    ```
+4. Restart Claude Desktop app. The Nuxt MCP server should now be registered.
+
+### 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.