Content is managed by the Sanity headless CMS, with no self-hosted database required
NuxtVueBlogDirectory site
Nuxt_Mkdirs — Nuxt Blog Template
By PBHAHAHA
An open-source directory site template built on Nuxt and Sanity CMS, offering three homepage layouts, OAuth login, Stripe/Creem payments, Resend email, and AI auto-fill, under the MIT license.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-09-30View source
What stands out
A quick read of the recorded project description.
Offers three homepage layouts, with built-in dark mode and responsive adaptation
Supports Google and GitHub OAuth login
Integrates two payment channels: Stripe and Creem
Optional AI auto-fill extracts website information and suggests categories and tags on submission
Uses Resend to send transactional emails and supports newsletter subscriptions
Template Details
Nuxt_Mkdirs is an open-source directory website template built with Nuxt, with content data managed by the Sanity headless CMS and no self-hosted database required. The template provides three homepage layouts and includes Google / GitHub OAuth login, two payment channels (Stripe and Creem), Resend transactional email and newsletter subscriptions, plus an optional AI auto-fill feature (when submitting a site, it automatically extracts the name and description, generates an introduction, downloads and uploads the logo image, and suggests categories and tags). Styling is based on TailwindCSS and Radix Vue, with dark mode and responsive layout support. Deployment targets NuxtHub and Cloudflare Workers; the README states that the NuxtHub Admin deployment method is deprecated and Wrangler should be used instead.
Before use, you need to prepare several external services yourself: a Sanity project ID, dataset, and API token; a Resend API key, sending domain, and Audience ID; Stripe or Creem keys and webhook secrets; Google / GitHub OAuth credentials and an Auth Secret. AI auto-fill is optional and requires configuring an API key for one of google, deepseek, or openai. The repository is released under the MIT license, allowing free use, modification, commercial use, and distribution of the code, but third-party assets such as demo images, fonts, and icons must be checked against their respective licenses, and external services such as domain, hosting, database, payment, or AI may incur separate charges.
NuxtVueBlogDirectory site
Is it right for your project?
Use Cases
- Building a directory site that lists websites, tools, or services
- Adding a paid submission or membership upgrade flow to a directory site
- Using Sanity as a content backend to operate directory entries and a blog
- Deploying to Cloudflare Workers to host the frontend and APIs
Suitable For
- Frontend developers familiar with Nuxt and Vue
- Content-oriented projects willing to use Sanity as a CMS
- Directory-type sites that need OAuth login and payment capabilities
- Teams planning to deploy to Cloudflare Workers
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 18+ and pnpm 8+; after cloning the repository, run pnpm install and copy .env.example to .env
- 2
Create a project in Sanity and obtain the Project ID, dataset, and an API Token with Editor permissions, and configure CORS origins
- 3
Configure environment variables such as Resend, Stripe or Creem, Google / GitHub OAuth, and Auth Secret as needed
- 4
AI auto-fill is optional; choose among google, deepseek, or openai and enter the corresponding API key
- 5
Deploy with Wrangler: copy wrangler.example.jsonc to wrangler.jsonc, fill in the variables, then run pnpm build and npx wrangler deploy
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Before use, you must register a Sanity account and create a project to obtain a Project ID, dataset, and an API Token with Editor permissions; otherwise, content management features will not run.
- Email and newsletter features depend on a Resend account; you need to verify the sending domain and configure the API key and Audience ID, which is an external service that may charge fees.
- Payment features require applying for a Stripe account yourself and configuring keys and webhook secrets; Stripe charges per transaction.
- The Creem payment channel requires registering a Creem account and configuring the API key, webhook secret, and product ID, and is an external service.
- OAuth login requires creating applications in Google Cloud Console and GitHub respectively and configuring client IDs and secrets.
- AI auto-fill is optional; enabling it requires your own API key for google, deepseek, or openai, and may incur usage fees.
- Deployment requires switching to Wrangler and configuring Cloudflare Workers environment variables; hosting and domains may incur fees.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domain, hosting, database, payment, or AI may incur separate charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Create a [Sanity account](https://www.sanity.io/signup)
Original README
Create a [Resend account](https://resend.com/)
Original README
NUXT_STRIPE_SECRET_KEY=sk_xxxxx
Original README
[Creem](https://creem.io/) supports registration with Chinese ID
Original README
NUXT_AUTH_GOOGLE_CLIENT_ID=xxxxx
Original README
# Choose AI provider: google, deepseek, openai
Original README
https://github.com/PBHAHAHA/Nuxt_Mkdirs/blob/main/LICENSEhttps://github.com/PBHAHAHA/Nuxt_Mkdirs/blob/main/README.mdNuxtHub Admin deployment will be deprecated on December 31, 2024. Please use Wrangler for deployment.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 92 / 100
- Technologies
- Nuxt · Vue
- Website type
- Blog · Directory site
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2025-12-20
- Screenshot last checked
- 2026-10-01
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 4b29509b67be469b6179975000c82eaa5373bdc330b910612b2a28c33bf1b414
2026-10-01T14:37:20.562Z
Source file / repository<div align="center"> <img src="./public/logo.png" alt="Nuxt Mkdirs" width="120" /> # Nuxt Mkdirs **Open-source directory website template built with Nuxt 4** [](https://nuxt.com) [](https://vuejs.org) [](https://tailwindcss.com) [](LICENSE) [English](./README.md) | [简体中文](./README.zh-CN.md) [Live Demo](https://demo.nuxt-mkdirs.com) · [Documentation](#-configuration-guide) · [Report Bug](https://github.com/PBHAHAHA/Nuxt_Mkdirs/issues) </div> --- ## ✨ Features - 🎨 **3 Homepage Layouts** - Multiple styles, ready to use out of the box - 📦 **Sanity CMS** - Headless CMS, no database configuration needed - 🔐 **Multiple Auth Methods** - Google / GitHub OAuth login - 💳 **Payment Integration** - Supports Stripe and Creem - 📧 **Email Service** - Resend for transactional emails + Newsletter - 🤖 **AI Auto-fill** - Automatically extract website info with AI - 🌙 **Dark Mode** - Auto-follows system theme - 📱 **Responsive Design** - Perfect mobile adaptation - ⚡ **NuxtHub Deploy** - One-click deploy to Cloudflare ## 📸 Screenshot  ## 🛠️ Tech Stack | Category | Technology | |----------|------------| | Framework | Nuxt 4, Vue 3 | | Styling | TailwindCSS 4, Radix Vue | | CMS | Sanity | | Auth | Auth.js | | Payment | Stripe, Creem | | Email | Resend | | Deploy | NuxtHub (Cloudflare) | ## 🚀 Quick Start ### Prerequisites - Node.js 18+ - pnpm 8+ ### Installation ```bash # Clone the repository git clone https://github.com/PBHAHAHA/Nuxt_Mkdirs.git cd Nuxt_Mkdirs # Install dependencies pnpm install # Copy environment variables cp .env.example .env # Start development server pnpm dev ``` Visit http://localhost:3000 to see the result. ### Build & Deploy ```bash # Build for production pnpm build # Preview locally pnpm preview ``` ## 🚀 Deployment This project uses NuxtHub v0.10+ with Cloudflare Workers. > ⚠️ **Note**: NuxtHub Admin deployment will be deprecated on December 31, 2024. Please use Wrangler for deployment. ### Deploy with Wrangler 1. Copy the wrangler configuration: ```bash cp wrangler.example.jsonc wrangler.jsonc ``` 2. Edit `wrangler.jsonc` and fill in your environment variables. 3. Build and deploy: ```bash pnpm build npx wrangler deploy ``` Your site will be deployed to `https://nuxt-mkdirs.<your-account>.workers.dev`. To use a custom domain, configure it in [Cloudflare Dashboard](https://dash.cloudflare.com/) > Workers & Pages > your project > Settings > Domains & Routes. ## ⚙️ Configuration Guide ### 1. Sanity CMS Setup Nuxt Mkdirs uses [Sanity](https://www.sanity.io/) as a headless CMS to manage all content data. 1. Create a [Sanity account](https://www.sanity.io/signup) 2. Create a new project and get the Project ID 3. Create an API Token (select Editor permission) 4. Configure CORS origins  ```bash # .env configuration NUXT_PUBLIC_SANITY_PROJECT_ID=your_project_id NUXT_PUBLIC_SANITY_DATASET=production NUXT_SANITY_API_TOKEN=your_api_token ``` 5. Deploy Sanity Studio ```bash pnpm dlx sanity deploy ```  ### 2. Email Setup (Resend) 1. Create a [Resend account](https://resend.com/) 2. Add and verify your domain 3. Create an API Key  4. Configure Audience ID (for Newsletter)   ```bash # .env configuration NUXT_RESEND_API_KEY=re_xxxxx [email protected] NUXT_RESEND_AUDIENCE_ID=xxxxx ``` ### 3. Payment Setup #### Stripe (International) ```bash NUXT_STRIPE_SECRET_KEY=sk_xxxxx NUXT_STRIPE_WEBHOOK_SECRET=whsec_xxxxx NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_xxxxx ``` #### Creem (China-friendly) [Creem](https://creem.io/) supports registration with Chinese ID, more friendly for Chinese developers. ```bash NUXT_CREEM_API_KEY=xxxxx NUXT_CREEM_WEBHOOK_SECRET=xxxxx NUXT_CREEM_TEST_MODE=true NUXT_PUBLIC_CREEM_PRO_PRODUCT_ID=xxxxx ``` ### 4. OAuth Authentication Setup #### Google OAuth 1. Visit [Google Cloud Console](https://console.cloud.google.com/apis/credentials) 2. Create an OAuth Client ID    ```bash # .env configuration NUXT_AUTH_GOOGLE_CLIENT_ID=xxxxx NUXT_AUTH_GOOGLE_CLIENT_SECRET=xxxxx ``` #### GitHub OAuth 1. Visit [GitHub Developer Settings](https://github.com/settings/developers) 2. Create an OAuth App ```bash NUXT_AUTH_GITHUB_CLIENT_ID=xxxxx NUXT_AUTH_GITHUB_CLIENT_SECRET=xxxxx ``` #### Auth Secret ```bash # Generate secret openssl rand -base64 32 # .env configuration NUXT_AUTH_SECRET=your_generated_secret ``` ### 5. AI Configuration (Optional) Enable AI-powered auto-fill feature for website submissions. ```bash # Choose AI provider: google, deepseek, openai NUXT_AI_PROVIDER=google # Google Generative AI (https://aistudio.google.com/apikey) NUXT_GOOGLE_AI_API_KEY=xxxxx # DeepSeek (https://platform.deepseek.com/api_keys) NUXT_DEEPSEEK_API_KEY=xxxxx # OpenAI (https://platform.openai.com/settings/organization/api-keys) NUXT_OPENAI_API_KEY=xxxxx ``` When configured, users can click the "AI Auto-fill" button to automatically: - Extract website name and description - Generate detailed introduction - Download and upload logo/images - Suggest categories and tags ## 📁 Project Structure ``` nuxt-mkdirs/ ├── app/ │ ├── components/ # Vue components │ ├── composables/ # Composables │ ├── layouts/ # Layout components │ ├── pages/ # Page routes │ └── utils/ # Utility functions ├── server/ │ ├── api/ # API routes │ └── utils/ # Server utilities ├── sanity/ │ └── schemas/ # Sanity schemas └── public/ # Static assets ``` ## 🤝 Contributing Contributions are welcome! Please read the [Contributing Guide](CONTRIBUTING.md). 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ## 📄 License This project is licensed under the [MIT](LICENSE) License. ## 💖 Support If this project helps you, please consider: - ⭐ Give it a Star - 🐛 Submit Issues - 📢 Share with others - <a href="https://www.buymeacoffee.com/pubing967" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;" ></a> ## 📮 Contact <!-- - WeChat: w314709923x --> - GitHub: [@PBHAHAHA](https://github.com/PBHAHAHA) --- <div align="center"> Made with ❤️ by <a href="https://github.com/PBHAHAHA">PBHAHAHA</a> </div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
alpine-theme
Alpine is a minimalist blog theme built on Nuxt and Nuxt Content, supporting Markdown and MDC syntax with over 30 components from Nuxt Elements.
Nuxt · Blog
bael-template
Bael is a brutalist-style blog template built with Nuxt.js and Vue.js, using Netlify CMS for content management and deploying to Netlify. Content is stored as files in a Git repository and edited through the /admin path.
Nuxt · Blog
bloggrify
Bloggrify is a Nuxt layer that turns Markdown files into a blog site, built on Nuxt Content with preconfigured analytics, newsletter, comments, SEO, RSS, and content components.
Nuxt · Blog
BlogiNote
BlogiNote is a Nuxt Content theme that generates a static blog and notes site from Markdown, JSON, CSV, and other files.
Nuxt · Blog
developer-resources
A Nuxt and Vue directory site that lists free or freemium developer resources—icons, UI templates, illustrations, app ideas, and hosting services—across Design, App Ideas, and Hosting categories. It offers category browsing, contribution guidelines, and a contributors page.
Nuxt · Directory site
nuxt-content-template
An opinionated Nuxt Content template for Markdown blogs, with i18n, dark mode, TailwindCSS, LaTeX formulas, and static generation.
Nuxt · Blog