> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/en/getting-started/project-structure.md](/docs/manual/en/getting-started/project-structure.md).

---
title: Project Structure
description: Learn about the project structure of TockDocs.
navigation:
  icon: i-lucide-folder-tree
---

## Overview

TockDocs is a **Nuxt layer**. Your project is a normal Nuxt app that extends the layer and adds content, configuration, and optional custom Vue code.

Today, TockDocs supports two content architectures:

- **legacy mode** — a single docs tree, optionally localized with `@nuxtjs/i18n`
- **knowledge-base mode** — multiple documentation sets under `/docs/<kb>/<locale>/...`

The generated starters use **legacy mode** by default. The official TockDocs site uses **knowledge-base mode**.

## Starter structures

### Default starter

The `default` starter is a single-locale legacy-mode app:

```bash
my-docs/
├── content/
│   ├── index.md
│   └── 1.getting-started/
├── nuxt.config.ts
├── package.json
└── public/
```

Typical routes:

- `content/index.md` → `/`
- `content/1.getting-started/3.installation.md` → `/getting-started/installation`

### i18n starter

The `i18n` starter is still legacy mode, but content is grouped by locale:

```bash
my-docs/
├── content/
│   ├── en/
│   │   ├── index.md
│   │   └── 1.getting-started/
│   └── zh/
│       ├── index.md
│       └── 1.getting-started/
├── nuxt.config.ts
├── package.json
└── public/
```

Typical routes:

- `content/en/index.md` → `/en`
- `content/zh/1.getting-started/3.installation.md` → `/zh/getting-started/installation`

### Knowledge-base mode

KB mode is for multi-product or multi-domain docs collections. The official docs site uses this shape:

```bash
content/
├── site/
│   └── index.md
├── manual/
│   ├── kb.yml
│   ├── en/
│   │   └── 1.getting-started/
│   └── zh/
│       └── 1.getting-started/
└── chemistry/
    ├── kb.yml
    └── zh/
        └── 01.atomic-structure/
```

Typical routes:

- `content/site/index.md` → `/`
- `content/manual/en/1.getting-started/3.installation.md` → `/docs/manual/en/getting-started/installation`
- `content/chemistry/zh/01.atomic-structure/1.electron-configuration.md` → `/docs/chemistry/zh/atomic-structure/electron-configuration`

Each KB is defined by a `kb.yml` file. That file controls the KB id, title, locales, default locale, entry page, and UI metadata.

::tip{to="/docs/manual/en/concepts/edition"}
See the edition guide for the full routing rules for legacy mode and KB mode.
::

## `package.json`

A starter app stays intentionally small. The generated `package.json` looks like this:

```json [package.json]
{
  "name": "my-docs",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build"
  },
  "dependencies": {
    "@takumi-rs/core": "^1.0.15",
    "better-sqlite3": "^12.6.2",
    "nuxt": "^4.3.1",
    "tockdocs": "latest"
  }
}
```

Notes:

- `tockdocs` provides the Nuxt layer
- `nuxt` is your application runtime
- `better-sqlite3` is used by Nuxt Content
- `@takumi-rs/core` is used for Takumi-based OG image rendering in local development

## `nuxt.config.ts`

The starter already includes a Nuxt config that extends the layer:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['tockdocs'],
})
```

This is where you add extra Nuxt modules, site metadata, i18n config, or advanced assistant settings.

## `app/app.config.ts`

`app.config.ts` is optional, but it is the main place to customize the TockDocs UI layer.

```ts [app/app.config.ts]
export default defineAppConfig({
  seo: {
    title: 'My Docs',
    description: 'My awesome documentation',
  },
  header: {
    title: 'My Docs',
  },
})
```

Use it for branding, navigation, socials, TOC, GitHub links, color mode, and assistant UI options.

## Standard Nuxt directories still work

Because TockDocs is just a Nuxt layer, you can use the normal Nuxt app structure alongside your content:

```bash
my-docs/
├── app/
│   ├── app.config.ts
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── composables/
├── content/
├── public/
├── server/
├── nuxt.config.ts
└── package.json
```

Use these directories when you want to:

- add custom Vue components
- override built-in layer components
- create extra pages outside docs content
- add API routes or server utilities
- install and configure additional Nuxt modules

::tip{to="/docs/manual/en/concepts/nuxt"}
Read the Nuxt guide for examples of custom components, Vue pages, and layouts on top of TockDocs.
::