Vue-3-supabase NPM

Vue 3 Supabase.js

:hamburger: Simple Vue 3 wrap for Supabase.js Client (v2) build with Vitejs

Table of content:

Install the package via npm:

npm i vue-3-supabase

Install

It's Simple! In your main.js add the following:

import { createApp } from 'vue'
import App from './App.vue'

// Import supabase
import supabase from 'vue-3-supabase'

const app = createApp(App)

// Use supabase
app.use(supabase, {
  supabaseUrl: 'https://xxxxxxxxxxxxxxxxx.supabase.co', // actually you can use something like import.meta.env.VITE_SUPABASE_URL
  supabaseKey: 'xxxxx__xxxxx___xxxxx___xxxxx', // actually you can use something like import.meta.env.VITE_SUPABASE_KEY,
  options: {}
})

app.mount('#app')

It takes three params as argument :

supabaseUrl: the unique required Supabase URL which is supplied when you create a new project in your project dashboard.

supabaseKey: the unique required Supabase Key which is supplied when you create a new project in your project dashboard.

options: additional parameters not required

More references here

Usages

Options API

In the Option API you can use this.$supabase to access the Supabase.js Client:

<template>
  // Your HTML Stuff
</template>

<script>
export default {
  async mounted () {
    const { user, session, error } = await this.$supabase.auth.signUp({
      email: 'user@provider.com',
      password: 'myawesomepassword',
    })
    console.log(user, session, error)
  }
}
</script>

Composition API

In the Composition API you can use useSupabase() hook to access the Supabase.js Client:

<template>
  // Your HTML Stuff
</template>

<script setup>
import { onMounted } from 'vue'
import { useSupabase } from 'vue-3-supabase'

onMounted(async () => {
  const { user, session, error } = await useSupabase().auth.signUp({
    email: 'user@provider.com',
    password: 'myawesomepassword',
  })
  console.log(user, session, error)
})
</script>