我用 Nuxt 4 构建了一个开源目录网站模板 🚀

Source: Dev.to

介绍

我已经开源了 Nuxt Mkdirs，一个使用 Nuxt 4 构建的目录网站模板。它非常适合产品目录、工具集合、资源列表或导航站点。

• GitHub: https://github.com/PBHAHAHA/nuxt_mkdirs
• 在线演示: https://nuxt-mkdirs.com

作为一名 Vue 开发者，我注意到大多数目录模板都是用 Next.js 构建的，缺少可靠的 Nuxt 方案。这个模板为 Vue/Nuxt 社区填补了这一空白。

技术栈

• 框架: Nuxt 4 + Vue 3
• 样式: TailwindCSS 4 + Radix Vue
• CMS: Sanity（无头，无需数据库）
• 认证: Auth.js（Google / GitHub OAuth）
• 支付: Stripe + Creem
• 邮件: Resend
• 部署: NuxtHub（Cloudflare）

功能特性

• ✨ 3 种首页布局 – 多种风格，开箱即用
• 📦 Sanity CMS – 无需搭建数据库即可管理内容
• 🔐 OAuth 登录 – 支持 Google 和 GitHub 认证
• 💳 支付集成 – 使用 Stripe 进行国际支付，支持 Creem
• 🤖 AI 集成 – 支持 OpenAI、DeepSeek 和 Google AI
• 🌙 暗黑模式 – 自动跟随系统主题
• 📱 响应式 – 在移动设备上表现出色
• ⚡ 一键部署 – 使用 NuxtHub 部署到 Cloudflare

安装

git clone https://github.com/PBHAHAHA/nuxt-mkdirs.git
cd nuxt-mkdirs
pnpm install
cp .env.example .env
pnpm dev