Use Supabase with Vue
Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.
Create a Supabase project
Go to database.new and create a new Supabase project.
When your project is up and running, go to the Table Editor, create a new table and insert some data.
Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries
table with some sample data.
Make the data in your table publicly readable by adding an RLS policy:
Create a Vue app
Create a Vue app using the npm init
command.
Install the Supabase client library
The fastest way to get started is to use the supabase-js
client library which provides a convenient interface for working with Supabase from a Vue app.
Navigate to the Vue app and install supabase-js
.
Create the Supabase client
Create a /src/lib
directory in your Vue app, create a file called supabaseClient.js
and add the following code to initialize the Supabase client with your project URL and public API (anon) key:
Project URL
Anon key
Query data from the app
Replace the existing content in your App.vue
file with the following code.
Start the app
Start the app and go to http://localhost:5173 in a browser and you should see the list of countries.