I built an open-source directory website template with Nuxt 4 🚀

Source: Dev.to

Introduction

I’ve open‑sourced Nuxt Mkdirs, a directory website template built with Nuxt 4. It’s ideal for product directories, tool collections, resource lists, or navigation sites.

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

As a Vue developer, I noticed most directory templates are built with Next.js, and there was no solid Nuxt‑based alternative. This template fills that gap for the Vue/Nuxt community.

Tech Stack

• Framework: Nuxt 4 + Vue 3
• Styling: TailwindCSS 4 + Radix Vue
• CMS: Sanity (headless, no database needed)
• Auth: Auth.js (Google / GitHub OAuth)
• Payments: Stripe + Creem
• Email: Resend
• Deploy: NuxtHub (Cloudflare)

Features

• ✨ 3 Homepage Layouts – Multiple styles, ready to use
• 📦 Sanity CMS – Manage content without setting up a database
• 🔐 OAuth Login – Google and GitHub authentication
• 💳 Payment Integration – Stripe for international payments, Creem support
• 🤖 AI Integration – Supports OpenAI, DeepSeek, and Google AI
• 🌙 Dark Mode – Auto‑follows system theme
• 📱 Responsive – Works great on mobile devices
• ⚡ One‑click Deploy – Deploy to Cloudflare with NuxtHub

Installation

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