vue-3-supabase
v2.2.6
Published
Simple Vue 3 wrap for Supabase.js Client (v2) build with Vitejs
Downloads
248
Readme
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: '[email protected]',
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: '[email protected]',
password: 'myawesomepassword',
})
console.log(user, session, error)
})
</script>
Methods
Here the methods references from official doc:
Enjoy :punch: