useSupabaseClient


Auto-import your client inside your vue files.

This composable is using supabase-js under the hood, it gives acces to the Supabase client.

The client is initialized with the SUPABASE_KEY you must have in your .env file. It establishes the connection with the database and make use of user JWT to apply RLS Policies implemented in Supabase. If you want to bypass policies, you can use the serverSupabaseServiceRole.

pages/index.vue
<script setup>const client = useSupabaseClient()// Example: client.from('librairies').eq('name', 'Vue').single()</script>

Authentification

All authentification methods are available on Supabase Auth Documentation.

Here is an example of the login using the signIn method with third-party providers.

pages/login.vue
<script setup lang="ts">const user = useSupabaseUser()const client = useSupabaseClient()const router = useRouter()// Login method using providersconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => {  const { error } = await client.auth.signIn({ provider })  if (error) {    return alert('Something went wrong !')  }  router.push('/dashboard')}</script><template>  <button @click="login('github')">Login with GitHub</button></template>
Thanks to the Nuxt plugin, we are listening to the onAuthStateChange listener in order to update the user value according to the received event. We also keep the session consistency between client and server side.

Take a look at the auth middleware section to learn how to leverage Nuxt middleware to protect your routes for unauthenticated users.

Database Request

Please check Supabase documentation to fully use the power of Supabase client.

Here is an example of a fetch using the select method with Nuxt 3 useAsyncData composable.

<script setup lang="ts">const client = useSupabaseClient()const { data: restaurant } = await useAsyncData('restaurant', async () => {  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()  return data})</script>

Realtime

Based on Supabase Realtime, listen to changes in your PostgreSQL Database and broadcasts them over WebSockets.

To enable it, make sure you have turned on the Real Time API for your table.

Then, listen to changes directly in your vue page / component:

<script setup lang="ts">import type { RealtimeSubscription } from '@supabase/supabase-js'const client = useSupabaseClient()let subscription: RealtimeSubscription// Fetch collaborators and get the refresh method provided by useAsyncDataconst { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {  const { data } = await client.from('collaborators').select('name')  return data})// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving eventonMounted(() => {  subscription = client.from('collaborators').on('*', () => {    refreshCollaborators()  }).subscribe()})// Don't forget to unsubscribe when user left the pageonUnmounted(() => {  client.removeSubscription(subscription)})</script>