The latest articles on Forem by Pub (@bing_pu_53451a26d911e5d2c). https://forem.com/bing_pu_53451a26d911e5d2c https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2948783%2Fb3d9db25-7aa2-4325-86a8-6d783943a626.png https://forem.com/bing_pu_53451a26d911e5d2c en Pub Thu, 11 Dec 2025 14:03:06 +0000 https://forem.com/bing_pu_53451a26d911e5d2c/i-built-an-open-source-directory-website-template-with-nuxt-4-2eih https://forem.com/bing_pu_53451a26d911e5d2c/i-built-an-open-source-directory-website-template-with-nuxt-4-2eih <p>Hey everyone! 👋</p> <p>I just open-sourced <strong>Nuxt Mkdirs</strong> - a directory website template built with Nuxt 4. It's perfect for building product directories, tool collections, resource lists, or navigation sites.</p> <p>🔗 <strong>GitHub</strong>: <a href="https://github.com/PBHAHAHA/nuxt_mkdirs" rel="noopener noreferrer">https://github.com/PBHAHAHA/nuxt_mkdirs</a><br> 🌐 <strong>Live Demo</strong>: <a href="https://nuxt-mkdirs.com" rel="noopener noreferrer">https://nuxt-mkdirs.com</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x7ldrat7a2ddlpry0tt.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x7ldrat7a2ddlpry0tt.png" alt=" " width="800" height="379"></a></p> <h2> Why I built this </h2> <p>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.</p> <p>So I decided to build one for the Vue/Nuxt community.</p> <p>If you're a Vue developer like me and want to build a directory site without switching to React, this template is for you.</p> <h2> Tech Stack </h2> <ul> <li> <strong>Framework</strong>: Nuxt 4 + Vue 3</li> <li> <strong>Styling</strong>: TailwindCSS 4 + Radix Vue</li> <li> <strong>CMS</strong>: Sanity (headless, no database needed)</li> <li> <strong>Auth</strong>: Auth.js (Google / GitHub OAuth)</li> <li> <strong>Payments</strong>: Stripe + Creem</li> <li> <strong>Email</strong>: Resend</li> <li> <strong>Deploy</strong>: NuxtHub (Cloudflare)</li> </ul> <h2> Features </h2> <p>✨ <strong>3 Homepage Layouts</strong> - Multiple styles, ready to use</p> <p>📦 <strong>Sanity CMS</strong> - Manage content without setting up a database</p> <p>🔐 <strong>OAuth Login</strong> - Google and GitHub authentication</p> <p>💳 <strong>Payment Integration</strong> - Stripe for international, Creem <br> 🤖 <strong>AI Integration</strong> - Supports OpenAI, DeepSeek, and Google AI</p> <p>🌙 <strong>Dark Mode</strong> - Auto-follows system theme</p> <p>📱 <strong>Responsive</strong> - Works great on mobile</p> <p>⚡ <strong>One-click Deploy</strong> - Deploy to Cloudflare with NuxtHub</p> <h2> Quick Start </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> 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 </code></pre> </div> opensource vue nuxt webdev