mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Merge pull request #15147 from supabase/docs/update-nuxt-quickstart
Docs: Update nuxt quickstart
This commit is contained in:
1 file changed
+69
-83
@@ -2,79 +2,54 @@ import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import StepHikeCompact from '~/components/StepHikeCompact'
|
||||
|
||||
export const meta = {
|
||||
title: 'Install Supabase with Nuxt.js',
|
||||
subtitle: 'Setting up supabase-js client library in a Nuxt.js app.',
|
||||
title: 'Use Supabase with NuxtJS',
|
||||
subtitle:
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NuxtJS app.',
|
||||
breadcrumb: 'Framework Quickstarts',
|
||||
}
|
||||
|
||||
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:
|
||||
|
||||
<StepHikeCompact>
|
||||
|
||||
<StepHikeCompact.Step step={1}>
|
||||
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
|
||||
|
||||
<StepHikeCompact.Details title="Create a Nuxt.js app">
|
||||
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
|
||||
|
||||
Start by creating a new Nuxt.js project if you do not have one set up:
|
||||
After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npx create-nuxt-app my-project
|
||||
cd my-project
|
||||
```
|
||||
```sql Editor
|
||||
-- Create the table
|
||||
create table countries (
|
||||
id serial primary key,
|
||||
name varchar(255) not null
|
||||
);
|
||||
|
||||
-- Insert some sample data into the table
|
||||
insert into countries (name) values ('United States');
|
||||
insert into countries (name) values ('Canada');
|
||||
insert into countries (name) values ('Mexico');
|
||||
````
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={2}>
|
||||
<StepHikeCompact.Details title="Install Supabase client library">
|
||||
|
||||
To install the `@supabase/supabase-js` package, you will need to run the following command:
|
||||
<StepHikeCompact.Details title="Create a NuxtJS app">
|
||||
|
||||
Create a Nuxt.js app using the `npx nuxi` command.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={2}>
|
||||
<StepHikeCompact.Details title="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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```text .env
|
||||
SUPABASE_URL="YOUR_SUPABASE_URL"
|
||||
SUPABASE_KEY="YOUR_SUPABASE_ANON_KEY"
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={2}>
|
||||
<StepHikeCompact.Details title="Install Supabase client library">
|
||||
|
||||
Then let's install the only additional dependency: NuxtSupabase. We only need to import NuxtSupabase as a dev dependency:
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npm install @nuxtjs/supabase --save-dev
|
||||
npx nuxi@latest init my-app
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
@@ -82,34 +57,65 @@ The fastest way to get started with supabase and Nuxt.js is to use the supabase-
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={3}>
|
||||
<StepHikeCompact.Details title="Create some sample data">
|
||||
<StepHikeCompact.Details title="Install the Supabase client library">
|
||||
|
||||
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:
|
||||
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 NuxtJS app.
|
||||
|
||||
Navigate to the NuxtJS app and install `supabase-js`.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```sql 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');
|
||||
````
|
||||
```bash Terminal
|
||||
cd my-app && npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={4}>
|
||||
<StepHikeCompact.Details title="Start your app">
|
||||
<StepHikeCompact.Details title="Query data from the app">
|
||||
|
||||
Start the dev server by running the following commands:
|
||||
In `src/App.vue`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
|
||||
|
||||
Replace the existing content in your `src/App.vue` file with the following code.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```vue src/App.vue
|
||||
<script setup>
|
||||
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
|
||||
const countries = ref([])
|
||||
|
||||
async function getCountries() {
|
||||
const { data } = await supabase.from('countries').select()
|
||||
countries.value = data
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCountries()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="country in countries" :key="country.id">{{ country.name }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={5}>
|
||||
<StepHikeCompact.Details title="Start the app">
|
||||
|
||||
Start the app, navigate to http://localhost:3000 in the browser, open the browser console, and you should see the list of countries.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
@@ -122,26 +128,6 @@ The fastest way to get started with supabase and Nuxt.js is to use the supabase-
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={5}>
|
||||
<StepHikeCompact.Details title="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:
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```js lib/supabaseClient.js
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
</StepHikeCompact>
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
|
||||
|
||||
Reference in new issue
Block a user