How to use Supabase with Nuxt.js?

 

Step 1: Setting Up Supabase

 

First, you'll need to create a Supabase account and set up a new project:

• Go to Supabase and sign up for a free account.
• Once logged in, create a new project by providing a name and region.
• After the project is ready, navigate to the settings and find the "API" tab to note down your Supabase URL and anon key. These will be used to securely connect your Nuxt.js application to Supabase.

 

Step 2: Setting Up Your Nuxt.js Application

 

Next, set up a new Nuxt.js project if you haven't already:

• If you don't have Vue CLI installed, start by installing it:

npm install -g @vue/cli

• Create a new Nuxt.js project:

npx create-nuxt-app supabase-nuxt-app

• Follow the prompts to set up your project preferences.

 

Step 3: Installing Supabase Client

 

With your Nuxt.js app set up, you can now add the Supabase JavaScript client:

• Navigate to your project directory:

cd supabase-nuxt-app

• Install the Supabase client:

npm install @supabase/supabase-js

 

Step 4: Configure Supabase in Your Nuxt.js Application

 

Now configure your Nuxt.js project to use the Supabase client:

• Open or create the plugin file in your Nuxt.js project. Plugins are usually stored in the plugins directory. If it doesn't exist, create it:

mkdir plugins

• Create a new file called supabase.js inside the plugins directory:

touch plugins/supabase.js

• Add the following code to plugins/supabase.js, using the credentials from your Supabase dashboard:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-supabase-url.supabase.co'
const supabaseAnonKey = 'your-anon-public-key'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

 

Step 5: Register the Supabase Plugin in Nuxt

 

To ensure the plugin is used, register it in your Nuxt configuration:

• Open nuxt.config.js and add your new plugin:

export default {
  plugins: ['~/plugins/supabase.js']
}

 

Step 6: Using Supabase in Your Nuxt.js Application

 

With everything set up, you can start using Supabase in your components.

• Test it by using the Supabase client to query your database. For example, in a component:

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.email }}</li>
    </ul>
  </div>
</template>

<script>
import { supabase } from '~/plugins/supabase.js'

export default {
  data() {
    return {
      users: []
    }
  },
  async mounted() {
    const { data: users, error } = await supabase.from('users').select('\*')
    
    if (error) console.error('Error fetching users:', error)
    else this.users = users
  }
}
</script>

 

Step 7: Running Your Nuxt.js Application

 

Finally, run your application to ensure everything is working:

• Start the development server:

npm run dev

• Visit http://localhost:3000 in your web browser to see your Supabase-powered Nuxt.js application in action.