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

• Install
• Usages
• Methods

Install the package via npm:

npm i vue-3-supabase

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

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>

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>

Here the methods references from official doc:

• Auth
• Data
• Realtime
• Storage
• Modifiers
• Filters

Enjoy 👊