@supabase-community/vue-supabase

@supabase-community/vue-supabase

This package provides a typed wrapper around the official Supabase JavaScript client for Vue 3 applications. It keeps the API close to the official SDK so you can use supabase.auth, supabase.from, and other features directly.

This package is aimed to work with modern Vue 3. To use it with Vue 2, check out https://github.com/supabase-community/vue-supabase/tree/v2.3.0

Features

• Vue 3 composable useSupabaseClient
• Authentication support
• Use supabase-js isomorphic client
• TypeScript support

Getting started

1. Install the plugin

npm install @supabase-community/vue-supabase

2. Add required environment variables:

# .env
VITE_SUPABASE_URL="https://example.supabase.co"
VITE_SUPABASE_ANON_KEY="<your_publishable_key>"

3. Register a client:

// main.ts
import { useSupabaseClient } from "@supabase-community/vue-supabase";

const supabase = useSupabaseClient({
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
});

4. Use the client in your Vue app

// App.vue
<script setup lang="ts">
import { useSupabaseClient } from "@supabase-community/vue-supabase";

const supabase = useSupabaseClient();
const { data, error } = await supabase.from("profiles").select("*");
</script>

<template>
  <ul>
    <li v-for="profile in data" :key="profile.id">
      {{ profile }}
    </li>
  </ul>
</template>

And that's it! You are good to go!

Advanced

This section covers a few common advanced patterns that work naturally with the composable.

Realtime

Realtime subscriptions work directly through the Supabase client, so you can react to database changes in your Vue app.

const supabase = useSupabaseClient();

const channel = supabase.channel("profiles-updates");

channel
  .on(
    "postgres_changes",
    { event: "*", schema: "public", table: "profiles" },
    payload => {
      console.log("Change received:", payload);
    }
  )
  .subscribe();

TypeScript

You can either define your own local types or generate them from your Supabase project with the CLI. The generated types are especially useful when your schema evolves over time.

Local type registration:

import { useSupabaseClient } from "@supabase-community/vue-supabase";

interface Database {
  public: {
    Tables: {
      profiles: {
        Row: { id: string; name: string | null };
        Insert: { id?: string; name?: string | null };
        Update: { name?: string | null };
        Relationships: [];
      };
    };
  };
}

const supabase = useSupabaseClient<Database>({
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
});

Generate types from the Supabase CLI:

npx supabase login
npx supabase gen types typescript --project-id <project-id> --schema public > src/types/supabase.ts

Then use the generated types in your app:

import { useSupabaseClient } from "@supabase-community/vue-supabase";
import type { Database } from "./types/supabase";

const supabase = useSupabaseClient<Database>({
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
});

Auth

Auth stays close to the official Supabase client API and works the same way as in the core SDK.

const supabase = useSupabaseClient();

await supabase.auth.signInWithPassword({
  email: "user@example.com",
  password: "password",
});

Development

1. Clone this repository.
2. Install dependencies using npm install.
3. Build the package using npm run build.
4. Launch the playground using npm run dev.

License

MIT License