Skip to content

Commit c88dba9

Browse files
abdulbaqui17ChrisChinchillaCopilot
authored
docs: add Nuxt examples to SSR client guide (supabase#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 supabase#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>
1 parent 9fcba73 commit c88dba9

1 file changed

Lines changed: 96 additions & 0 deletions

File tree

apps/docs/content/guides/auth/server-side/creating-a-client.mdx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,29 @@ SUPABASE_URL=supabase_project_url
7979
SUPABASE_PUBLISHABLE_KEY=supabase_publishable_key
8080
```
8181

82+
</TabPanel>
83+
<TabPanel id="nuxt" label="Nuxt">
84+
85+
```bash .env
86+
NUXT_PUBLIC_SUPABASE_URL=supabase_project_url
87+
NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=supabase_publishable_key
88+
```
89+
90+
In `nuxt.config.ts`, map these public env vars into runtime config keys used by the examples below:
91+
92+
```ts nuxt.config.ts
93+
export default defineNuxtConfig({
94+
runtimeConfig: {
95+
public: {
96+
// These defaults will be overridden by NUXT_PUBLIC_SUPABASE_URL and
97+
// NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY environment variables at runtime.
98+
supabaseUrl: '',
99+
supabasePublishableKey: '',
100+
},
101+
},
102+
})
103+
```
104+
82105
</TabPanel>
83106
<TabPanel id="react-router" label="React Router">
84107

@@ -551,6 +574,79 @@ You can now use any Supabase features from your client or server code!
551574

552575
</TabPanel>
553576

577+
<TabPanel id="nuxt" label="Nuxt">
578+
579+
<Tabs
580+
scrollable
581+
size="small"
582+
type="underlined"
583+
defaultActiveId="nuxt-server"
584+
queryGroup="environment"
585+
>
586+
<TabPanel id="nuxt-server" label="Server route">
587+
588+
```ts server/api/hello.ts
589+
import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
590+
import { appendHeader, defineEventHandler, getHeader } from 'h3'
591+
592+
export default defineEventHandler(async (event) => {
593+
const config = useRuntimeConfig()
594+
595+
const supabase = createServerClient(
596+
config.public.supabaseUrl,
597+
config.public.supabasePublishableKey,
598+
{
599+
cookies: {
600+
getAll() {
601+
return parseCookieHeader(getHeader(event, 'Cookie') ?? '')
602+
},
603+
setAll(cookiesToSet) {
604+
cookiesToSet.forEach(({ name, value, options }) => {
605+
appendHeader(event, 'Set-Cookie', serializeCookieHeader(name, value, options))
606+
})
607+
},
608+
},
609+
}
610+
)
611+
612+
await supabase.auth.getUser()
613+
614+
return { ok: true }
615+
})
616+
```
617+
618+
</TabPanel>
619+
620+
<TabPanel id="nuxt-browser" label="Browser plugin">
621+
622+
```ts plugins/supabase.client.ts
623+
import { createBrowserClient } from '@supabase/ssr'
624+
625+
export default defineNuxtPlugin(() => {
626+
const config = useRuntimeConfig()
627+
628+
const supabase = createBrowserClient(
629+
config.public.supabaseUrl,
630+
config.public.supabasePublishableKey
631+
)
632+
633+
return {
634+
provide: {
635+
supabase,
636+
},
637+
}
638+
})
639+
```
640+
641+
</TabPanel>
642+
</Tabs>
643+
644+
## Congratulations
645+
646+
You can now use any Supabase features from your client or server code!
647+
648+
</TabPanel>
649+
554650
<TabPanel id="react-router" label="React Router">
555651

556652
<Tabs

0 commit comments

Comments
 (0)