Introduction

@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.


Checkout the Nuxt 3 documentation and Supabase to learn more.

For integrating Supabase with Nuxt 2, checkout supabase-community/nuxt-supabase.

Installation

Add @nuxtjs/supabase dev dependency to your project:

yarn
yarn add --dev @nuxtjs/supabase
NPM
npm install @nuxtjs/supabase --save-dev

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

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

Lastly, add SUPABASE_URL and SUPABASE_KEY to the .env:

.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:

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

url

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.

Versions

0.1.x versions are wrapped around supabase-js v1.
0.2.x versions are wrapped around supabase-js v2 (coming soon).

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.