NuxtVue启动器

supaAuth — Nuxt 启动器模板

作者 zackha

基于 Nuxt 与 Supabase 的认证启动模板，内置登录与注册页面，用于快速搭建带邮箱密码认证的 Nuxt 项目。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

提供基于邮箱和密码的登录与注册页面

使用 Supabase Auth 作为认证后端

与 Nuxt Composition API 集成

项目结构精简、模块化，便于定制

页面在移动端和桌面端均可响应式显示

模板详细介绍

supaAuth 是一个 Nuxt + Supabase 认证启动模板，仓库描述为在 Nuxt 4 项目中通过 Supabase 认证加入登录和注册页面。模板提供基于邮箱和密码的认证流程，使用 Supabase Auth 作为认证后端，并与 Nuxt 的 Composition API 集成。项目结构保持精简和模块化，页面在移动端与桌面端均可响应式显示，便于在此基础上继续定制。

使用前需要在 Supabase 创建项目，从 Project Settings → API 获取 SUPABASE_URL 与 SUPABASE_ANON_KEY，并在项目根目录的 .env 文件中配置这两项。依赖安装与开发服务器启动使用 pnpm（pnpm install、pnpm dev）。README 提到已迁移到 Nuxt 4 并集成 Supabase JavaScript 客户端，同时提供 Vercel 与 NuxtHub 两个在线演示地址。

模板本身聚焦认证入口，未在资料中说明除登录、注册之外的业务模块、数据表结构或权限策略，这些需要使用者按自身项目补充。代码以 MIT 许可发布，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材以及 Supabase 等外部服务的费用需另行核对。

NuxtVue启动器

适合你的项目吗？

适用场景

为新的 Nuxt 全栈项目快速加入登录和注册入口
在已有 Supabase 项目上搭建前端认证界面
作为学习 Nuxt 与 Supabase 认证集成的示例代码
在模板基础上扩展个人中心或受保护页面

适合人群

使用 Nuxt 并需要邮箱密码认证的开发者
已经或计划使用 Supabase 作为后端的团队
希望从精简认证模板起步、自行扩展业务的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要先安装 Node.js 与 pnpm
2
使用 pnpm install 安装依赖，pnpm dev 启动开发服务器
3
在 Supabase 创建项目，从 Project Settings → API 获取 SUPABASE_URL 与 SUPABASE_ANON_KEY
4
在项目根目录创建 .env 文件并填入上述两个变量
5
演示图片、字体、图标等第三方素材以及 Supabase 等外部服务费用需单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

使用前必须自行在 Supabase 官网注册账号并创建项目，认证功能依赖该外部服务，无法脱离 Supabase 独立运行。
需在 Supabase 控制台获取 SUPABASE_URL 与 SUPABASE_ANON_KEY 两项凭据，属于外部服务账号与 API 密钥要求。
必须在项目根目录创建 .env 文件并填入上述 Supabase 变量，否则认证功能无法正常工作。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Create a project via [supabase.com](https://supabase.com).
README 原文

Go to **Project Settings → API** and retrieve your `SUPABASE_URL` and `SUPABASE_ANON_KEY`.
README 原文

Create a `.env` file in your project root:
README 原文

https://github.com/zackha/supaAuth/blob/main/LICENSE https://github.com/zackha/supaAuth/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 90 / 100
技术栈: Nuxt · Vue
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2025-09-08
截图检查日期: 2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 67cbec3b1c396c8da289d55d2205aa380e66177b606a55709a4bf373069cf952

2026-10-01T13:54:24.484Z

来源文件 / 仓库

# ⚡ Supabase + Nuxt 4 Authentication Starter

> A modern and secure authentication boilerplate built with the latest versions of **Nuxt 4** and **Supabase**. Provides out-of-the-box support for user registration and login functionality, ideal for rapidly initializing new full-stack projects.

## 🆕 Changelog

- Migrated to **Nuxt 4** using the new `nuxt` package
- Integrated **latest Supabase JavaScript client** (`@supabase/supabase-js`)
- Switched to **pnpm** as the preferred package manager for faster, disk-efficient installs

## 🚀 Live Demonstrations

| Deployment Platform | Live URL                                                                 |
| ------------------- | ------------------------------------------------------------------------ |
| Vercel              | [https://supaauth-nuxt4.vercel.app/](https://supaauth-nuxt4.vercel.app/) |
| NuxtHub             | [https://supaauth.nuxt.dev/](https://supaauth.nuxt.dev/)                 |

## 🖼️ UI Preview

<div align="center">
  <img src="https://user-images.githubusercontent.com/79358543/229441570-3ba48ca8-8cf3-4fd4-aac7-2cc5eac67a03.png" width="80%" />
  <br/><br/>
  <img src="https://user-images.githubusercontent.com/79358543/229441594-e7cbec31-726d-4029-96ba-d7631fd3aef5.gif" width="60%" />
</div>

## ✅ Key Features

- 🔐 Email/password-based authentication powered by **Supabase Auth**
- 💡 Seamless integration with **Nuxt 4 Composition API**
- 🧱 Minimal and modular architecture, ideal for customization and scaling
- 📱 Fully responsive design for both mobile and desktop
- 🧼 Clean, maintainable codebase with best practices in mind

## ⚙️ Project Setup

Ensure you have [Node.js](https://nodejs.org/) and [pnpm](https://pnpm.io) installed.

```bash
# Install dependencies
pnpm install

# Start the development server
pnpm dev
```

## 🔧 Supabase Configuration

1. Create a project via [supabase.com](https://supabase.com).
2. Go to **Project Settings → API** and retrieve your `SUPABASE_URL` and `SUPABASE_ANON_KEY`.
3. Create a `.env` file in your project root:

```env
SUPABASE_URL=https://your-project-id.supabase.co
SUPABASE_ANON_KEY=your-anon-key
```

## 📚 Documentation

- [Nuxt 4 Documentation](https://nuxt.com/docs)
- [Supabase Auth Documentation](https://supabase.com/docs/guides/auth)
- [Supabase Client Reference](https://supabase.com/docs/reference/javascript/introduction)

---

## 🧑‍💻 Author

**Sefa Bulak**
📫 Contact: [[email protected]](mailto:[email protected])
🐙 GitHub: [github.com/zackhatlen](https://github.com/zackhatlen)
🐦 Twitter: [@ZHatlen](https://twitter.com/ZHatlen)

---

## 📝 License

This project is released under the [MIT License](LICENSE).

反馈内容错误