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

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.

redirect

Default: false

Supabase redirect options.

  • login: User will be redirected to this path if not authenticated or after logout.
  • callback: This is the path the user will be redirect to after supabase login redirection. Should match configured redirectTo option of your signIn method.

You can disable all redirects by setting this option to false.

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.

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.