Getting Started

Install @maas/docs, extend it from a Nuxt app and write the first page.

@maas/docs is a Nuxt layer for documentation sites. It brings the shell, search, color modes, the Markdown components and the Mirror tokens, so a docs app holds its content and little else.

Installation

Add the layer and the two libraries it runs on to your docs app.

pnpm add @maas/docs @maas/mirror @maas/vue-equipment

@maas/mirror and @maas/vue-equipment are peer dependencies, so the app decides their versions. If the docs live in the repository of either library, read Monorepos next.

Setup

Extend the layer in nuxt.config.ts.

nuxt.config.ts

export default defineNuxtConfig({
  extends: ['@maas/docs'],
})

Define the collections the layer queries in content.config.ts.

content.config.ts

import {
  defineContentConfig,
  defineDocsCollections,
} from '@maas/docs/content'

export default defineContentConfig({
  collections: defineDocsCollections(),
})

Name the site in app/app.config.ts.

app/app.config.ts

export default defineAppConfig({
  docs: {
    title: 'Magic Timer',
    description: 'A timer that keeps time across tabs.',
    repository: 'https://github.com/magicasaservice/magic-timer',
  },
})

The layer reads content with Node’s built-in SQLite, so the app needs Node 22.5 or later and no native database driver.

Writing pages

Every Markdown file in content/ becomes a page, and every folder becomes a section of the sidebar. Numeric prefixes order both and never reach a URL.

content/
├── index.md
├── 0.guide/
│   ├── 0.getting-started.md
│   └── 1.configuration.md
└── 1.components/
    └── 0.timer.md

A page takes its title and description from front matter. If it opens with a # Title instead, the heading and the paragraph under it serve as both.

content/0.guide/0.getting-started.md

---
title: Getting Started
description: Install the package and start the first timer.
---

## Installation

Landing page

content/index.md is the landing page. It renders its front matter as a hero and has no body.

content/index.md

---
title: Magic Timer
description: A timer that keeps time across tabs.
hero:
  name: Magic Timer
  tagline: Time, kept
  text: A timer that keeps time across tabs and survives a reload.
  image:
    src: /images/hero.png
    alt: A brass stopwatch
    width: 1200
    height: 1200
  actions:
    - text: Get Started
      link: /guide/getting-started
      mode: solid
    - text: GitHub
      link: https://github.com/magicasaservice/magic-timer
---