nuxt + supabase =梦想的技术堆栈ð
#javascript #网络开发人员 #vue #nuxt

几年前，我开始担任正式开发人员事业。然后，我在VUE 2中开发了应用程序（是的，黑暗时代：D）。我在后端开发方面没有太多的经验（或多或少，我的经验可以总结，我知道如何运行简单的Express服务器，所以不多）。

在某些时候，我意识到我需要在技术堆栈中添加一些后端知识，以便成为一般的开发人员，并让我自己轻松地构建应用程序。我开始学习node.js和express但是以一种更简单的方式。

然后，我发现了有关supabase的信息！哦，男孩，supabase基本上解决了我当时遇到的所有问题，因为它允许以简单且开发的方式直接从前端覆盖所有这些后端功能。

然后，我开始更多地潜入NUXT（尤其是最近的NUXT 3）和哦，男孩（x2），我想我找到了一堆梦ð

什么是nuxt？

如果您尚不熟悉NUXT，则它是一个框架，使您可以自信地构建下一个vue.js应用程序。 MIT许可下的开源框架，使Web开发简单而强大。

Nuxt

它带有几种装箱，如以下内容：

  • 速度和激情 - 通过代码拆分，震动，优化的冷启动，链接预取，有效载荷提取，仅举几例。默认情况下快速，因此您可以专注于构建。
  • 按需渲染 - 确定路线级别的渲染策略：SSR，SSG，CSR，ISR，ESR，SWR。构建具有优化性能的任何类型的网站或Web应用程序。
  • SEO和Web Vitals - 通过利用服务器端渲染，ESM格式和优化的图像，NUXT网站可以通过搜索引擎来索引，同时给最终用户的应用感觉。
  • 插件＆Play - 通过创建具有最直观目录结构的文件夹和文件来解锁功能。
  • 自动化 - 重复任务是自动化的：自动进象，代码拆分，打字，缩小，生产捆绑。以及更多。
  • 电池包括 - 数据获取，状态管理，元标签助手，路线警卫，饼干，错误处理，捆绑分析仪等。

和更多！

查看以下关于NUXT的射击视频：

有趣的事实 - 在此视频中，我为nuxt创建的一个模块之一 - https://nuxt-medusa.vercel.app/

因此，总而言之，您可以从开箱即用，并且可以轻松地扩展一下证明架构！

！

什么是supabase？

supabase是一种开源火箱替代品。
使用Postgres数据库，身份验证，即时API，边缘功能，实时订阅，存储和向量嵌入开始您的项目。

Supabase

  • 数据库 - 每个项目都是一个完整的Postgres数据库，是世界上最受信任的关系数据库。
  • 身份验证 - 添加用户注册和登录，使用行级别安全保护您的数据。
  • 存储 - 存储，组织并提供大文件。任何媒体，包括视频和图像。
  • 边缘功能 - 编写自定义代码而无需部署或缩放服务器。
  • 实时 - 通过共享，广播和聆听其他客户或数据库的更改来创建多人游戏体验。
  • 向量 - 将您喜欢的ML模型集成到存储，索引和搜索向量嵌入。

和更多！

查看以下视频，以获取supabase是fifeship

的简短介绍

接下来，让我们看一下如何在nuxt中使用supabase。

与supabase合作在nuxt

Nuxt Supabase

首先安装模块如下：

yarn add --dev @nuxtjs/supabase

然后，在nuxt.config.ts中的modules阵列中注册它：

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在客户端的用法，但是您也可以在基础服务器端（In nitro）上非常轻松地使用它，例如here所解释，并且如下：

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

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方面，它基本上是一种工具，它允许前端开发人员在没有广泛的后端知识的情况下非常轻松地构建Fullstack Web应用程序。

您还想要什么？

更好的是，这两个工具都是开源的，因此您可以免费使用它们，轻松托管它们，并使用整个社区模块和插件！

查看以下Abiaox＆supabase的@atinux-10ð

的demo应用

概括

就是这样！我希望在阅读这篇文章后，我提出了一些有趣的观点，可以说服您为什么我认为Nuxt＆Supabase是一个完美的技术堆栈！使用它来构建您的下一个项目，并让我知道结果！ â€