DEV Community

Cover image for How to add Supabase to Nuxt.js

How to add Supabase to Nuxt.js

I'm a web developer who loves creating prototypes, tools, and basically anything that automates. You can talk to me about cats, dogs, coffee, books, and of course, code!
・2 min read

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.


(1) You have a Nuxt.js application created using npx create-nuxt-app or through another method
(2) 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

  • Create a file supabase.client.js
  • Add the following code snippet (replace the key, url with your own)
import { createClient } from '@supabase/supabase-js'
export default ({ app }, inject) => {
  const supabaseUrl = '<YOUR-URL>'
  const supabaseKey = SUPABASE_KEY
  const supabase = createClient(supabaseUrl, supabaseKey)

  inject('supabase', supabase)
Enter fullscreen mode Exit fullscreen mode

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
In nuxt.config.js, add the following to plugins

// ...
  plugins: [
// ...
Enter fullscreen mode Exit fullscreen mode

You can also use the alternative syntax

// ...
  plugins: [
    { src: '@/plugins/supabase.client.js', ssr: false }
// ...
Enter fullscreen mode Exit fullscreen mode

(4) Use Supabase on any page

methods: {
    const { user, error } = await this.$supabase.auth.signIn({
        password: this.password
      console.log(user, error)
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)