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:
1 npx create-nuxt-app my-project 2 cd my-project
Install Supabase client library
To install the @supabase/supabase-js
package, you will need to run the following command:
1npm 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.
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:
1npm 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:
-- 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:
1npm run dev
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')