Documentation System Overview

This project's documentation system is built on two powerful foundations: Nuxt Content and shadcn-nuxt-docs (based on shadcn-vue components). Together, they provide a modern, flexible, and highly extensible documentation experience.

Nuxt Content

Nuxt Content is a powerful content management system for Vue developers that makes content creation effortless.

Key Features

  • Markdown-First: Write content in Markdown with full Vue component support
  • File-Based: Organize content as simple files in your project
  • Type-Safe: Automatic TypeScript types generation from your content
  • Query API: Powerful query system to fetch and filter content
  • Code Highlighting: Built-in syntax highlighting for code blocks
  • Search: Full-text search capabilities out of the box

Why Nuxt Content?

Nuxt Content eliminates the need for a separate CMS or database. Your documentation lives alongside your code, making it easy to version, review, and maintain. The file-based approach means you can use your favorite editor and Git workflow.

shadcn-nuxt-docs

shadcn-nuxt-docs is a documentation template built on top of shadcn-vue components, providing beautiful, accessible UI components for documentation sites.

Key Features

  • Beautiful Design: Modern, clean interface inspired by shadcn-ui
  • Accessible: Built with accessibility in mind, following WAI-ARIA guidelines
  • Customizable: Fully customizable components that you own and control
  • Component Library: Rich set of pre-built documentation components
  • Dark Mode: Built-in dark mode support
  • Responsive: Mobile-first design that works on all devices

Why shadcn-vue?

Unlike traditional component libraries, shadcn-vue components are copied directly into your project. This means you have full control over the code, can customize everything, and aren't locked into a specific version or API.

Ease of Use

The combination of Nuxt Content and shadcn-nuxt-docs makes documentation creation incredibly simple:

Simple Content Creation

---
title: My Article
description: A simple example
---

# My Article

Write your content in Markdown, and it just works!

Rich Components

Use Vue components directly in your Markdown:

<Alert>
  This is a custom alert component!
</Alert>

Zero Configuration

Get started quickly with sensible defaults, then customize as needed.

Extensibility

The documentation system is designed to be highly extensible:

Custom Components

  • Add your own Vue components to enhance content
  • Integrate with any Vue ecosystem library
  • Build domain-specific documentation components

Flexible Structure

  • Organize content however you want
  • Create custom navigation structures
  • Implement your own content types

API Integration

  • Extend the query API for custom content needs
  • Integrate with external data sources
  • Build dynamic documentation from APIs

Theming

  • Customize colors, fonts, and styles
  • Create multiple themes
  • Support for custom layouts

Getting Started

Ready to start documenting? Check out the next sections to learn how to:

  • Create your first documentation page
  • Use components in your content
  • Customize the documentation theme
  • Extend the system with custom features

Who's Using

License

MIT