在 Vue 项目里接入 Supabase 其实没那么复杂

在 Vue 项目中使用 Supabase 时，通常需要手动创建 client 实例。之后如果要在不同组件里调用，就得把它一路传递下去，或者做成全局单例，代码会显得比较繁琐。@supabase-community/vue-supabase 这个包把这一步简化了，通过一个 hook 就能直接拿到 client，不需要再重复编写初始化代码。

简单来说，它只是给 Supabase 加上了一层 Vue 封装。借助 useSupabaseClient()，可以快速调用 client，而底层仍然使用原本的 Supabase API，完全不需要额外学习成本。

一、快速接入项目

先安装这个社区包：

npm install @supabase-community/vue-supabase

接着在 .env 文件中填入项目的 URL 和 Anon Key：

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-publishable-key

初始化时，直接把环境变量传入即可：

import { useSupabaseClient } from '@supabase-community/vue-supabase'

const supabase = useSupabaseClient({
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
})

二、用它查询数据库

拿到 client 之后，后续操作和官方 JS SDK 完全一致。比如需要从 profiles 表中查询活跃用户，可以这样写：

<script setup>
import { useSupabaseClient } from '@supabase-community/vue-supabase'

const supabase = useSupabaseClient()

// 像平时一样用 .from().select()，没有任何区别
const { data, error } = await supabase
  .from('profiles')
  .select('id, name')
  .eq('active', true)
  .order('name')
</script>

使用体验比较直接的地方就在于，拿到 client 之后，所有操作逻辑都和官方 JS SDK 一样，不需要改变原来的调用习惯。

三、处理 TypeScript 的强类型问题

项目规模变大之后，如果不用 TS，维护起来会非常麻烦。Supabase 的一个优势就是能够直接根据数据库 Schema 生成类型定义，最好不要手动编写接口。

可以运行下面的命令导出类型：

npx supabase gen types typescript --project-id your-project-id --schema public > src/types/supabase.ts

生成 supabase.ts 后，在创建 client 时传入对应类型。这样调用 .from('table_name') 时，字段名就能获得自动补全；如果字段写错，编辑器也会直接标红，省去频繁去数据库核对字段名的时间。