apps/ui-library/content/docs/vue/client.mdx
This block installs a Supabase client for connecting your Vue project to Supabase. It's designed for use in client-side components.
If you've already set up a Supabase client in your project, you can just continue using that existing setup.
After installing the block, you'll have the following environment variables in your .env.local file:
VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API keys.
If you're using a local instance of Supabase, you can find these values by running supabase start or supabase status (if you already have it running).
You can use the client in your Vue component like following:
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { createClient } from './lib/supabase/client'
const profile = ref(null)
onMounted(async () => {
const { data, error } = await createClient.from('profiles').select('*').single()
if (!error) profile.value = data
})
</script>
<template>
<div>
{{ profile }}
</div>
</template>