From c88dba962895502cd555668b12609bf17f459ecb Mon Sep 17 00:00:00 2001
From: abdul <150225239+abdulbaqui17@users.noreply.github.com>
Date: Tue, 19 May 2026 13:27:45 +0530
Subject: [PATCH] docs: add Nuxt examples to SSR client guide (#43944)

## What kind of change does this PR introduce?

Documentation update.

## What is the current behavior?

The server-side auth client guide currently includes framework examples
for Next.js, SvelteKit, Astro, Remix, React Router, Express, and Hono,
but not Nuxt.

## What is the new behavior?

- Adds a Nuxt env var tab in the setup section.
- Adds a Nuxt framework section in the create-client guide with:
- A server route example using `createServerClient` with cookie
adapters.
  - A browser plugin example using `createBrowserClient`.

## Additional context

Closes #34283

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Documentation**
* Added comprehensive Nuxt server-side rendering guide for creating
Supabase clients with cookie support, including environment variable
configuration setup and implementation examples for both server and
browser environments.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/43944?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../auth/server-side/creating-a-client.mdx    | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
index a98ce79fa25..294d672d068 100644
--- a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
+++ b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
@@ -79,6 +79,29 @@ SUPABASE_URL=supabase_project_url
 SUPABASE_PUBLISHABLE_KEY=supabase_publishable_key
 ```
 
+</TabPanel>
+<TabPanel id="nuxt" label="Nuxt">
+
+```bash .env
+NUXT_PUBLIC_SUPABASE_URL=supabase_project_url
+NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=supabase_publishable_key
+```
+
+In `nuxt.config.ts`, map these public env vars into runtime config keys used by the examples below:
+
+```ts nuxt.config.ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      // These defaults will be overridden by NUXT_PUBLIC_SUPABASE_URL and
+      // NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY environment variables at runtime.
+      supabaseUrl: '',
+      supabasePublishableKey: '',
+    },
+  },
+})
+```
+
 </TabPanel>
 <TabPanel id="react-router" label="React Router">
 
@@ -551,6 +574,79 @@ You can now use any Supabase features from your client or server code!
 
 </TabPanel>
 
+<TabPanel id="nuxt" label="Nuxt">
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="nuxt-server"
+  queryGroup="environment"
+>
+<TabPanel id="nuxt-server" label="Server route">
+
+```ts server/api/hello.ts
+import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
+import { appendHeader, defineEventHandler, getHeader } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const supabase = createServerClient(
+    config.public.supabaseUrl,
+    config.public.supabasePublishableKey,
+    {
+      cookies: {
+        getAll() {
+          return parseCookieHeader(getHeader(event, 'Cookie') ?? '')
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            appendHeader(event, 'Set-Cookie', serializeCookieHeader(name, value, options))
+          })
+        },
+      },
+    }
+  )
+
+  await supabase.auth.getUser()
+
+  return { ok: true }
+})
+```
+
+</TabPanel>
+
+<TabPanel id="nuxt-browser" label="Browser plugin">
+
+```ts plugins/supabase.client.ts
+import { createBrowserClient } from '@supabase/ssr'
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig()
+
+  const supabase = createBrowserClient(
+    config.public.supabaseUrl,
+    config.public.supabasePublishableKey
+  )
+
+  return {
+    provide: {
+      supabase,
+    },
+  }
+})
+```
+
+</TabPanel>
+</Tabs>
+
+## Congratulations
+
+You can now use any Supabase features from your client or server code!
+
+</TabPanel>
+
 <TabPanel id="react-router" label="React Router">
 
 <Tabs