Nuxt + Supabase = 梦寐以求的技术栈🚀

几年前，我正式开始了我的开发者生涯，当时我是一名前端开发者。那时，我用的是 Vue 2 开发应用程序（没错，是黑暗时代 :D）。我对后端开发并没有太多经验（或者说，我的经验可以概括为知道如何运行一个简单的 Express 服务器，仅此而已）。

在某个阶段，我意识到我需要在我的技术栈中添加一些后端知识，才能成为一名更优秀的开发者，并能够轻松地独立构建应用程序。我开始学习 Node.js 和 Express，但需要掌握的知识点太多了，例如数据库、身份验证、缓存、文件存储、托管等等，所以我决定放弃，转而寻找更简便的解决方案来实现这些功能。

后来，我发现了Supabase！天哪，Supabase 基本上解决了当时我遇到的所有问题，因为它允许以一种简单且对开发者友好的方式直接从前端控制所有这些后端功能。

然后，我开始深入研究 Nuxt（尤其是最新的 Nuxt 3），哦天哪（x2），我觉得我找到了一堆梦想🎉

Nuxt是什么？

如果您还不熟悉 Nuxt，它是一个框架，可让您自信地构建下一个 Vue.js 应用程序。Nuxt 是一个采用 MIT 许可证的开源框架，它使 Web 开发变得简单而强大。

包装盒内附赠以下几样好东西：

• 速度飞快——经过代码分割、摇树优化、优化冷启动、链接预取、有效载荷提取等诸多优化。默认速度就很快，让您可以专注于构建。
• 按需渲染- 在路由级别决定渲染策略：SSR、SSG、CSR、ISR、ESR、SWR。构建任何类型的网站或 Web 应用程序时，都应以优化性能为目标。
• SEO 和 Web 指标- 通过利用服务器端渲染、ESM 格式和优化图像，Nuxt 网站可以被搜索引擎索引，同时给最终用户带来应用程序的感觉。
• 即插即用- 通过创建文件夹和文件来解锁功能，其目录结构采用最直观的方式，专为开发人员和团队而设计。
• 自动化——重复性任务实现自动化：自动导入、代码分割、类型定义、代码压缩、生产环境打包等等。
• 内置电池- 数据获取、状态管理、元标签助手、路由保护、cookie、错误处理、捆绑包分析器等等。

还有更多！

请观看 Fireship 制作的关于 Nuxt 的以下视频：

有趣的是，这段视频中展示了我为 Nuxt 创建的一个模块——https ://nuxt-medusa.vercel.app/

总而言之，这款产品开箱即用，拥有许多令人惊叹的功能，并且架构面向未来，可以轻松扩展！

Supabase是什么？

Supabase 是一个开源的 Firebase 替代方案。您
可以利用 Postgres 数据库、身份验证、即时 API、边缘函数、实时订阅、存储和向量嵌入等功能快速启动您的项目。

• 数据库- 每个项目都是一个完整的 Postgres 数据库，Postgres 是世界上最值得信赖的关系型数据库。
• 身份验证- 添加用户注册和登录，使用行级安全性保护您的数据。
• 存储- 存储、整理和提供大型文件。支持任何媒体格式，包括视频和图像。
• 边缘函数- 无需部署或扩展服务器即可编写自定义代码。
• 实时- 通过共享、广播和监听来自其他客户端或数据库的更改来创建多人游戏体验。
• Vector - 集成您最喜欢的机器学习模型，以存储、索引和搜索向量嵌入。

还有更多！

请观看以下由 Fireship 制作的视频，简要了解 Supabase 是什么。

接下来，我们来看看如何在 Nuxt 中使用 Supabase。

在 Nuxt 中使用 Supabase

首先按如下步骤安装模块：

yarn add --dev @nuxtjs/supabase

然后，将其注册到modules数组中nuxt.config.ts：

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})

接下来，添加所需的环境变量：

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

就这样！现在你可以像下面这样开始使用该模块了：

<script setup lang="ts">
const client = useSupabaseClient()
const { data: restaurant } = await useAsyncData('restaurant', async () => {
  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()
  return data
})
</script>

以上示例展示了 Supabase 在客户端的用法，但您也可以像这里和下面解释的那样，非常轻松地在底层服务器端（在 Nitro 中）使用它：

首先，我们创建一个新的服务器端点。

import { serverSupabaseClient } from '#supabase/server'
export default eventHandler(async (event) => {
  const client = serverSupabaseClient(event)
  const { data } = await client.from('libraries').select()
  return { libraries: data }
})

然后，只需从前端调用此端点即可：

const fetchLibrary = async () => {
  const { libraries } = await $fetch('/api/libraries')
}

如上所示，在客户端和服务端，您都可以非常轻松地在 Nuxt 中使用 Supabase！

为什么说 Nuxt + Supabase 是梦想的组合？

Nuxt 提供了一个框架，让您能够轻松开发各种类型的 Web 应用程序。借助 Nitro 预设，您可以轻松地将应用程序托管到所有主流托管服务商，例如 Netlify、Vercel 和 Heroku 等。它还包含您可能需要的所有实用功能。目前，它是我构建新项目的首选工具。

Supabase 本质上是一个工具，它允许前端开发人员无需掌握大量的后端知识即可轻松构建全栈 Web 应用程序。

你还想要什么？

更棒的是，这两个工具都是开源的，所以你可以免费使用它们，轻松托管它们，并利用大量的社区模块和插件！

来看看@atinux制作的 Nuxt 和 Supabase 的以下演示应用程序吧🚀

概括

就是这样！希望读完这篇文章后，我能提出一些有趣的观点，让您相信我为什么认为 Nuxt 和 Supabase 是梦寐以求的完美技术栈！用它们来构建您的下一个项目，然后告诉我结果如何！⚡️