How to add Supabase to Nuxt.js

Yesterday, I tried Supabase for the first time. Within about 30 minutes, I had social login and password-based authentication set up. There was almost zero friction during the whole process and I was super impressed, especially after my horrible developer experience with AWS Cognito and Amplify Auth.

This is a quick guide on how you can add Supabase to a Nuxt.js application.

Prerequisites

You have a Nuxt.js application created using npx create-nuxt-app or through another method
You have created a Supabase project and the Supabase key, Supabase URL

How to add Supabase to Nuxt

(1) Install Supabase

yarn add @supabase/supabase-js

(2) Add Supabase to plugins In the plugins folder

In a new file, supabase.client.js

supabase.client.js

import { createClient } from '@supabase/supabase-js'
const SUPABASE_KEY = '<YOUR-KEY>'
export default ({ app }, inject) => {
  const supabaseUrl = '<YOUR-URL>'
  const supabaseKey = SUPABASE_KEY
  const supabase = createClient(supabaseUrl, supabaseKey)
  inject('supabase', supabase)
}

This will inject Supabase to our Nuxt project, and will be available as this.$supabase for us to use

(3) Add the plugins file to nuxt.config.js

nuxt.config.js

// ...
  plugins: [
    '@/plugins/supabase.client.js'
  ],
// ...

You can also use the alternative syntax

nuxt.config.js

// ...
  plugins: [
    { src: '@/plugins/supabase.client.js', ssr: false }
  ],
// ...

(4) Use Supabase on any page

home.vue

//...
methods: {
  signIn(){
    const { user, error } = await this.$supabase.auth.signIn({
        email: this.email,
        password: this.password
      })
      console.log(user, error)
  }
}
//...

That's it!

I'm really excited to see where @supabase_io goes in the coming weeks and months! I hope it keeps growing and adding more useful features.

Saunved

How to add Supabase to Nuxt.js

Prerequisites

How to add Supabase to Nuxt