Docs
Supabase Client Libraries

Supabase Client Libraries

Supabase client for Vue Single Page Applications

Installation

Open in

Folder structure

  • lib
    • supabase
1/// <reference types="vite/types/importMeta.d.ts" />
2import { createClient as createSupabaseClient } from '@supabase/supabase-js'
3
4export function createClient() {
5  return createSupabaseClient(
6    import.meta.env.VITE_SUPABASE_URL!,
7    import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!
8  )
9}

Usage

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.

Getting started

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>

Further reading