An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Engadget
- Techcrunch
- Pearsonified
- Abduzeedo
- Vandelay Design
- Inspiredology
- Web Designer Depot
- Noupe
- Line 25
- Willems Lab
Help Webnuz
Referal links:
Vue 3 Supabase.js Client
(Original repo https://github.com/DidoMarchet/vue-3-supabase)
Simple Vue 3 wrap for Supabase.js Client build with Vitejs
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 supabaseimport supabase from 'vue-3-supabase'const app = createApp(App)// Use supabaseapp.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 inject('supabase') to access the Supabase.js Client:
<template> // Your HTML Stuff</template><script setup>import { inject, onMounted } from 'vue'const supabase = inject('supabase')onMounted(async () => { const { user, session, error } = await supabase.auth.signUp({ email: '[email protected]', password: 'myawesomepassword', }) console.log(user, session, error)})</script>Methods
Here the methods references from official doc:
Enjoy
Original Link: https://dev.to/didomarchet/vue-3-supabase-js-client-18m1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To