Project Structure
Global structure
Docus v4 is a Nuxt layer that extends your standard Nuxt application with documentation features. This gives you the flexibility of a full Nuxt project.
When you create a new Docus project with npx create-docus my-docs
, you get:
my-docs/
├── content/ # Your markdown content
│ ├── index.md # Homepage
│ └── docs/ # Documentation pages
├── public/ # Static assets
└── package.json # Dependencies and scripts
You can still use any feature or file of a classical Nuxt project:
my-docs/
├── app.config.ts # App configuration
├── nuxt.config.ts # Nuxt configuration (add extra modules, components, etc.)
├── app/ # App directory
│ ├── components/ # Components (add your own components)
│ ├── layouts/ # Layouts (add your own layouts)
│ └── pages/ # Pages (add your own pages)
└── server/ # Server-side code (add your own server-side code)
content/
directory
This is where you write pages in Markdown. Docus automatically generates routes based on your file structure.
Single language structure:
content/
├── index.md
├── getting-started.md
└── guide/
├── introduction.md
└── configuration.md
Multi-language structure (with i18n):
content/
├── en/
│ ├── index.md
│ └── guide/
│ └── introduction.md
└── fr/
├── index.md
└── guide/
└── introduction.md
public/
directory
Files contained within the public/
directory are served at the root and are not modified by the build process. This is where you can locate your images, icons, and other static assets.
package.json
This file contains all the dependencies and scripts for your application. The package.json
of
a Docus application si really minimal and looks like:
{
"name": "my-docs",
"scripts": {
"build": "nuxt build --extend docus",
"dev": "nuxt dev --extend docus",
},
"dependencies": {
"docus": "latest",
"better-sqlite3": "^12.2.0",
"nuxt": "^4.0.0"
}
}
nuxt.config.ts
This file is not mandatory to start a Docus application.
You can add extra modules to your Nuxt configuration file:
export default defineNuxtConfig({
extends: ['@nuxtjs/plausible']
})
app.config.ts
This file is not mandatory to start a Docus application.
This is where you can configure Docus to fit your branding, handle SEO and adapt links and socials.
Full Nuxt Project Capabilities
Since Docus v4 is a Nuxt layer, you can use any feature of a standard Nuxt project:
my-docs/
├── app/ # App directory (optional)
│ ├── components/ # Custom Vue components
│ ├── layouts/ # Custom layouts
│ ├── pages/ # Custom Vue pages (outside of content)
│ ├── composables/ # Vue composables
│ └── middleware/ # Route middleware
├── server/ # Server-side code
│ └── api/ # API routes
├── plugins/ # Nuxt plugins
├── middleware/ # Global middleware
└── modules/ # Custom Nuxt modules