Djeex/docudjeex
1
1
Fork 0
Code Issues Pull Requests Projects Wiki Activity

first commit

Browse Source
This commit is contained in:
Djeex
2025-07-19 13:59:44 +00:00
commit 2540bc968f
113 changed files with 21736 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/2.concepts/.navigation.yml Normal file
View File

@ -0,0 +1 @@
title: Core Concepts

123
docs/content/2.concepts/2.edition.md Normal file
View File

@ -0,0 +1,123 @@
---
title: Edition
description: Learn how to write your documentation.
navigation:
icon: i-lucide-pencil
seo:
description: Learn how to write your documentation with Docus and Nuxt Content.
---
Docus lets you write all your content in **Markdown** but also provide the ability to integrate **components** with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by **Nuxt Content**.
## Landing page
The landing corresponds to the `index.md` file. `MDC` syntax supercharges Markdown with the ability to use Vue components including slots and props inside your `.md` files.
::prose-tip{to="/essentials/components"}
Check the list of Nuxt UI prose components you can integrate in your Markdown.
::
### Components
MDC provides a dedicated syntax to easily use Vue components in your content:
```mdc [content/index.md]
:::u-page-feature
:::
```
### Slots
Slots can receive text content or other components.
- **Default slot** is rendered directly inside the component or with `#default`.
- **Named slots** are defined using the `#` symbol followed by the slot name.
```mdc [index.md]
:::u-page-feature
#title
Nuxt 3
#description
Powered by Nuxt 3 for optimal performances and SEO.
:::
```
### Props
Props are passed using inline syntax or YAML frontmatter within the component block:
::prose-tabs
:::prose-tabs-item{icon="i-lucide-braces" label="Inline"}
```mdc [index.md]
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
#title
Nuxt 3
#description
Powered by Nuxt 3 for optimal performances and SEO.
:::
```
:::
:::prose-tabs-item{icon="i-lucide-code" label="YAML"}
```mdc [index.md]
:::u-page-feature
---
icon: i-simple-icons-nuxt
to: https://nuxt.com
---
#title
Nuxt 3
#description
Powered by Nuxt 3 for optimal performances and SEO.
:::
```
:::
::
::prose-note{to="https://content.nuxt.com"}
Check the Nuxt Content documentation for more details about the MDC syntax
::
## Documentation pages
::prose-tip
There is a one to one relationship between content files and pages on your site. Each Markdown page in the `content/` folder maps directly to a page route.
::
To get started, simply edit or add a `.md` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. Docus will handle routing, navigation, and full-text search automatically.
### Frontmatter
Every file of the `content/` folder starts with the `---` syntax on top of the page. It corresponds to the frontmatter of your file which is a convention of Markdown-based CMS to provide meta-data to pages.
::prose-tabs
:::prose-tabs-item{icon="i-lucide-code" label="Code"}
```md [content/getting-started/edition.md]
---
title: 'Edition'
description: 'Learn how to write your documentation.'
---
<!-- Content of the page in pure Markdown -->
```
:::
:::prose-tabs-item{icon="i-lucide-eye" label="Preview"}
![Frontmatter title and description](/documentation/frontmatter-preview-title-description.png){.rounded-lg}
:::
::
### Parameters
Pages in the `/content` directory are defined as [page](https://content.nuxt.com/docs/collections/types#page-type) type in Nuxt Content. They all follow the same structure with existing frontmatter keys:
| | | | |
| ------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | - |
| Key | Type | Description | |
| `title` | `string` | Title of the page. Displayed on top of the page. Used as SEO title if `seo` key is not provided. | |
| `description` | `string` | Description of the page. Displayed bellow the title on top of the page. Used as SEO description if `seo` key is not provided. | |
| `navigation` | `boolean` | Define if the page is included in left aside navigation. | |
| `seo` | `{ title: string, description: string }` | SEO metas of your page. | |

191
docs/content/2.concepts/3.configuration.md Normal file
View File

@ -0,0 +1,191 @@
---
title: Configuration
navigation:
icon: i-lucide-settings
description: "Customize your Docus documentation from the Nuxt application
configuration file. "
seo:
description: Customize your Docus documentation from Nuxt application configuration file.
---
Docus allows you to configure your documentation through the [app.config.ts](https://nuxt.com/docs/guide/directory-structure/app-config) file provided by Nuxt.
## SEO
Technical SEO is tricky and boring. Docus offers a solid, opt-in default setup that works out of the box, while giving you full control to customize your SEO metadata, from page titles to social sharing images.
### Metadata
Docus offers flexible `SEO` metadata configuration, allowing you to easily override values globally or on a per-page basis.
#### Global configuration
Define default `SEO` metas for your entire documentation in `app.config.ts`. These values will be used as fallbacks across pages that don’t specify their own in the front-matter as described in next section.
You can also configure your `site.name` value from your `nuxt.config.ts` file, default is based on your `package.json` name.
::prose-code-group
```ts [app.config.ts]
export default defineAppConfig({
seo: {
// Default to `%s - ${site.name}`
titleTemplate: ''
// Default to package.json name
title: '',
// Default to package.json description
description: ''
},
})
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
site: {
name: 'Docus',
},
})
```
::
#### Per-page configuration
Each Markdown file in the `content/` directory starts with a frontmatter block (`---`). You can define `SEO` metadata per page by using the `seo` key:
```md [content/concepts/configuration.md]
---
seo:
title: 'Configuration'
description: 'Customize your Docus documentation from the Nuxt application configuration file.'
---
<!-- Page content -->
```
::prose-tip{to="/concepts/edition#frontmatter"}
For more details on front-matter, see the edition guide.
::
### **Social sharing (OG) image**
When you share a link of your documentation on social media or some chat platforms, the link will be **unfurled**, in other terms it gives a glimpse of what someone linked (displaying a title, description, and an image). All of these are powered by the **Open Graph Protocol**.
#### Documentation pages
We're using [Nuxt OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) under the hood to generate OG image for each documentation page based on the provided title and description. For example, the OG image for the current page is:
![og image documentation page](https://docus.dev/__og-image__/static/concepts/configuration/og.png){.rounded-lg}
#### Landing page
Same as the documentation pages, the landing page uses the same OG image generator based on the provided title and description.
![og image landing page](https://docus.dev/__og-image__/static/og.png){.rounded-lg}
However, if you want to customize the OG image for your landing page, you can do so by adding a **absolute** path to an image in the the `seo.ogImage` key of your frontmatter.
```md [content/index.md]
---
seo:
ogImage: '/social-card.png'
---
```
We recommend using a **1280×640** image for optimal display on social platforms.
::prose-tip
OG images must be served with absolute URLs. By default, the site URL is inferred from your deployment platform, but you can override it by setting the `NUXT_SITE_URL` environment variable.
::
## Header
Configure your documentation site’s `title` or `logo` :
```ts [app.config.ts]
export default defineAppConfig({
header: {
// Title to display if no logo
title: '',
// Logo configuration
logo: {
alt: '',
// Light mode
light: '',
// Dark mode
dark: ''
},
},
})
```
## Socials Links
Add your social media links in the footer using a `Record<string, string>` where the key matches an icon from [Simple Icons](https://simpleicons.org/) library.
```ts [app.config.ts]
export default defineAppConfig({
socials: {
x: 'https://x.com/nuxt_js',
discord: 'https://discord.com/invite/ps2h6QT',
nuxt: 'https://nuxt.com',
}
})
```
## Table of Contents
You can customize the table of content on the right sidebar of each page.
```ts [app.config.ts]
export default defineAppConfig({
toc: {
// Rename the title of the table of contents
title: 'On this page',
// Add a bottom section to the table of contents
bottom: {
title: 'Community',
links: [{
icon: 'i-lucide-book-open',
label: 'Nuxt UI Pro docs',
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
target: '_blank'
}, {
icon: 'i-simple-icons-nuxtdotjs',
label: 'Purchase a license',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank'
}]
}
}
})
```
## GitHub Integration
Docus reads your `.git/` folder to get the `url` and `branch` of your repository to add:
- GitHub icon in the header and footer
- `Edit this page` and `Report an issue` links in the footer of each page.
You can customize the `url`, `branch` and `rootDir` of your docs application by adding the following configuration to your `app.config.ts` file:
```ts [app.config.ts]
export default defineAppConfig({
github: {
url: 'https://github.com/nuxt-ui-pro/docus',
branch: 'main',
rootDir: 'docs'
}
})
```
If you don't want to use GitHub, you can set the `github` key to `false` to disable the GitHub integration.
```ts [app.config.ts]
export default defineAppConfig({
github: false
})
```
::prose-tip{to="/getting-started/studio"}
Those configurations can also be handled in Studio editor, give it a try!
::

123
docs/content/2.concepts/4.theme.md Normal file
View File

@ -0,0 +1,123 @@
---
navigation:
icon: i-lucide-paint-roller
title: Theme
description: Custom the appearance of your Docus documentation thanks to Nuxt UI
flexible theming.
---
Docus is built on top of Nuxt UI and takes full advantage of Tailwind CSS v4, CSS variables. The Tailwind Variants API offers a flexible and scalable theming system.
::prose-tip{to="https://ui.nuxt.com/getting-started/theme"}
For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.
::
## Override with `@theme`
You can customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints
You can override this theme by creating your own `main.css` file in your application.
::warning
To ensure a good behaviour with Docus, you must always start by importing `tailwindcss` and `ui-pro` but also source `content/` files and `app.config.ts` :
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../../../content/**/*";
@source "../../../node_modules/docus/app/**/*";
```
::
This way you can override your theme:
::code-group
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../../../content/**/*";
@source "../../../node_modules/docus/app/**/*";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
css: ['~/assets/css/main.css']
})
```
::
## Colors
Docus uses pre-configured color aliases that are used to style components and power the `color` props across the UI.
Each badge below represents a default alias:
- :u-badge{label="primary" variant="outline"} → Main brand color, used as the default color for components :br [(default: green)]{.text-xs.text-muted}
- :u-badge{color="secondary" label="secondary" variant="outline"} → Secondary color to complement the primary color :br [(default: blue)]{.text-xs.text-muted}
- :u-badge{color="success" label="success" variant="outline"} → Used for success states :br [(default: green)]{.text-xs.text-muted}
- :u-badge{color="info" label="info" variant="outline"} → Used for informational states :br [(default: blue)]{.text-xs.text-muted}
- :u-badge{color="warning" label="warning" variant="outline"} → Used for warning states :br [(default: yellow)]{.text-xs.text-muted}
- :u-badge{color="error" label="error" variant="outline"} → Used for form error validation states :br [(default: red)]{.text-xs.text-muted}
- :u-badge{color="neutral" label="neutral" variant="outline"} → Neutral color for backgrounds, text, etc. :br [(default: slate)]{.text-xs.text-muted}
You can customize these colors globally by updating the `app.config.ts` file under the `ui.colors` key:
```ts [app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
neutral: 'zinc'
}
}
})
```
## Components
Beyond colors, all [Nuxt UI components](https://ui.nuxt.com/components) can be themed globally via `app.config.ts`.
You can override any component’s appearance by using the same structure as the component’s internal theme object (displayed at [the end of each component page](https://ui.nuxt.com/components/card#theme)).
For example, to change the font weight of all buttons:
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
slots: {
base: 'font-bold'
}
}
}
})
```
In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
::prose-note{to="https://ui.nuxt.com/components/button#theme"}
To explore the available theme options for each component, refer to the **Theme** section in their respective Nuxt UI documentation page.
::
##

131
docs/content/2.concepts/5.customization.md Normal file
View File

@ -0,0 +1,131 @@
---
navigation:
icon: i-lucide-pen-tool
title: Customization
description: Learn how to override built-in components in Docus to customize
your documentation.
---
Docus is built on top of Nuxt 3 which offers a flexible component layer system that allows you to override some part of the UI by redefining specific components in your own app. This makes it easy to fully customize the visual appearance and behavior of your documentation without touching the core theme.
To override a component, simply create a Vue file with the same name in the `components/` directory. Docus will automatically use your version instead of the default one.
## App Header
You can customize different parts of the header by overriding the following components:
### `AppHeaderLogo`
To replace the default logo in the header, create the `components/AppHeaderLogo.vue` file. Your component will replace the default one provided by Docus theme.
![App header logo visualisation](/documentation/app-header-logo.webp){.rounded-lg.border.border-accented}
::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderLogo.vue
variant: link
---
Default component code
::
### `AppHeaderCTA`
To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the `components/AppHeaderCTA.vue` component.
![App header CTA visualisation](/documentation/app-header-cta.webp){.rounded-lg.border.border-accented}
::prose-note
---
to: https://github.com/nuxtlabs/docus/blob/docs/components/AppHeaderCTA.vue
---
By default this components is empty but you can have a look at how we're overriding it on Docus documentation itself.
::
### `AppHeaderCenter`
To customize the center area in the header, override the `components/AppHeaderCenter.vue` component. Your component will replace the search bar provided by Docus theme.
![App header logo visualisation](/documentation/app-header-center.webp){.rounded-lg.border.border-accented}
::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderCenter.vue
variant: link
---
Default component code
::
### `AppHeaderBody`
By default, when you open the menu on mobile view, Docus is displaying your `content/` folder tree as a menu with the [ContentNavigation](https://ui.nuxt.com/components/content-navigation) component. You can override this menu with the `components/AppHeaderBody.vue` component and fill the menu body (under the header) in mobile.
![App header body visualisation](/documentation/app-header-body.webp){.rounded-lg.border.border-accented}
::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderBody.vue
variant: link
---
Default component code
::
## Docs
You can also customize header and both asides of the documentation pages.
### `DocsPageHeaderLinks`
In the header right side of your documentation page, Docus default behaviour is displaying a dropdown with quick actions related to the current page’s Markdown source. It allows the reader of the documentation to:
- **Copy a direct link** to the raw `.md` file to the clipboard.
- **View the Markdown source** in a new browser tab.
- **Open the page’s content in ChatGPT or Claude**, pre-filled with a prompt to analyze the Markdown file.
These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own `components/DocsPageHeaderLinks.vue` component to override it.
![App Page Header Links](/documentation/app-page-header-links.webp){.rounded-lg.border.border-accented}
::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsHeaderRight.vue
variant: link
---
Default component code
::
### `DocsAsideRightBottom`
To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by Docus theme.
![Docs right aside bottom](/documentation/docs-aside-right-bottom.webp){.rounded-lg.border.border-accented}
::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsAsideRightBottom.vue
variant: link
---
Default component code
::
### `DocsAsideLeftTop`
To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.
![Docs Aside Left Top](/documentation/docs-aside-left-top.webp){.rounded-lg.border.border-accented}
::prose-note
---
to: https://github.com/nuxt/image/blob/docs/docus/docus/app/components/DocsAsideLeftTop.vue
---
By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
::

44
docs/content/2.concepts/6.llms.md Normal file
View File

@ -0,0 +1,44 @@
---
title: LLMs Integration
description: Docus generate AI-ready content files using Nuxt LLMs module
navigation:
icon: i-lucide-message-circle-code
---
Docus integrates `nuxt-llms` by default to prepare your content for Large Language Models (LLMs). All your documentation pages are injected and `/llms.txt` and `/llms-full.txt` files are automatically generated and pre-rendered.
::prose-note{to="/llms.txt"}
Have a check at the `/llms.txt` file generated for Docus documentation itself.
::
## Defaults
Here are the default values use to generate the `/llms.txt` file:
- `domain` → computed based on your deployment platform (or by using `NUXT_SITE_URL` env variable)
- `title` → extracted from your `package.json`
- `description` → extracted from your `package.json`
- `full.title` → extracted from your `package.json`
- `full.description` → extracted from your `package.json`
## Customize
You can override your LLMs data from the `nuxt.config.ts` :
```ts [nuxt.config.ts]
export default defineNuxtConfig({
llms: {
domain: 'https://your-site.com',
title: 'Your Site Name',
description: 'A brief description of your site',
full: {
title: 'Your Site Name',
description: 'A brief description of your site',
},
},
})
```
::tip{to="https://github.com/nuxtlabs/nuxt-llms"}
Checkout the nuxt-llms documentation for more information about the module.
::

90
docs/content/2.concepts/7.nuxt.md Normal file
View File

@ -0,0 +1,90 @@
---
description: Build interactive and reusable elements with Nuxt components
title: Nuxt
navigation:
icon: i-simple-icons-nuxt
---
## Nuxt App
Docus is built on top of **Nuxt 3**, which means your documentation project is a full Nuxt application. When you scaffold a project using the **Docus CLI**, it adds a layer by default giving you all the flexibility of a standard Nuxt app.
By default, the Docus starter only contains a `content/` and `public/` folder and a `package.json`. This is all you need to start writing your documentation. You can go further and use any feature of a Nuxt project, from [nuxt.config.ts](https://nuxt.com/docs/guide/directory-structure/nuxt-config) to [components](https://nuxt.com/docs/guide/directory-structure/nuxt-config) or [plugins](https://nuxt.com/docs/guide/directory-structure/plugins).
::prose-note
You can use the Nuxt 4 [new directory structure](https://nuxt.com/docs/getting-started/upgrade#new-directory-structure) provided by the [compatibility version 4 .]() All files related to front app code goes in `app/` folder for cleaner organization and better IDE performance.
::
## Nuxt Modules
Want to enhance your docs with custom functionality? You can install and configure [Nuxt modules]() just like in any Nuxt app.
To add [Plausible analytics](https://github.com/nuxt-modules/plausible?utm_source=nuxt.com\&utm_medium=aside-module\&utm_campaign=nuxt.com) to your documentation:
::prose-steps
### Run the following command
```bash [Terminal]
npm install @nuxtjs/plausible
```
### Enable the module in `nuxt.config.ts`
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxtjs/plausible'],
})
```
::
## Custom components
With the power of `Nuxt Content` and `Nuxt UI`, and with the help of the `MDC` syntax, you can use [Nuxt UI components](/essentials/components) directly in your Markdown without any extra configuration needed.
However, you’re not limited to pre-built components. Docus makes it easy to create your own Vue components in your Nuxt app and use them in your content.
Here’s a simple example of a custom `BrowserFrame` component created in the `components` folder of your Nuxt app and integrated inside Markdown:
::tabs
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
```vue [components/content/BrowserFrame.vue]
<script setup lang="ts">
defineProps<{
title?: string
}>()
</script>
<template>
<div class="w-fit rounded-xl border border-muted bg-accented shadow-md overflow-hidden px-2 pb-2">
<div class="flex justify-between items-center px-2 py-2 bg-accented border-accented border-b">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-red-500 rounded-full" />
<span class="w-3 h-3 bg-yellow-500 rounded-full" />
<span class="w-3 h-3 bg-green-500 rounded-full" />
</div>
<div class="text-muted">
{{ title }}
</div>
</div>
<slot mdc-unwrap="p" />
</div>
</template>
```
:::
:::tabs-item{icon="i-simple-icons-markdown" label="Markdown"}
```mdc
::browser-frame{title="The Alps"}
![mountains landscape](/mountains.webp)
::
```
:::
:::tabs-item{icon="i-lucide-eye" label="Preview"}
::::browser-frame{title="The Alps"}
![mountains landscape](/documentation/mountains.webp){.rounded-lg}
::::
:::
::
This approach lets you create dynamic docs powered by Nuxt components using Markdown.