vue-3-supabase
TypeScript icon, indicating that this package has built-in type declarations

2.2.6 • Public • Published

Vue 3 Supabase.js

🍔 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>

Methods

Here the methods references from official doc:

Enjoy 👊

Readme

Keywords

Package Sidebar

Install

npm i vue-3-supabase

Weekly Downloads

2

Version

2.2.6

License

MIT

Unpacked Size

280 kB

Total Files

7

Last publish

Collaborators

  • davidemarchet