Home

Install Supabase with Nuxt.js

Setting up supabase-js client library in a Nuxt.js app.

The fastest way to get started with supabase and Nuxt.js is to use the supabase-js client library, which provides a convenient interface for working with supabase from a Nuxt.js app. To use supabase-js with Nuxt.js, you can follow these steps:

1

Create a Nuxt.js app

Start by creating a new Nuxt.js project if you do not have one set up:

1  npx create-nuxt-app my-project
2  cd my-project
2

Install Supabase client library

To install the @supabase/supabase-js package, you will need to run the following command:

1npm install @supabase/supabase-js
2

Install Supabase client library

And finally we want to save the environment variables in a .env. All we need are the API URL and the anon key that you copied earlier.

SUPABASE_URL="YOUR_SUPABASE_URL"
SUPABASE_KEY="YOUR_SUPABASE_ANON_KEY"
2

Install Supabase client library

Then let's install the only additional dependency: NuxtSupabase. We only need to import NuxtSupabase as a dev dependency:

1npm install @nuxtjs/supabase --save-dev
3

Create some sample data

To create a table of countries with their timezones, you will first need to create a table in your Supabase database using SQL. You can use the following SQL statement to create a table called countries:

 -- this creates the table
 CREATE TABLE countries (
 id SERIAL PRIMARY KEY,
 name VARCHAR(255) NOT NULL
 );
 -- insert some sample data into new table
 INSERT INTO countries (name) VALUES ('United States');
 INSERT INTO countries (name) VALUES ('Canada');
 INSERT INTO countries (name) VALUES ('Mexico');
4

Start your app

Start the dev server by running the following commands:

1npm run dev
5

Create client in app

Next, in your Next.js app, create a file called supabase-client.js and add the following code to initialize the Supabase client and set your project's credentials:

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

  const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
Need some help?

Not to worry, our specialist engineers are here to help. Submit a support ticket through the Dashboard.