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>
This commit is contained in:
authored and GitHub committed 2026-05-19 07:57:45 +00:00
1 parent 9fcba73a7c
commit c88dba9628
1 file changed
+96
@@ -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