Nuxt Pastel Docs

A clean ✒️ — performant 🚀 — and monochromatic 🎨 Nuxt layer for creating beautiful documentations.

Features

• ✨ Beautiful Design — Pastel-themed, monochromatic aesthetic that's easy on the eyes
• 🚀 Performance First — Built with modern web standards and optimized for speed
• 📱 Responsive Layout — Looks great on desktop, tablet, and mobile devices
• 🎨 Customizable — Easy theming through app.config.ts
• 📖 Content-Driven — Powered by @nuxt/content with MDC support
• 🌙 Dark Mode — Built-in theme switching with system preference detection
• 🔍 SEO Optimized — Meta tags, OpenGraph images, and semantic HTML
• 📋 Table of Contents — Auto-generated navigation for long pages
• 🎯 Zero Config — Works out of the box with sensible defaults

Quick Setup

1. Add it to your extends in nuxt.config.ts:

export default defineNuxtConfig({
  extends: [["github:oyedejioyewole/nuxt-pastel-docs", { install: true }]],
});

2. Create a content.config.ts file:

import { defineContentConfig, defineCollection, z } from "@nuxt/content";

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
      schema: z.object({
        displayToc: z.boolean().default(false),
      }),
    }),
  },
});

3. Add your markdown files in the content directory. Example:

---
displayToc: true
---

# A breathe of fresh air

Your content goes here ...

That's it! ✨

Note: For a comprehensive guide, see the 📖 documentation

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Prepare Nuxt for development
pnpm dev:prepare

# Generate static site
pnpm generate

# Preview generated site
pnpm preview

# Lint and fix code
pnpm lint

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

Built with:

• Nuxt 3
• @nuxt/content
• Tailwind CSS
• Phosphor Icons

---

Made with ❤️ by Oyedeji Oyewole