快速开始

在Nuxt中使用Supabase

学习如何创建Supabase项目，向数据库添加示例数据，以及从Nuxt应用中查询数据。

1

创建一个Supabase项目

前往 database.new 并创建一个新的Supabase项目。

当您的项目启动并运行后，前往 表编辑器，创建一个新表并插入一些数据。

或者，您可以在项目的 SQL编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。

1
2
3
4
5
6
7
8
9
10
11
12
13
-- 创建表create table instruments (  id bigint primary key generated always as identity,  name text not null);-- 向表中插入一些示例数据insert into instruments (name)values  ('violin'),  ('viola'),  ('cello');alter table instruments enable row level security;

通过添加RLS策略，使表中的数据可公开读取：

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);
2

创建 Nuxt 应用

使用 npx nuxi 命令创建一个 Nuxt 应用。

Terminal
1
npx nuxi@latest init my-app
3

安装 Supabase 客户端库

最快捷的方式是使用 supabase-js 客户端库，它为 Nuxt 应用提供了便捷的 Supabase 操作接口。

进入 Nuxt 应用目录并安装 supabase-js。

Terminal
1
cd my-app && npm install @supabase/supabase-js
4

声明 Supabase 环境变量

创建 .env 文件并填入您的 Supabase 连接变量：

Project URL
Anon key
1
2
SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>
5

从应用查询数据

在 app.vue 中，使用您的配置值创建一个 Supabase 客户端，并将现有内容替换为以下代码。

app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup>import { createClient } from '@supabase/supabase-js'const config = useRuntimeConfig()const supabase = createClient(config.public.supabaseUrl, config.public.supabaseAnonKey)const instruments = ref([])async function getInstruments() {  const { data } = await supabase.from('instruments').select()  instruments.value = data}onMounted(() => {  getInstruments()})</script><template>  <ul>    <li v-for="instrument in instruments" :key="instrument.id">{{ instrument.name }}</li>  </ul></template>
6

启动应用

启动应用，在浏览器中访问 http://localhost:3000，打开浏览器控制台，您应该能看到乐器列表。

Terminal
1
npm run dev