Documentation

The documentation feature of supastarter is powered by VitePress, a static site generator built on top of Vite and Vue.

The documentation app is located in apps/docs and runs on port 3002 by default.

Create a documentation page

To create a new documentation page, simply create a new .md file in the apps/docs directory.

---
title: Documentation
---

Your content here

Configuration

The VitePress configuration is located in apps/docs/.vitepress/config.ts. Here you can customize the navigation, sidebar, and other settings.

export default defineConfig({
  title: "Documentation",
  description: "Your documentation description",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Guide", link: "/installation" },
    ],
    sidebar: [
      {
        text: "Guide",
        items: [
          { text: "Introduction", link: "/" },
          { text: "Installation", link: "/installation" },
        ],
      },
    ],
  },
});

Folder structure

The folder structure of the documentation is determined by the directory structure of the apps/docs directory. Each .md file becomes a page, and directories create nested routes.

apps/docs
├── .vitepress
│   └── config.ts
├── index.md
├── installation.md
└── guide
    ├── getting-started.md
    └── usage.md

Adding pages to the sidebar

To add new pages to the sidebar navigation, update the sidebar configuration in apps/docs/.vitepress/config.ts:

sidebar: [
  {
    text: 'Guide',
    items: [
      { text: 'Introduction', link: '/' },
      { text: 'Installation', link: '/installation' },
      { text: 'Getting Started', link: '/guide/getting-started' },
      { text: 'Usage', link: '/guide/usage' },
    ],
  },
],

Development

To start the documentation development server, run the following command from the project root:

pnpm dev

This will start all apps including the documentation at http://localhost:3002.

Learn more about VitePress in the official documentation.