DEV Community

Pub
Pub

Posted on

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

#opensource #vue #nuxt #webdev

Hey everyone! 👋

I just open-sourced Nuxt Mkdirs - a directory website template built with Nuxt 4. It's perfect for building product directories, tool collections, resource lists, or navigation sites.

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

Why I built this

As a Vue developer, I noticed that most directory website templates out there are built with Next.js. When I wanted to create a directory site, I couldn't find a good Nuxt-based option.

So I decided to build one for the Vue/Nuxt community.

If you're a Vue developer like me and want to build a directory site without switching to React, this template is for you.

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, Creem
🤖 AI Integration - Supports OpenAI, DeepSeek, and Google AI

🌙 Dark Mode - Auto-follows system theme

📱 Responsive - Works great on mobile

⚡ One-click Deploy - Deploy to Cloudflare with NuxtHub

Quick Start 


bash
git clone [https://github.com/PBHAHAHA/nuxt-mkdirs.git](https://github.com/PBHAHAHA/nuxt-mkdirs.git)
cd nuxt-mkdirs
pnpm install
cp .env.example .env
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)