nuxt3-supabase#

Nuxt 3 module and composables for Supabase.

Installation#

$ yarn add nuxt3-supabase
# or
$ npm install --save nuxt3-supabase

Getting Started#

Add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  modules: ['nuxt3-supabase/module'],
  supabase: {
    supabaseUrl: process.env.SUPABASE_URL,
    supabaseKey: process.env.SUPABASE_KEY
  },
  vite: false // temporary workaround for vite build errors
});

Usage#

<script setup lang="ts">
  const { $supabase } = useNuxtApp();

  const { data, pending } = await useAsyncData('posts', () => {
    return $supabase.from('posts').select();
  });
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>{{ data }}</div>
</template>

Composables#

useSupabase#

Supabase client composable.

import { useSupabase } from 'nuxt3-supabase';

const supabase = useSupabase();

useAuth#

Supabase Auth composable.

import { useAuth } from 'nuxt3-supabase';

const { user, signIn, signOut } = useAuth();

useStorage#

Supabase Storage composable.

import { useStorage } from 'nuxt3-supabase';

const storage = useStorage();

useFrom#

Supabase Database composable.

import { useFrom } from 'nuxt3-supabase';

const from = useFrom();

useOnAuthStateChange#

Behaves similarly to onAuthStateChange but also sets/unsets auth cookie to the server.

import { useOnAuthStateChange } from 'nuxt3-supabase';

useOnAuthStateChange((event, session) => {
  console.log(event, session);
});

getServerSession#

Get the server session that was set by useOnAuthStateChange.

<script setup lang="ts">
  import { useOnAuthStateChange, getServerSession } from 'nuxt3-supabase';

  const nuxtApp = useNuxtApp();

  const { data } = await useAsyncData('user', () =>
    getServerSession(nuxtApp.ssrContext)
  );

  useOnAuthStateChange();
</script>

TIP: You can use getServerSession to check if a user is authenticated or not before route load.

TODO#

• Vite bug https://github.com/nuxt/framework/issues/718
• Composables
• API route authentication check

License#

MIT