How to Use Supabase with Vue.js

1npm install @supabase/supabase-js

1# .env.local
2VITE_SUPABASE_URL=https://your-project.supabase.co
3VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

1// src/lib/supabase.ts
2import { createClient } from '@supabase/supabase-js'
3
4const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
5const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
6
7export const supabase = createClient(supabaseUrl, supabaseAnonKey)

1// src/composables/useTodos.ts
2import { ref, onMounted } from 'vue'
3import { supabase } from '@/lib/supabase'
4
5export function useTodos() {
6  const todos = ref<any[]>([])
7  const loading = ref(true)
8  const error = ref<string | null>(null)
9
10  async function fetchTodos() {
11    loading.value = true
12    const { data, error: err } = await supabase
13      .from('todos')
14      .select('*')
15      .order('created_at', { ascending: false })
16
17    if (err) {
18      error.value = err.message
19    } else {
20      todos.value = data ?? []
21    }
22    loading.value = false
23  }
24
25  async function addTodo(task: string) {
26    const { error: err } = await supabase
27      .from('todos')
28      .insert({ task, is_complete: false })
29
30    if (err) {
31      error.value = err.message
32    } else {
33      await fetchTodos()
34    }
35  }
36
37  onMounted(fetchTodos)
38
39  return { todos, loading, error, fetchTodos, addTodo }
40}

1<script setup lang="ts">
2import { ref } from 'vue'
3import { useTodos } from '@/composables/useTodos'
4
5const { todos, loading, error, addTodo } = useTodos()
6const newTask = ref('')
7
8async function handleSubmit() {
9  if (newTask.value.trim()) {
10    await addTodo(newTask.value.trim())
11    newTask.value = ''
12  }
13}
14</script>
15
16<template>
17  <div>
18    <form @submit.prevent="handleSubmit">
19      <input v-model="newTask" placeholder="Add a task..." />
20      <button type="submit">Add</button>
21    </form>
22    <p v-if="loading">Loading...</p>
23    <p v-if="error" class="error">{{ error }}</p>
24    <ul>
25      <li v-for="todo in todos" :key="todo.id">{{ todo.task }}</li>
26    </ul>
27  </div>
28</template>

1// src/composables/useAuth.ts
2import { ref, onMounted, onUnmounted } from 'vue'
3import { supabase } from '@/lib/supabase'
4import type { User } from '@supabase/supabase-js'
5
6export function useAuth() {
7  const user = ref<User | null>(null)
8  let subscription: { unsubscribe: () => void } | null = null
9
10  onMounted(() => {
11    supabase.auth.getUser().then(({ data }) => {
12      user.value = data.user
13    })
14
15    const { data } = supabase.auth.onAuthStateChange((event, session) => {
16      user.value = session?.user ?? null
17    })
18    subscription = data.subscription
19  })
20
21  onUnmounted(() => {
22    subscription?.unsubscribe()
23  })
24
25  return { user }
26}