Introduction

Checkout the Nuxt 3 documentation and Supabase to learn more.

Installation

Add @nuxtjs/supabase dev dependency to your project:

yarn add --dev @nuxtjs/supabase

npm install @nuxtjs/supabase --save-dev

Then, add @nuxtjs/supabase to the modules section of nuxt.config.js:

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  modules: ['@nuxtjs/supabase'],})

Lastly, add SUPABASE_URL and SUPABASE_KEY to the .env:

SUPABASE_URL="https://example.supabase.com"SUPABASE_KEY="<your_key>"

Options

You can configure the supabase module by using the supabase key in nuxt.config:

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  // ...  supabase: {    // Options  }}

url

• Default: process.env.SUPABASE_URL (ex: https://example.supabase.co)

The unique Supabase URL which is supplied when you create a new project in your project dashboard.

key

• Default: process.env.SUPABASE_KEY

Supabase 'anon key', used to bypass the Supabase API gateway and interact with your Supabase database making use of user JWT to apply RLS Policies.

serviceKey

• Default: process.env.SUPABASE_SERVICE_KEY

Supabase 'service role key', has super admin rights and can bypass your Row Level Security.

client

• Default: {}

Supabase client options available here.

Demo

A live demo is made for see this module in action on n3-supabase.netlify.app, read more in the demo section.

Also checkout the YouTube video about its usage in a live demo.