Nuxt 4로 오픈소스 디렉터리 웹사이트 템플릿을 만들었습니다 🚀

Source: Dev.to

소개

저는 Nuxt Mkdirs 라는 디렉터리 웹사이트 템플릿을 오픈소스로 공개했습니다. Nuxt 4 로 구축되었으며 제품 디렉터리, 도구 컬렉션, 리소스 목록, 혹은 내비게이션 사이트에 이상적입니다.

• GitHub: https://github.com/PBHAHAHA/nuxt_mkdirs
• Live Demo: https://nuxt-mkdirs.com

Vue 개발자로서 대부분의 디렉터리 템플릿이 Next.js 로 만들어져 있다는 것을 알게 되었고, Vue/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