Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/didomarchet/vue-3-supabase
Simple Vue 3 wrap for Supabase.js Client (v2) build with Vitejs
https://github.com/didomarchet/vue-3-supabase
supabase-js vue vue3
Last synced: about 1 month ago
JSON representation
Simple Vue 3 wrap for Supabase.js Client (v2) build with Vitejs
- Host: GitHub
- URL: https://github.com/didomarchet/vue-3-supabase
- Owner: DidoMarchet
- License: mit
- Created: 2021-04-20T17:04:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-20T12:20:10.000Z (over 1 year ago)
- Last Synced: 2024-10-11T02:40:14.960Z (about 1 month ago)
- Topics: supabase-js, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 245 KB
- Stars: 33
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue 3 Supabase.js
:hamburger: Simple [Vue 3](https://github.com/vuejs/docs-next) wrap for [Supabase.js Client (v2)](https://supabase.io/docs/reference/javascript/supabase-client) build with [Vitejs](https://github.com/vitejs/vite)
### Table of content:
- [Install](#install)
- [Usages](#usages)
- [Methods](#methods)
Install the package via npm:
``` bash
npm i vue-3-supabase
```
# Install
It's Simple! In your `main.js` add the following:
``` javascript
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](https://supabase.io/docs/reference/javascript/initializing)
# Usages
### Options API
In the **Option API** you can use `this.$supabase` to access the Supabase.js Client:
``` vue
// Your HTML Stuff
export default {
async mounted () {
const { user, session, error } = await this.$supabase.auth.signUp({
email: '[email protected]',
password: 'myawesomepassword',
})
console.log(user, session, error)
}
}
```
### Composition API
In the **Composition API** you can use `useSupabase()` hook to access the Supabase.js Client:
``` vue
// Your HTML Stuff
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)
})
```
# Methods
Here the methods references from official doc:
- [Auth](https://supabase.io/docs/reference/javascript/auth-signup)
- [Data](https://supabase.io/docs/reference/javascript/select)
- [Realtime](https://supabase.io/docs/reference/javascript/subscribe)
- [Storage](https://supabase.io/docs/reference/javascript/storage-createbucket)
- [Modifiers](https://supabase.io/docs/reference/javascript/using-modifiers)
- [Filters](https://supabase.io/docs/reference/javascript/using-filters)
Enjoy :punch: