Framework guides

Use Da8a with Vue and Nuxt

supabase-js runs in any Vue or Nuxt app. Create one client, share it with a composable, and let Row Level Security decide what each user can see.

Start a projectAll guides

Before you start

  • A Da8a project (the Overview page shows the project URL and anon key)
  • A table to query; the quickstart creates a todos table with Row Level Security

Install the client

shell
$ npm i @supabase/supabase-js

Create the client

composables/useDb.ts
import { createClient } from '@supabase/supabase-js'
const client = createClient(
  import.meta.env.VITE_SUPABASE_URL,   // Nuxt: useRuntimeConfig().public
  import.meta.env.VITE_SUPABASE_ANON_KEY,
)
export const useDb = () => client

The anon key is safe in client code as long as Row Level Security is on for your tables. Never ship the service key to the browser: it bypasses RLS.

Realtime in a component

TodoList.vue (script setup)
const db = useDb()
onMounted(() => {
  db.channel('todos')
    .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, load)
    .subscribe()
})

Host it

Deploy the frontend on Chapong and link it to the project: the URL, anon key and auth redirect URLs are kept in sync for you, including on preview deploys.

Questions

Does it work with Nuxt SSR?

Yes. Create the client from runtimeConfig.public values so it works on server and client.

Updated 2026-10-23.

Start a project