diff --git a/website/src/content/docs/integrations/integration-with-nuxt.mdx b/website/src/content/docs/integrations/integration-with-nuxt.mdx
new file mode 100644
index 0000000000..171e944c49
--- /dev/null
+++ b/website/src/content/docs/integrations/integration-with-nuxt.mdx
@@ -0,0 +1,139 @@
+---
+description:
+ Integrate GraphQL Yoga with Nuxt 4 to build powerful, type-safe GraphQL APIs with a modern
+ developer experience and built-in Apollo Sandbox interface.
+---
+
+# Integration with Nuxt 4
+
+[GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) is a fully-featured GraphQL server with focus on easy setup, performance and great developer experience. This guide shows how to integrate GraphQL Yoga with Nuxt 4 to create powerful backend APIs for your Nuxt applications.
+
+## Installation
+
+```sh npm2yarn
+npm i graphql-yoga graphql
+```
+
+## Server Setup
+
+Create the necessary server files to integrate GraphQL Yoga with Nuxt's Nitro server:
+
+```ts
+// server/services/index.ts
+import { createSchema } from 'graphql-yoga'
+
+export const schema = createSchema({
+ typeDefs: /* GraphQL */ `
+ type Query {
+ hello: String
+ ping: String
+ }
+ `,
+ resolvers: {
+ Query: {
+ hello: () => 'world',
+ ping: () => 'pong',
+ },
+ },
+})
+```
+
+```ts
+// server/plugins/yoga.ts
+import { createYoga } from 'graphql-yoga'
+import { defineEventHandler, sendWebResponse, toWebRequest } from 'h3'
+import { schema } from '../services'
+
+const routePath = '/api/graphql'
+const healthCheckPath = '/api/graphql/health'
+
+const yoga = createYoga({
+ graphqlEndpoint: routePath,
+ healthCheckEndpoint: healthCheckPath,
+ schema: schema,
+})
+
+export default defineNitroPlugin((nitroApp) => {
+ nitroApp.router.use(routePath, defineEventHandler(async (event) => {
+ const response = await yoga.fetch(toWebRequest(event))
+ return sendWebResponse(event, response)
+ }))
+
+ nitroApp.router.use(healthCheckPath, defineEventHandler(async () => {
+ return { status: 'ok' }
+ }))
+})
+```
+
+> You can check the complete example in the GitHub repository
+> [here](https://github.com/productdevbook/nuxt-4-graphql-yoga)
+
+## Usage
+
+Once your server is running, you can access the Apollo Sandbox by navigating to `/api/graphql` and test your API with a simple query:
+
+```graphql
+query {
+ hello
+ ping
+}
+```
+
+## Features
+
+- โก Quick integration with Nuxt 4's Nitro server
+- ๐งช Interactive Apollo Sandbox for testing queries
+- ๐ Hot Module Replacement during development
+- ๐ Type-safe schema definition and resolvers
+- ๐ก๏ธ Health check endpoint at `/api/graphql/health`
+
+## Advanced Configuration
+
+### Custom Sandbox UI
+
+You can customize the Apollo Sandbox interface by modifying the `renderGraphiQL` function:
+
+```ts
+renderGraphiQL: () => {
+ return `
+
+
+
+
+
+
+
+ `
+}
+```
+
+### Adding Authentication
+
+You can easily add authentication to your GraphQL API by accessing the Nuxt event context:
+
+```ts
+const yoga = createYoga<{
+ event?: H3Event