mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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 --> [](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:
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
|
||||
|
||||
Reference in new issue
Block a user