Vue 3 Supabase.js
Table of content:
Install the package via npm:
npm i vue-3-supabaseInstall
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>Methods
Here the methods references from official doc:
Enjoy