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:

Create a Nuxt.js app

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

Terminal

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

Install Supabase client library

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

Terminal

npm install @supabase/supabase-js

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.

.env

SUPABASE_URL="YOUR_SUPABASE_URL"
SUPABASE_KEY="YOUR_SUPABASE_ANON_KEY"

Install Supabase client library

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

Terminal

npm install @nuxtjs/supabase --save-dev

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:

SQL_EDITOR

 -- 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');

Start your app

Start the dev server by running the following commands:

Terminal

npm run dev

Create client in app

Next, in your Nuxt.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:

lib/supabaseClient.js

  import { createClient } from '@supabase/supabase-js'
  const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

Edit this page on GitHub