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

39
.gitignore vendored Normal file
View File

@ -0,0 +1,39 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
.eslintcache
# Local env files
.env
.env.*
!.env.example
# Template
template/pnpm-lock.yaml
# npm pack
*.tgz
# Temp files
.tmp
.profile
*.0x
#VSC
.history

24
.release-it.json Normal file
View File

@ -0,0 +1,24 @@
{
"git": {
"commitMessage": "chore(release): v${version}",
"tagName": "v${version}"
},
"github": {
"release": true,
"releaseName": "v${version}",
"web": true
},
"hooks": {
"before:init": ["pnpm lint"]
},
"plugins": {
"@release-it/conventional-changelog": {
"preset": {
"name": "conventionalcommits"
},
"infile": "CHANGELOG.md",
"header": "# Changelog",
"ignoreRecommendedBump": true
}
}
}

40
.starter/.gitignore vendored Normal file
View File

@ -0,0 +1,40 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
.eslintcache
# Local env files
.env
.env.*
!.env.example
# Template
template/pnpm-lock.yaml
# npm pack
*.tgz
# Temp files
.tmp
.profile
*.0x
#VSC
.history
.wrangler

2
.starter/content/1.getting-started/.navigation.yml Normal file
View File

@ -0,0 +1,2 @@
title: Getting Started
icon: false

54
.starter/content/1.getting-started/2.introduction.md Normal file
View File

@ -0,0 +1,54 @@
---
title: Introduction
description: Welcome to Docus theme documentation.
navigation:
icon: i-lucide-house
seo:
title: Introduction
description: Discover how to create, manage, and publish documentation
effortlessly with Docus.
---
Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro).
## What is Docus?
Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com).
We use this theme across all our Nuxt module documentations, including:
::card-group
:::card
---
icon: i-simple-icons-nuxtdotjs
target: _blank
title: Nuxt Image
to: https://image.nuxt.com
---
The documentation of `@nuxt/image`
:::
:::card
---
icon: i-simple-icons-nuxtdotjs
target: _blank
title: Nuxt Supabase
to: https://supabase.nuxtjs.org
---
The documentation of `@nuxt/supabase`
:::
::
## Key Features
This theme includes a range of features designed to improve documentation management:
- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required!
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
- **Full-Text Search**: Includes built-in search functionality for content discovery.
- **Optimized Typography**: Features refined typography for enhanced readability.
- **Dark Mode**: Offers dark mode support for user preference.
- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities.

65
.starter/content/1.getting-started/3.installation.md Normal file
View File

@ -0,0 +1,65 @@
---
title: Installation
description: Get started with Docus.
navigation:
icon: i-lucide-download
seo:
description: Get started with Docus documentation theme.
---
## Local development
::steps
### Create your docs directory
Use the `docus` CLI to create a new Docus project in the `docs/` directory:
```bash [Terminal]
npx docus init docs
```
We recommend using the `npm` package manager.
### Start your docs server in development
Move to the `docs/` directory and start your docs server in development mode:
```bash [Terminal]
npm run dev
```
A local preview of your documentation will be available at <http://localhost:4000>
### Write your documentation
Head over the [Edition](https://docus.dev/concepts/edition) section to learn how to write your documentation.
::
## Online Edition with [Nuxt Studio](https://content.nuxt.com/studio)
::prose-steps
### Create a new project on [Nuxt Studio](https://nuxt.studio)
Choose `Start from a template` and select **Docus.** Clone it on your GitHub personal account or any organisation of your choice.
### Deploy in one click
Once your project has been created and you're in the project dashboard, navigate to the `Deploy` section, choose the `GitHub Pages` tab and set your [Nuxt UI Pro license](https://ui.nuxt.com/pro/pricing) (`NUXT_UI_PRO_LICENSE` ) in the environment variables then click on the **Deploy** button.
:::prose-note
---
to: https://content.nuxt.com/docs/studio/setup#enable-the-full-editing-experience
---
This is a one click static deployment available with [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) but you can also handle deployment yourself and use the `Selfhosted` tab.
:::
### Write your documentation in the editor
Once the deployment is achieved, you'll be able to display the preview of your documentation. You can browse your content pages to edit them or create new ones.
:video{controls loop poster="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.jpg" src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
::
::prose-tip{to="https://content.nuxt.com/docs/studio/debug"}
If you want to try Docus and Nuxt Studio in develoment mode without an UI Pro license, you can check the Nuxt Content documentation for local setup with Nuxt Studio.
::

52
.starter/content/1.getting-started/4.project-structure.md Normal file
View File

@ -0,0 +1,52 @@
---
navigation:
icon: i-lucide-folder-tree
title: Project Structure
---
Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/.starter).
This is the minimal directory structure to get an up and running Docus website.
```bash
content/
index.md
public/
favicon.ico
package.json
```
### `content/` directory
This is where you [write pages](https://docus.dev/concepts/edition) in Markdown.
### `public/` directory
Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias.
### `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:
```json [package.json]
{
"name": "docus-starter",
"scripts": {
"dev": "docus dev",
"build": "docus build"
},
"devDependencies": {
"docus": "latest"
}
}
```
### `app.config.ts`
*This file is not mandatory to start a Docus application.*
This is where you can [configure Docus](https://docus.dev/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
::prose-tip{to="https://docus.dev/concepts/nuxt"}
Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory.
::

123
.starter/content/1.getting-started/5.studio.md Normal file
View File

@ -0,0 +1,123 @@
---
title: Web Editor
description: Build your documentation using Nuxt Studio web editor
navigation:
icon: i-lucide-mouse-pointer-2
---
## **Introduction**
The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
::prose-tip{to="https://content.nuxt.com/studio"}
Learn more about Nuxt Studio in the Nuxt Content documentation.
::
## **Web Editor vs. CLI**
The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE.
::prose-note
Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best.
::
## **Two distinct editors**
Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**.
You can select your favorite editor from the settings page of your project.
::prose-note
Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors.
::
## **Markdown editor**
The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.
## **Visual editor**
The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.
However, it stands out with its additional features that improve the writing experience:
### **Toolbar**
Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax):
- Title formatting
- Bold
- Italic
- Strike-through
- Code
- Link
- Class
- Bullet list
- Numerated list
### **The** `/` **shortcut**
Simply type `/` anywhere in the editor to access all Studio features.
#### **Formatting features**
- Title formatting
- Line break
- Horizontal rule
- Code-block
- Paragraph
- Bold & italic
#### **Components**
One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.
In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
::prose-note
You can also create custom components and let the user integrate them from the visual editor.
::
Just type `/` to access the list of all the components available.
#### **Images**
Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert.
From the media modal, you can set the **alt attribute** for SEO and accessibility purpose.
#### **Videos**
Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL.
As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media.
## **Live Preview**
Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section.
When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
## **Making Changes**
To edit your documentation:
1. **Browse files** using the file explorer.
2. **Open a file** by clicking on it.
3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts.
4. **Preview your changes** to see how they’ll appear when published.
## **Publishing Changes**
When you’re ready to publish:
- Click the **Publish** button in the top-right corner of the editor.
- Your changes will be pushed directly to your deployment branch and go live immediately.

24
.starter/content/1.getting-started/6.migration.md Normal file
View File

@ -0,0 +1,24 @@
---
title: Migration
description: " How to migrate your documentation from an existing Markdown
solution to Docus"
navigation:
icon: i-lucide-replace
---
## **Migrating to Docus**
Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward.
Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever.
To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter.
From there, you have two scenarios:
- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones.
- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](https://docus.dev/essentials/components) provided by Nuxt UI.
Once your content has been moved to the `content/` folder, you can go through the [configuration section](https://docus.dev/concepts/configuration) to easily customize your app.
Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it.

1
.starter/content/2.essentials/.navigation.yml Normal file
View File

@ -0,0 +1 @@
title: Essentials

223
.starter/content/2.essentials/1.markdown-syntax.md Normal file
View File

@ -0,0 +1,223 @@
---
title: Markdown Syntax
description: Text, title, and styling in standard markdown.
navigation:
icon: i-lucide-heading-1
---
## Titles
Use titles to introduce main sections. They structure your documentation and help users navigate content.
::code-preview
---
class: "[&>div]:*:my-0"
---
## Titles
#code
```mdc
## Titles
```
::
### Subtitles
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
::code-preview
---
class: "[&>div]:*:my-0"
---
### Subtitles
#code
```mdc
### Subtitles
```
::
::tip
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
::
## Text Formatting
Docus supports most Markdown formatting options.
| Style | How to use | Result |
| ------ | ------------ | ---------- |
| Bold | `**bold**` | **Bold** |
| Italic | `*italic*` | *Italic* |
| Strike | `~~strike~~` | ~~Strike~~ |
Combine formatting for richer text styles and visual emphasis.
| Style | How to use | Result |
| ------------- | ------------------- | ----------------- |
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
## Links
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
To create a link, wrap the link text in brackets `[]()`.
::code-preview
---
class: "[&>div]:*:my-0"
---
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
#code
```mdc
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
```
::
### Internal links
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
::code-preview
---
class: "[&>div]:*:my-0"
---
[Installation](/getting-started/installation)
#code
```mdc
[Installation](/getting-started/installation)
```
::
## Lists
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
### Unordered
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
::code-preview
---
class: "[&>div]:*:my-0"
---
- I'm a list item.
- I'm another list item.
- I'm the last list item.
#code
```mdc
- I'm a list item.
- I'm another list item.
- I'm the last list item.
```
::
### Ordered
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
::code-preview
---
class: "[&>div]:*:my-0"
---
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
#code
```mdc
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
```
::
### Nested
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
::code-preview
---
class: "[&>div]:*:my-0"
---
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
#code
```mdc
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
```
::
## Tables
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
| Prop | Default | Type |
| ------- | --------- | -------- |
| `name` | | `string` |
| `size` | `md` | `string` |
| `color` | `neutral` | `string` |
#code
```mdc
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
```
::
## Blockquotes
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
### Singleline
Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
::code-preview
---
class: "[&>div]:*:my-0"
---
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
#code
```mdc
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
```
::
### Multiline
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
::code-preview
---
class: "[&>div]:*:my-0"
---
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
>
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
#code
```mdc
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
>
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
```
::

396
.starter/content/2.essentials/2.code-blocks.md Normal file
View File

@ -0,0 +1,396 @@
---
title: Code Blocks
description: Display inline code and code blocks in your documentation.
navigation:
icon: i-lucide-code-xml
---
## Basic
### Inline Code
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
::code-preview
---
class: "[&>div]:*:my-0"
---
`inline code`
#code
```mdc
`inline code`
```
::
### Code Blocks
Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
#code
````mdc
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
````
::
When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.
Filenames help users understand the code's location and purpose within a project.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
#code
````mdc
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
````
::
Every code-block has a built-in copy button that will copy the code to your clipboard.
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
Icons are already defined by default, but you can customize them in your `app.config.ts`:
```ts [app.config.ts]
export default defineAppConfig({
uiPro: {
prose: {
codeIcon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
})
```
::
## Advanced
### CodeGroup
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
:::code-group{.w-full}
```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```
```bash [yarn]
yarn add @nuxt/ui-pro@next
```
```bash [npm]
npm install @nuxt/ui-pro@next
```
```bash [bun]
bun add @nuxt/ui-pro@next
```
:::
#code
````mdc
:::code-group
```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```
```bash [yarn]
yarn add @nuxt/ui-pro@next
```
```bash [npm]
npm install @nuxt/ui-pro@next
```
```bash [bun]
bun add @nuxt/ui-pro@next
```
::
````
::
### CodeTree
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
:::code-tree{default-value="app/app.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/css/main.css']
})
```
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"eslint": "9.20.1",
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
:::
::
### `CodePreview`
Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
label: Preview
---
:::code-preview
---
class: "[&>div]:*:my-0"
---
`inline code`
#code
```mdc
`inline code`
```
:::
#code
````mdc
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
````
::
### `CodeCollapse`
Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
:::code-collapse{class="[&>div]:my-0"}
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--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;
}
```
:::
#code
````mdc
::code-collapse
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--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;
}
```
::
````
::

424
.starter/content/2.essentials/3.components.md Normal file
View File

@ -0,0 +1,424 @@
---
title: Markdown Components
description: Use Markdown components to help you structure your content, with
the help of Nuxt UI Pro.
navigation:
icon: i-lucide-component
title: Components
---
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
::prose-note{to="https://ui.nuxt.com/getting-started"}
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
::
### `Accordion`
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
::tabs
:::tabs-item{icon="i-lucide-eye" label="Preview"}
::::accordion
:::::accordion-item
---
icon: i-lucide-circle-help
label: What is Docus and what are its key features??
---
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
:::::
:::::accordion-item
---
icon: i-lucide-circle-help
label: How do I get started with Docus?
---
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
:::::
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::accordion
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
:::
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
:::
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
:::
::
```
:::
::
### `Badge`
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::badge
**v3.0.0**
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::badge
**v3.0.0**
::
```
:::
::
### `Callout`
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::div{.flex.flex-col.gap-4.w-full}
:::::note{.w-full.my-0}
Here's some additional information for you.
:::::
:::::tip{.w-full.my-0}
Here's a helpful suggestion.
:::::
:::::warning{.w-full.my-0}
Be careful with this action as it might have unexpected results.
:::::
:::::caution{.w-full.my-0}
This action cannot be undone.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
```
:::
::
### `Card` and `CardGroup`
Use markdown in the default slot of the `card` component to highlight your content.
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::card-group{.w-full.my-0}
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Dashboard
to: https://github.com/nuxt-ui-pro/dashboard
---
A dashboard with multi-column layout.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: SaaS
to: https://github.com/nuxt-ui-pro/saas
---
A template with landing, pricing, docs and blog.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Docs
to: https://github.com/nuxt-ui-pro/docs
---
A documentation with `@nuxt/content`.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Landing
to: https://github.com/nuxt-ui-pro/landing
---
A landing page you can use as starting point.
:::::
::::
:::
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
```mdc
:::card-group
::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/dashboard
target: _blank
---
A dashboard with multi-column layout.
::
::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::
::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/docs
target: _blank
---
A documentation with `@nuxt/content`.
::
::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/landing
target: _blank
---
A landing page you can use as starting point.
::
:::
```
:::
::
### `Collapsible`
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::collapsible
| Prop | Default | Type |
| ------- | --------- | -------- |
| `name` | | `string` |
| `size` | `md` | `string` |
| `color` | `neutral` | `string` |
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::collapsible
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
```
:::
::
### `Field` and `FieldGroup`
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::field-group{.my-0}
:::::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
:::::
:::::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
:::::
:::::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
:::::
:::::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::field-group
::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
::
::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
::
::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
::
::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
::
::
```
:::
::
### `Icon`
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
::code-preview
:icon{name="i-simple-icons-nuxtdotjs"}
#code
```mdc
:icon{name="i-simple-icons-nuxtdotjs"}
```
::
### `Kbd`
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
::code-preview
#code
```mdc
:kbd{value="meta"} :kbd{value="K"}
```
::
### `Tabs`
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
::code-preview
:::tabs{.w-full}
::::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
::::
::::tabs-item{icon="i-lucide-eye" label="Preview"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
::::
:::
#code
````mdc
::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::
```
::::
:::tabs-item{icon="i-lucide-eye" label="Preview"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
:::
::
````
::
### `Steps`
Wrap your headings with the Steps component to display a list of steps.
Use the `level` prop to define which heading will be used for the steps.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::steps{level="4"}
#### Start a fresh new project
```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docus
```
#### Run docus CLI to run your dev server
```bash [Terminal]
docus dev
```
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
````mdc
::steps{level="4"}
#### Start a fresh new project
```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docus
```
#### Run docus CLI to run your dev server
```bash [Terminal]
docus dev
```
::
````
:::
::

53
.starter/content/2.essentials/4.images-embeds.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Images and Embeds
description: Add image, video, and other HTML elements
navigation:
icon: i-lucide-image
seo:
description: Add image, video, and other HTML elements using Docus theme
---
## Markdown
Display images or videos using standard Markdown syntax.
### Images
::code-preview
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
#code
```mdc
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
```
::
Or with your local images
::code-preview
![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
#code
```mdc
![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
```
::
::note{to="https://image.nuxt.com/"}
Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
::
### Videos
::prose-code-preview
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
#code
```mdc
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
```
::
###

123
.starter/content/index.md Normal file
View File

@ -0,0 +1,123 @@
---
seo:
title: Write beautiful docs with Markdown
description: Ship fast, flexible, and SEO-optimized documentation with beautiful
design out of the box. Docus brings together the best of the Nuxt ecosystem.
Powered by Nuxt UI Pro.
---
::u-page-hero
#title
Write beautiful docs with Markdown
#description
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
Docus brings the best of the Nuxt ecosystem into one CLI.
#links
:::u-button
---
color: neutral
size: xl
to: /getting-started/installation
trailing-icon: i-lucide-arrow-right
---
Get started
:::
:::u-button
---
color: neutral
icon: simple-icons-github
size: xl
to: https://github.com/nuxt-ui-pro/docus
variant: outline
---
Star on GitHub
:::
::
::u-page-section
#title
Shipped with many features
#features
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://nuxt.com
---
#title
Built with [Nuxt 3]{.text-primary}
#description
Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.
:::
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://ui.nuxt.com/
---
#title
Powered by [Nuxt UI Pro]{.text-primary}
#description
Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content.
:::
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://content.nuxt.com
---
#title
Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
#description
The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.
:::
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://nuxt.com/docs/guide/directory-structure/app-config
---
#title
Customize with [Nuxt App Config]{.text-primary}
#description
Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.
:::
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://content.nuxt.com/studio
---
#title
Collaborate on [Nuxt Studio]{.text-primary}
#description
Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
:::
:::u-page-feature
---
icon: i-simple-icons-nuxt
target: _blank
to: https://ui.nuxt.com/components/content-search
---
#title
Built-in navigation and [full-text search]{.text-primary}
#description
Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.
:::
::

12
.starter/package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "docus-starter",
"scripts": {
"dev": "docus dev",
"build": "docus build"
},
"dependencies": {
"docus": "latest",
"better-sqlite3": "^11.10.0",
"nuxt": "^3.17.6"
}
}

BIN
.starter/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
.starter/public/mountains.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

139
CHANGELOG.md Normal file
View File

@ -0,0 +1,139 @@
# Changelog
## [3.0.5](https://github.com/nuxtlabs/docus/compare/v3.0.4...v3.0.5) (2025-07-01)
### Features
* **app:** add `bash` & `diff` highlight langs ([55e0fa0](https://github.com/nuxtlabs/docus/commit/55e0fa0408e5d0656fa36cb49554668dbc288082))
* **app:** handle `github.rootDir` app config ([0698787](https://github.com/nuxtlabs/docus/commit/06987870962d6c3b604f35126c10018388930c37))
### Bug Fixes
* **app:** add `highlight` on content toc ([a511b50](https://github.com/nuxtlabs/docus/commit/a511b508cd2140f86ba7e045244cf59b68f84c68))
* **app:** allow content navigation variant override ([ccc1340](https://github.com/nuxtlabs/docus/commit/ccc1340faa0da10ac8e17d909739b987b337fcd4))
* **app:** display page links in header ([9acc755](https://github.com/nuxtlabs/docus/commit/9acc75565f1f92013371319a2506edbba7dd415c))
* **app:** import from `@nuxt/kit` ([d8dbee4](https://github.com/nuxtlabs/docus/commit/d8dbee4c804754b94ff3abc9e0d0225f5112688a))
* **app:** improve app config type ([246c16a](https://github.com/nuxtlabs/docus/commit/246c16a984e1e837c19bdd22c439bb6fb5bbf813))
* **app:** use `useClipboard` to copy page ([a8cd48b](https://github.com/nuxtlabs/docus/commit/a8cd48b063679b1c58142842ef857abf15fc8630))
## [3.0.4](https://github.com/nuxtlabs/docus/compare/v3.0.3...v3.0.4) (2025-06-24)
### Bug Fixes
* **prerender:** redirect issue with static deployment ([5f8fbb3](https://github.com/nuxtlabs/docus/commit/5f8fbb32c5cba8479b2562495d0fb7c49291c6de))
## [3.0.3](https://github.com/nuxtlabs/docus/compare/v3.0.2...v3.0.3) (2025-06-20)
### Features
* **nav:** handle nav for docs folder ([65a477a](https://github.com/nuxtlabs/docus/commit/65a477a0974ced0cae7aed6d5fd498ec4e7e0687))
### Bug Fixes
* **landing:** conditionally add prose ([1931668](https://github.com/nuxtlabs/docus/commit/19316680c2c2035d7d72b4628d2caa901b3a01a6))
* **landing:** put back prose ([73edf2a](https://github.com/nuxtlabs/docus/commit/73edf2a417802b5a366af17d17961f4e9a900564))
* **prerender:** add mardown raw content ([e35b7aa](https://github.com/nuxtlabs/docus/commit/e35b7aaab954f69b7b8edd67d92a37ba6678c9d4))
## [3.0.2](https://github.com/nuxtlabs/docus/compare/v3.0.1...v3.0.2) (2025-06-17)
### Features
* **llms:** enable full by default ([677078f](https://github.com/nuxtlabs/docus/commit/677078f0d1e432d7b25e876374e36eeb2796d5f2))
### Bug Fixes
* **setup:** docs layer ([d407155](https://github.com/nuxtlabs/docus/commit/d40715593adecf5e8421e100e897687a28a56e39))
* **starter:** prerender issues ([2facbea](https://github.com/nuxtlabs/docus/commit/2facbeaa3c8c9287c2048c754602063912fe5a49))
## [3.0.1](https://github.com/nuxtlabs/docus/compare/v3.0.0...v3.0.1) (2025-06-17)
### Bug Fixes
* **configs:** handle llms and site default configs in a module ([c642df9](https://github.com/nuxtlabs/docus/commit/c642df95c0a3a8b98eddaa33f00b5b1187eeaba8))
* improve async data key for SEO ([2de5ffe](https://github.com/nuxtlabs/docus/commit/2de5ffe22ccfc9fb46c802d0fbc77f4a764f78a5))
* **llms:** missing deps to enable full ([6d354ce](https://github.com/nuxtlabs/docus/commit/6d354ceafa7792880f50487d2ad392172df10d87))
* **setup:** define default app config in module ([b250a1b](https://github.com/nuxtlabs/docus/commit/b250a1b677c6cf1bf68794615c86599864ce9fd5))
## [3.0.0](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.3...v3.0.0) (2025-06-13)
### Features
* **llms:** enable full ([65374af](https://github.com/nuxtlabs/docus/commit/65374af2bc44c42cb35fa66055bd65d092dcd32e))
## [3.0.0-alpha.3](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.2...v3.0.0-alpha.3) (2025-06-12)
## [3.0.0-alpha.2](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2025-06-12)
### Bug Fixes
* **ci:** nightly ([26b92a7](https://github.com/nuxtlabs/docus/commit/26b92a71a2abd1e0216f6d7433edfde696c25264))
* **deps:** add brace-expansion as optimized deps ([32a5589](https://github.com/nuxtlabs/docus/commit/32a5589d0abaec0a4566778fa154e1eee28c014a))
* **deps:** remove brace-expansion optimization ([355ac39](https://github.com/nuxtlabs/docus/commit/355ac39d60674aec4e99234a6e73502db00ce4a8))
## [3.0.0-alpha.1](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2025-06-12)
### Bug Fixes
* **deps:** refine optimizeDeps of `@nuxt/content` ([#1080](https://github.com/nuxtlabs/docus/issues/1080)) ([ba0f6ef](https://github.com/nuxtlabs/docus/commit/ba0f6effa28b25135719746da17991453ffd678d))
## [3.0.0-alpha.0](https://github.com/nuxtlabs/docus/compare/v2.0.0-alpha.1...v3.0.0-alpha.0) (2025-06-12)
### Bug Fixes
* **docs:** use docus instead of @larbish/docus ([0dee9ec](https://github.com/nuxtlabs/docus/commit/0dee9ec484f4f097c68f2236cb2f927dcbd1db30))
## [2.0.0-alpha.1](https://github.com/nuxtlabs/docus/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2025-06-10)
### Bug Fixes
* **cli:** init command ([cfa6290](https://github.com/nuxtlabs/docus/commit/cfa6290f5aa38da852dad57780a277c502df3daf))
## [2.0.0-alpha.0](https://github.com/nuxtlabs/docus/compare/v2.0.0...v2.0.0-alpha.0) (2025-06-10)
### Features
* animate the menu toggle icon ([1cb0273](https://github.com/nuxtlabs/docus/commit/1cb0273d68e8b28b76c22f07cb40ca74c8034189))
* **app:** build command ([cb505bb](https://github.com/nuxtlabs/docus/commit/cb505bbfffc50654a4634846ff39510401c93bf2))
* **app:** compat nuxt version 4 ([594ac08](https://github.com/nuxtlabs/docus/commit/594ac0834738effb6752f3b3efc25d1dd9f0b3d7))
* **app:** init docus v2 ([bc3a9d1](https://github.com/nuxtlabs/docus/commit/bc3a9d101052fb787e562744d5d9b3d87799c24b))
* **app:** rename DocsHeaderRight to DocsPageHeaderLinks ([82a2ca8](https://github.com/nuxtlabs/docus/commit/82a2ca87aefdf446c62564010c6839b76a57de89))
* **ci:** publish nightly ([4753cd4](https://github.com/nuxtlabs/docus/commit/4753cd450f8f6741572911169ea21c88e1f75915))
* **components:** AppHeaderBody ([ae5ecc8](https://github.com/nuxtlabs/docus/commit/ae5ecc86d00918c9fb35f235bc2b72c322932f9d))
* **components:** customizable app header and docs asides ([4ca262b](https://github.com/nuxtlabs/docus/commit/4ca262b247f01ad4b8041bf106886f3d506525fa))
* **config:** handle app.config.ts ([739cbb1](https://github.com/nuxtlabs/docus/commit/739cbb151a5d8ff510662d1ee534a827e05cb21f))
* **docs:** docs header right ([843527c](https://github.com/nuxtlabs/docus/commit/843527cb6f909fd9cf5492b014b659d45490f3ef))
* **docs:** links from app config from docs aside right bottom ([28f521d](https://github.com/nuxtlabs/docus/commit/28f521dd51aa4ce5b7354416bd3bf626f9f79cd0))
* **docs:** trigger nightly ([4493e33](https://github.com/nuxtlabs/docus/commit/4493e33d6cce899d4eacb4f0191cbfe40b6554d9))
* improvements ([b1af212](https://github.com/nuxtlabs/docus/commit/b1af212900712223673617749eecb227378cb3e3))
* **llms:** integrate nuxt llms by default ([3f060d8](https://github.com/nuxtlabs/docus/commit/3f060d85bca006e8cea412144fdfda7eec481d1f))
* **seo:** og images landing ([a81f07b](https://github.com/nuxtlabs/docus/commit/a81f07b49ee21b6bb1e944178f596065ce8b0ff2))
* **seo:** site name and title template ([19fb325](https://github.com/nuxtlabs/docus/commit/19fb32542036ff943bc1ad532ce182d9fe036a5b))
* **social:** update og image ([87f87e4](https://github.com/nuxtlabs/docus/commit/87f87e4cb2905267feb2bd66fe8c744d7ace53af))
* **starter:** update ([6ddff7f](https://github.com/nuxtlabs/docus/commit/6ddff7fd3909c746c86ac6a82b6bbc350c3e987e))
### Bug Fixes
* add docs dir only if not found as layer ([05fdaf3](https://github.com/nuxtlabs/docus/commit/05fdaf3a87edf1b9470918259e7792b91a82d1a1))
* **app:** config ([af15911](https://github.com/nuxtlabs/docus/commit/af15911b054c9d7c3c22902f4d44860da3510f12))
* **cli:** layers ([370740c](https://github.com/nuxtlabs/docus/commit/370740c4231d147bac5c5f5f90702fc9f0b3a74e))
* **cli:** rename to docus ([ef17013](https://github.com/nuxtlabs/docus/commit/ef1701359be87390ceae4b064970269f4bd206b3))
* **cli:** update init cmd ([b902db7](https://github.com/nuxtlabs/docus/commit/b902db7ce6293c778577747905718e62e1e4d4cd))
* **config:** update toc links schema ([5ce2c70](https://github.com/nuxtlabs/docus/commit/5ce2c70aa7c52be341c9484d5fd10427c8320d09))
* **docs:** copy page ([63f1088](https://github.com/nuxtlabs/docus/commit/63f1088a7b4efe0cf12213df899554cb8e820a86))
* **docs:** safari copy to clipboard ([4761858](https://github.com/nuxtlabs/docus/commit/47618586a94169e9e4f75158ffd2e62539735f01))
* **git:** fetch info ([98dae4b](https://github.com/nuxtlabs/docus/commit/98dae4bf59829313cd630f7bf4eaffb6003cbe95))
* **git:** vercel branch name variable ([966a1b9](https://github.com/nuxtlabs/docus/commit/966a1b9369957e76019efdc3dc0c48c8d3c99a07))
* **icon:** use iconify provider ([f41113c](https://github.com/nuxtlabs/docus/commit/f41113c1f767db3f26830070db245fcd542caa5e))
* **landing:** neutral and primary in iframe command menu ([e16717d](https://github.com/nuxtlabs/docus/commit/e16717df0ae90cea71bf9c83eb8056c4a3d59202))
* **package:** add repository ([cebd917](https://github.com/nuxtlabs/docus/commit/cebd91740a797b7c4f94dd360b335a289f18e2e6))
* **package:** dev without rebuild ([67fad9e](https://github.com/nuxtlabs/docus/commit/67fad9ec773caeac517d737dfc8370b1302d4de5))
* **package:** set pnpm version ([b96e34b](https://github.com/nuxtlabs/docus/commit/b96e34b6cfb6a070667e812925c5058585710169))
* **pages:** possibility to set gh edit url ([85a01e7](https://github.com/nuxtlabs/docus/commit/85a01e79817c53142472c49a4e1db684c71c7b3e))
* **schema:** toc ([00b90d8](https://github.com/nuxtlabs/docus/commit/00b90d89fe16db9ee92894e8bb1e797674c9cd93))
* **seo:** default title and description ([0321956](https://github.com/nuxtlabs/docus/commit/03219562b9fa02eed1ee1bbf4cbab31092028911))
* **seo:** site name and url ([afc59b6](https://github.com/nuxtlabs/docus/commit/afc59b678287caf53b39ac69d65165a67a4840b8))
* **seo:** use seo key instead of site ([68bece7](https://github.com/nuxtlabs/docus/commit/68bece7bdbb9b9ef7d9ed7408a37ffb8445a0453))
* **seo:** use site title ([9e9df32](https://github.com/nuxtlabs/docus/commit/9e9df3264efec4fd6f4cf9843894c05f3f77ce15))
* **setup:** default header title ([1a4ee1d](https://github.com/nuxtlabs/docus/commit/1a4ee1d80f00d673b5b58048c28d673e977b0204))
* **setup:** infer URL ([105e1ca](https://github.com/nuxtlabs/docus/commit/105e1ca4ac7b33fd6589cc533c75bed561c06ca4))
* source app config ([abc5c35](https://github.com/nuxtlabs/docus/commit/abc5c355daa47665c064a19834455c1e57c5799c))

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) NuxtLabs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

53
README.md Normal file
View File

@ -0,0 +1,53 @@
[![docus](https://docus-puce.vercel.app/__og-image__/static/og.png)](https://docus.dev)
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
# Docus
Documentation Theme and CLI to write beautiful docs with Markdown.
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Docus brings together the best of the Nuxt ecosystem:
- [Nuxt 3](https://nuxt.com)
- [Nuxt Content](https://content.nuxt.com/)
- [Nuxt UI](https://ui.nuxt.com/)
- [Nuxt Image](https://image.nuxt.com/)
- [Nuxt LLMs](https://github.com/nuxtlabs/nuxt-llms)
- [Nuxt SEO](https://nuxtseo.com/)
- [UnJS ecosystem](https://unjs.io/)
- [Nuxt Studio](https://content.nuxt.com/studio)
## Contribution
<details>
<summary>Local development</summary>
- Clone this repository
- Install the latest LTS version of [Node.js](https://nodejs.org/en/)
- Install dependencies using `pnpm install`
- Run prepare command using `pnpm run dev:prepare`
- Run dev documentation built on top of Docus using `pnpm run dev`
</details>
## License
Published under the [MIT](https://github.com/unjs/undocs/blob/main/LICENSE) license.
Docus v3 has been entirely rewritten from scratch and is inspired and copied from [undocs](https://github.com/unjs/undocs) made by [@pi0](https://github.com/pi0) 💚
<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/docus/latest.svg?style=flat&colorA=020420&colorB=EEEEEE
[npm-version-href]: https://npmjs.com/package/docus
[npm-downloads-src]: https://img.shields.io/npm/dm/docus.svg?style=flat&colorA=020420&colorB=EEEEEE
[npm-downloads-href]: https://npm.chart.dev/docus
[license-src]: https://img.shields.io/npm/l/docus.svg?style=flat&colorA=020420&colorB=EEEEEE
[license-href]: https://npmjs.com/package/docus
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com

36
app/app/app.config.ts Normal file
View File

@ -0,0 +1,36 @@
export default defineAppConfig({
ui: {
colors: {
primary: 'emerald',
neutral: 'zinc',
},
},
uiPro: {
contentNavigation: {
slots: {
linkLeadingIcon: 'size-4 mr-1',
listWithChildren: 'border-(--ui-bg-elevated)',
linkTrailing: 'hidden',
},
variants: {
active: {
false: {
link: 'text-toned hover:after:bg-accented',
},
},
},
defaultVariants: {
variant: 'link',
},
},
pageLinks: {
slots: {
linkLeadingIcon: 'size-4',
linkLabelExternalIcon: 'size-2.5',
},
},
},
toc: {
title: 'On this page',
},
})

56
app/app/app.vue Normal file
View File

@ -0,0 +1,56 @@
<script setup lang="ts">
const { seo } = useAppConfig()
const site = useSiteConfig()
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
transform: data => data.find(item => item.path === '/docs')?.children || data || [],
})
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
server: false,
})
useHead({
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
link: [
{ rel: 'icon', href: '/favicon.ico' },
],
htmlAttrs: {
lang: 'en',
},
})
useSeoMeta({
titleTemplate: seo.titleTemplate,
title: seo.title,
description: seo.description,
ogSiteName: site.name,
twitterCard: 'summary_large_image',
})
provide('navigation', navigation)
</script>
<template>
<UApp>
<NuxtLoadingIndicator color="var(--ui-primary)" />
<AppHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<AppFooter />
<ClientOnly>
<LazyUContentSearch
:files="files"
:navigation="navigation"
/>
</ClientOnly>
</UApp>
</template>

5
app/app/assets/css/main.css Normal file
View File

@ -0,0 +1,5 @@
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../../../content/**/*";
@source "../../app.config.ts";

83
app/app/components/IconMenuToggle.vue Normal file
View File

@ -0,0 +1,83 @@
<script setup lang="ts">
import { motion } from 'motion-v'
import type { VariantType } from 'motion-v'
const props = defineProps<{
open: boolean
}>()
const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) } = {
normal: {
rotate: 0,
y: 0,
opacity: 1,
},
close: (custom: unknown) => {
const c = custom as number
return {
rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
y: c === 1 ? 6 : c === 3 ? -6 : 0,
opacity: c === 2 ? 0 : 1,
transition: {
type: 'spring',
stiffness: 260,
damping: 20,
},
}
},
}
const state = computed(() => props.open ? 'close' : 'normal')
</script>
<template>
<UButton
size="sm"
variant="ghost"
color="neutral"
class="-me-1.5"
square
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<motion.line
x1="4"
y1="6"
x2="20"
y2="6"
:variants="variants"
:animate="state"
:custom="1"
class="outline-none"
/>
<motion.line
x1="4"
y1="12"
x2="20"
y2="12"
:variants="variants"
:animate="state"
:custom="2"
class="outline-none"
/>
<motion.line
x1="4"
y1="18"
x2="20"
y2="18"
:variants="variants"
:animate="state"
:custom="3"
class="outline-none"
/>
</svg>
</UButton>
</template>

76
app/app/components/OgImage/OgImageDocs.vue Normal file
View File

@ -0,0 +1,76 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
title: 'title',
description: 'description',
})
const title = computed(() => (props.title || '').slice(0, 60))
const description = computed(() => (props.description || '').slice(0, 200))
</script>
<template>
<div class="w-full h-full flex flex-col justify-center bg-neutral-900">
<svg
class="absolute right-0 top-0 opacity-50"
width="629"
height="593"
viewBox="0 0 629 593"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_199_94966)">
<path
d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
fill="white"
/>
</g>
<defs>
<filter
id="filter0_f_199_94966"
x="0.873535"
y="-659"
width="1255.25"
height="1251.52"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="40.5"
result="effect1_foregroundBlur_199_94966"
/>
</filter>
</defs>
</svg>
<div class="pl-[100px]">
<p
v-if="headline"
class="uppercase text-[24px] text-emerald-500 mb-4 font-semibold"
>
{{ headline }}
</p>
<h1
v-if="title"
class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
>
<span>{{ title }}</span>
</h1>
<p
v-if="description"
class="text-[32px] text-neutral-300 leading-tight w-[700px]"
>
{{ description }}
</p>
</div>
</div>
</template>

73
app/app/components/OgImage/OgImageLanding.vue Normal file
View File

@ -0,0 +1,73 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
title: 'title',
description: 'description',
})
const title = computed(() => (props.title || '').slice(0, 60))
const description = computed(() => (props.description || '').slice(0, 200))
</script>
<template>
<div class="w-full h-full flex items-center justify-center bg-neutral-900">
<svg
class="absolute right-0 top-0 opacity-50 "
width="629"
height="593"
viewBox="0 0 629 593"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_199_94966)">
<path
d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
fill="white"
/>
</g>
<defs>
<filter
id="filter0_f_199_94966"
x="0.873535"
y="-659"
width="1255.25"
height="1251.52"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="40.5"
result="effect1_foregroundBlur_199_94966"
/>
</filter>
</defs>
</svg>
<div class="flex flex-col justify-center p-8">
<div class="flex justify-center mb-8">
<AppHeaderLogo white />
</div>
<h1
v-if="title"
class="flex justify-center m-0 text-5xl font-semibold mb-4 text-white"
>
<span>{{ title }}</span>
</h1>
<p
v-if="description"
class="text-center text-2xl text-neutral-300 leading-tight"
>
{{ description }}
</p>
</div>
</div>
</template>

40
app/app/components/app/AppFooter.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup lang="ts">
const appConfig = useAppConfig()
const links = computed(() => [
...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
'icon': `i-simple-icons-${key}`,
'to': url,
'target': '_blank',
'aria-label': `${key} social link`,
})),
appConfig.github?.url && {
'icon': 'i-simple-icons-github',
'to': appConfig.github.url,
'target': '_blank',
'aria-label': 'GitHub repository',
},
].filter(Boolean))
</script>
<template>
<UFooter>
<template #left>
<div class="text-sm text-muted">
Copyright © {{ new Date().getFullYear() }}
</div>
</template>
<template #right>
<template v-if="links.length">
<UButton
v-for="(link, index) of links"
:key="index"
size="sm"
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
/>
</template>
<UColorModeButton />
</template>
</UFooter>
</template>

57
app/app/components/app/AppHeader.vue Normal file
View File

@ -0,0 +1,57 @@
<script setup lang="ts">
const appConfig = useAppConfig()
const site = useSiteConfig()
const links = computed(() => appConfig.github?.url
? [
{
'icon': 'i-simple-icons-github',
'to': appConfig.github.url,
'target': '_blank',
'aria-label': 'GitHub',
},
]
: [])
</script>
<template>
<UHeader
:ui="{ center: 'flex-1' }"
to="/"
:title="appConfig.header?.title || site.name"
>
<AppHeaderCenter />
<template #title>
<AppHeaderLogo class="h-6 w-auto shrink-0" />
</template>
<template #right>
<AppHeaderCTA />
<UContentSearchButton class="lg:hidden" />
<UColorModeButton />
<template v-if="links?.length">
<UButton
v-for="(link, index) of links"
:key="index"
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
/>
</template>
</template>
<template #toggle="{ open, toggle }">
<IconMenuToggle
:open="open"
class="lg:hidden"
@click="toggle"
/>
</template>
<template #body>
<AppHeaderBody />
</template>
</UHeader>
</template>

13
app/app/components/app/AppHeaderBody.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
<template>
<UContentNavigation
highlight
variant="link"
:navigation="navigation"
/>
</template>

3
app/app/components/app/AppHeaderCTA.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div />
</template>

6
app/app/components/app/AppHeaderCenter.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<UContentSearchButton
:collapsed="false"
class="w-full"
/>
</template>

16
app/app/components/app/AppHeaderLogo.vue Normal file
View File

@ -0,0 +1,16 @@
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
<template>
<UColorModeImage
v-if="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
:light="appConfig.header?.logo?.light || appConfig.header?.logo?.dark"
:dark="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
:alt="appConfig.header?.logo?.alt || appConfig.header?.title"
class="h-6 w-auto shrink-0"
/>
<span v-else>
{{ appConfig.header?.title || '{appConfig.header.title}' }}
</span>
</template>

3
app/app/components/docs/DocsAsideLeftTop.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div />
</template>

17
app/app/components/docs/DocsAsideRightBottom.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
<template>
<div
v-if="appConfig.toc?.bottom?.links?.length"
class="hidden lg:block space-y-6"
>
<USeparator type="dashed" />
<UPageLinks
:title="appConfig.toc?.bottom?.title || 'Links'"
:links="appConfig.toc?.bottom?.links"
/>
</div>
</template>

77
app/app/components/docs/DocsPageHeaderLinks.vue Normal file
View File

@ -0,0 +1,77 @@
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
const route = useRoute()
const toast = useToast()
const { copy, copied } = useClipboard()
const markdownLink = computed(() => `${window?.location?.origin}/raw${route.path}.md`)
const items = [
{
label: 'Copy Markdown link',
icon: 'i-lucide-link',
onSelect() {
copy(markdownLink.value)
toast.add({
title: 'Markdown link copied to clipboard',
icon: 'i-lucide-check-circle',
color: 'success',
})
},
},
{
label: 'View as Markdown',
icon: 'i-simple-icons:markdown',
target: '_blank',
to: markdownLink.value,
},
{
label: 'Open in ChatGPT',
icon: 'i-simple-icons:openai',
target: '_blank',
to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
},
{
label: 'Open in Claude',
icon: 'i-simple-icons:anthropic',
target: '_blank',
to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
},
]
</script>
<template>
<UButtonGroup size="sm">
<UButton
label="Copy page"
:icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
color="neutral"
variant="outline"
:ui="{
leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5'],
}"
@click="copy(markdownLink)"
/>
<UDropdownMenu
size="sm"
:items="items"
:content="{
align: 'end',
side: 'bottom',
sideOffset: 8,
}"
:ui="{
content: 'w-48',
}"
>
<UButton
icon="i-lucide-chevron-down"
color="neutral"
variant="outline"
/>
</UDropdownMenu>
</UButtonGroup>
</template>

42
app/app/error.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup lang="ts">
import type { NuxtError } from '#app'
defineProps<{
error: NuxtError
}>()
useHead({
htmlAttrs: {
lang: 'en',
},
})
useSeoMeta({
title: 'Page not found',
description: 'We are sorry but this page could not be found.',
})
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
server: false,
})
provide('navigation', navigation)
</script>
<template>
<UApp>
<AppHeader />
<UError :error="error" />
<AppFooter />
<ClientOnly>
<LazyUContentSearch
:files="files"
:navigation="navigation"
/>
</ClientOnly>
</UApp>
</template>

24
app/app/layouts/docs.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
<template>
<UContainer>
<UPage>
<template #left>
<UPageAside>
<DocsAsideLeftTop />
<UContentNavigation
highlight
:navigation="navigation"
/>
</UPageAside>
</template>
<slot />
</UPage>
</UContainer>
</template>

136
app/app/pages/[...slug].vue Normal file
View File

@ -0,0 +1,136 @@
<script setup lang="ts">
import { kebabCase } from 'scule'
import type { ContentNavigationItem } from '@nuxt/content'
import { findPageHeadline } from '@nuxt/content/utils'
import { addPrerenderPath } from '../utils/prerender'
definePageMeta({
layout: 'docs',
})
const route = useRoute()
const appConfig = useAppConfig()
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const [{ data: page }, { data: surround }] = await Promise.all([
useAsyncData(kebabCase(route.path), () => queryCollection('docs').path(route.path).first()),
useAsyncData(`${kebabCase(route.path)}-surround`, () => {
return queryCollectionItemSurroundings('docs', route.path, {
fields: ['description'],
})
}),
])
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
// Add the page path to the prerender list
addPrerenderPath(`/raw${route.path}.md`)
const title = page.value.seo?.title || page.value.title
const description = page.value.seo?.description || page.value.description
useSeoMeta({
title,
ogTitle: title,
description,
ogDescription: description,
})
const headline = computed(() => findPageHeadline(navigation?.value, page.value?.path))
defineOgImageComponent('Docs', {
headline: headline.value,
})
const editLink = computed(() => {
if (!appConfig.github) {
return
}
return [
appConfig.github.url,
'edit',
appConfig.github.branch,
appConfig.github.rootDir,
'content',
`${page.value?.stem}.${page.value?.extension}`,
].filter(Boolean).join('/')
})
</script>
<template>
<UPage v-if="page">
<UPageHeader
:title="page.title"
:description="page.description"
:headline="headline"
:ui="{
wrapper: 'flex-row items-center flex-wrap justify-between',
}"
>
<template #links>
<UButton
v-for="(link, index) in page.links"
:key="index"
size="sm"
v-bind="link"
/>
<DocsPageHeaderLinks />
</template>
</UPageHeader>
<UPageBody>
<ContentRenderer
v-if="page"
:value="page"
/>
<USeparator>
<div
v-if="editLink"
class="flex items-center gap-2 text-sm text-muted"
>
<UButton
variant="link"
color="neutral"
:to="editLink"
target="_blank"
icon="i-lucide-pen"
:ui="{ leadingIcon: 'size-4' }"
>
Edit this page
</UButton>
or
<UButton
variant="link"
color="neutral"
:to="`${appConfig.github.url}/issues/new/choose`"
target="_blank"
icon="i-lucide-alert-circle"
:ui="{ leadingIcon: 'size-4' }"
>
Report an issue
</UButton>
</div>
</USeparator>
<UContentSurround :surround="surround" />
</UPageBody>
<template
v-if="page?.body?.toc?.links?.length"
#right
>
<UContentToc
highlight
:title="appConfig.toc?.title || 'Table of Contents'"
:links="page.body?.toc?.links"
>
<template #bottom>
<DocsAsideRightBottom />
</template>
</UContentToc>
</template>
</UPage>
</template>

39
app/app/pages/index.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
// Reconsider it once this is implemented: https://github.com/nuxt/content/issues/3419
const prose = page.value.meta.prose as boolean
const title = page.value.seo?.title || page.value.title
const description = page.value.seo?.description || page.value.description
useSeoMeta({
title,
description,
ogTitle: title,
ogDescription: description,
})
if (page.value?.seo?.ogImage) {
useSeoMeta({
ogImage: page.value.seo.ogImage,
twitterImage: page.value.seo.ogImage,
})
}
else {
defineOgImageComponent('Landing', {
title,
description,
})
}
</script>
<template>
<ContentRenderer
v-if="page"
:value="page"
:prose="prose || false"
/>
</template>

39
app/app/types/index.d.ts vendored Normal file
View File

@ -0,0 +1,39 @@
declare module 'nuxt/schema' {
interface AppConfig {
seo: {
titleTemplate: string
title: string
description: string
}
header: {
title: string
logo: {
light: string
dark: string
alt: string
}
}
socials: Record<string, string>
toc: {
title: string
bottom: {
title: string
links: {
icon: string
label: string
to: string
target: string
}[]
}
}
github: {
owner: string
name: string
url: string
branch: string
rootDir?: string
}
}
}
export {}

110
app/app/utils/git.ts Normal file
View File

@ -0,0 +1,110 @@
import { execSync } from 'node:child_process'
import { readGitConfig } from 'pkg-types'
import gitUrlParse from 'git-url-parse'
export interface GitInfo {
// Repository name
name: string
// Repository owner/organization
owner: string
// Repository URL
url: string
}
export function getGitBranch() {
const envName
= process.env.CF_PAGES_BRANCH
|| process.env.CI_COMMIT_BRANCH
|| process.env.VERCEL_GIT_COMMIT_REF
|| process.env.BRANCH
|| process.env.GITHUB_REF_NAME
if (envName && envName !== 'HEAD') {
return envName
}
try {
const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim()
if (branch && branch !== 'HEAD') {
return branch
}
}
catch {
// Ignore error
}
return 'main'
}
export async function getLocalGitInfo(rootDir: string): Promise<GitInfo | undefined> {
const remote = await getLocalGitRemote(rootDir)
if (!remote) {
return
}
// https://www.npmjs.com/package/git-url-parse#clipboard-example
const { name, owner, source } = gitUrlParse(remote)
const url = `https://${source}/${owner}/${name}`
return {
name,
owner,
url,
}
}
async function getLocalGitRemote(dir: string): Promise<string | undefined> {
try {
const parsed = await readGitConfig(dir)
if (!parsed) {
return
}
return parsed.remote?.['origin']?.url
}
catch {
// Ignore error
}
}
export function getGitEnv(): GitInfo {
// https://github.com/unjs/std-env/issues/59
const envInfo = {
// Provider
provider: process.env.VERCEL_GIT_PROVIDER // vercel
|| (process.env.GITHUB_SERVER_URL ? 'github' : undefined) // github
|| '',
// Owner
owner: process.env.VERCEL_GIT_REPO_OWNER // vercel
|| process.env.GITHUB_REPOSITORY_OWNER // github
|| process.env.CI_PROJECT_PATH?.split('/').shift() // gitlab
|| '',
// Name
name: process.env.VERCEL_GIT_REPO_SLUG
|| process.env.GITHUB_REPOSITORY?.split('/').pop() // github
|| process.env.CI_PROJECT_PATH?.split('/').splice(1).join('/') // gitlab
|| '',
// Url
url: process.env.REPOSITORY_URL || '', // netlify
}
if (!envInfo.url && envInfo.provider && envInfo.owner && envInfo.name) {
envInfo.url = `https://${envInfo.provider}.com/${envInfo.owner}/${envInfo.name}`
}
// If only url available (ex: Netlify)
if (!envInfo.name && !envInfo.owner && envInfo.url) {
try {
const { name, owner } = gitUrlParse(envInfo.url)
envInfo.name = name
envInfo.owner = owner
}
catch {
// Ignore error
}
}
return {
name: envInfo.name,
owner: envInfo.owner,
url: envInfo.url,
}
}

29
app/app/utils/meta.ts Normal file
View File

@ -0,0 +1,29 @@
import { readFile } from 'node:fs/promises'
import { resolve } from 'node:path'
export function inferSiteURL() {
// https://github.com/unjs/std-env/issues/59
return (
process.env.NUXT_SITE_URL
|| (process.env.NEXT_PUBLIC_VERCEL_URL && `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`) // Vercel
|| process.env.URL // Netlify
|| process.env.CI_PAGES_URL // Gitlab Pages
|| process.env.CF_PAGES_URL // Cloudflare Pages
)
}
export async function getPackageJsonMetadata(dir: string) {
try {
const packageJson = await readFile(resolve(dir, 'package.json'), 'utf-8')
const parsed = JSON.parse(packageJson)
return {
name: parsed.name,
description: parsed.description,
}
}
catch {
return {
name: 'docs',
}
}
}

12
app/app/utils/prerender.ts Normal file
View File

@ -0,0 +1,12 @@
export const addPrerenderPath = (path: string) => {
const event = useRequestEvent()
if (event) {
event.node.res.setHeader(
'x-nitro-prerender',
[
event.node.res.getHeader('x-nitro-prerender'),
path,
].filter(Boolean).join(','),
)
}
}

31
app/content.config.ts Normal file
View File

@ -0,0 +1,31 @@
import { defineContentConfig, defineCollection, z } from '@nuxt/content'
export default defineContentConfig({
collections: {
landing: defineCollection({
type: 'page',
source: {
// @ts-expect-error __DOCS_DIR__ is not defined
cwd: globalThis.__DOCS_DIR__,
include: 'index.md',
},
}),
docs: defineCollection({
type: 'page',
source: {
// @ts-expect-error __DOCS_DIR__ is not defined
cwd: globalThis.__DOCS_DIR__,
include: '**',
exclude: ['index.md'],
},
schema: z.object({
links: z.array(z.object({
label: z.string(),
icon: z.string(),
to: z.string(),
target: z.string().optional(),
})).optional(),
}),
}),
},
})

54
app/modules/default-configs.ts Normal file
View File

@ -0,0 +1,54 @@
import { defineNuxtModule } from '@nuxt/kit'
import { defu } from 'defu'
import { inferSiteURL, getPackageJsonMetadata } from '../app/utils/meta'
import { getGitBranch, getGitEnv, getLocalGitInfo } from '../app/utils/git'
export default defineNuxtModule({
meta: {
name: 'default-configs',
},
async setup(_options, nuxt) {
const dir = nuxt.options.rootDir
const url = inferSiteURL()
const meta = await getPackageJsonMetadata(dir)
const gitInfo = await getLocalGitInfo(dir) || getGitEnv()
const siteName = nuxt.options?.site?.name || meta.name || gitInfo?.name || ''
nuxt.options.llms = defu(nuxt.options.llms, {
domain: url,
title: siteName,
description: meta.description || '',
full: {
title: siteName,
description: meta.description || '',
},
})
nuxt.options.site = defu(nuxt.options.site, {
url,
name: siteName,
debug: false,
})
nuxt.options.appConfig.header = defu(nuxt.options.appConfig.header, {
title: siteName,
})
nuxt.options.appConfig.seo = defu(nuxt.options.appConfig.seo, {
titleTemplate: `%s - ${siteName}`,
title: siteName,
description: meta.description || '',
})
nuxt.options.appConfig.github = defu(nuxt.options.appConfig.github, {
owner: gitInfo?.owner,
name: gitInfo?.name,
url: gitInfo?.url,
branch: getGitBranch(),
})
nuxt.options.appConfig.toc = defu(nuxt.options.appConfig.toc, {
title: 'On this page',
})
},
})

49
app/nuxt.config.ts Normal file
View File

@ -0,0 +1,49 @@
import { extendViteConfig } from '@nuxt/kit'
// Flag enabled when developing docs theme
const dev = !!process.env.NUXT_DOCS_DEV
export default defineNuxtConfig({
modules: [
'@nuxt/ui-pro',
'@nuxt/content',
'@nuxt/image',
'@nuxtjs/robots',
'nuxt-og-image',
'nuxt-llms',
() => {
// Update @nuxt/content optimizeDeps options
extendViteConfig((config) => {
config.optimizeDeps ||= {}
config.optimizeDeps.include ||= []
config.optimizeDeps.include.push('@nuxt/content > slugify')
config.optimizeDeps.include = config.optimizeDeps.include
.map(id => id.replace(/^@nuxt\/content > /, 'docus > @nuxt/content > '))
})
},
],
devtools: {
enabled: dev,
},
css: ['../app/assets/css/main.css'],
content: {
build: {
markdown: {
highlight: {
langs: ['bash', 'diff', 'json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml'],
},
},
},
},
nitro: {
prerender: {
routes: ['/'],
crawlLinks: true,
failOnError: false,
autoSubfolderIndex: false,
},
},
icon: {
provider: 'iconify',
},
})

218
app/nuxt.schema.ts Normal file
View File

@ -0,0 +1,218 @@
import { field, group } from '@nuxt/content/preview'
export default defineNuxtSchema({
appConfig: {
ui: group({
title: 'UI',
description: 'UI Customization.',
icon: 'i-lucide-palette',
fields: {
colors: group({
title: 'Colors',
description: 'Manage main colors of your application',
icon: 'i-lucide-palette',
fields: {
primary: field({
type: 'string',
title: 'Primary',
description: 'Primary color of your UI.',
icon: 'i-lucide-palette',
default: 'green',
required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'],
}),
neutral: field({
type: 'string',
title: 'Neutral',
description: 'Neutral color of your UI.',
icon: 'i-lucide-palette',
default: 'slate',
required: ['slate', 'gray', 'zinc', 'neutral', 'stone'],
}),
},
}),
icons: group({
title: 'Icons',
description: 'Manage icons used in the application.',
icon: 'i-lucide-settings',
fields: {
search: field({
type: 'icon',
title: 'Search Bar',
description: 'Icon to display in the search bar.',
icon: 'i-lucide-search',
default: 'i-lucide-search',
}),
dark: field({
type: 'icon',
title: 'Dark mode',
description: 'Icon of color mode button for dark mode.',
icon: 'i-lucide-moon',
default: 'i-lucide-moon',
}),
light: field({
type: 'icon',
title: 'Light mode',
description: 'Icon of color mode button for light mode.',
icon: 'i-lucide-sun',
default: 'i-lucide-sun',
}),
external: field({
type: 'icon',
title: 'External Link',
description: 'Icon for external link.',
icon: 'i-lucide-external-link',
default: 'i-lucide-external-link',
}),
chevron: field({
type: 'icon',
title: 'Chevron',
description: 'Icon for chevron.',
icon: 'i-lucide-chevron-down',
default: 'i-lucide-chevron-down',
}),
hash: field({
type: 'icon',
title: 'Hash',
description: 'Icon for hash anchors.',
icon: 'i-lucide-hash',
default: 'i-lucide-hash',
}),
},
}),
},
}),
seo: group({
title: 'SEO',
description: 'SEO configuration.',
icon: 'i-lucide-search',
fields: {
title: field({
type: 'string',
title: 'Title',
description: 'Title to display in the header.',
icon: 'i-lucide-type',
default: '',
}),
description: field({
type: 'string',
title: 'Description',
description: 'Description to display in the header.',
icon: 'i-lucide-type',
default: '',
}),
},
}),
header: group({
title: 'Header',
description: 'Header configuration.',
icon: 'i-lucide-layout',
fields: {
title: field({
type: 'string',
title: 'Title',
description: 'Title to display in the header.',
icon: 'i-lucide-type',
default: '',
}),
logo: group({
title: 'Logo',
description: 'Header logo configuration.',
icon: 'i-lucide-image',
fields: {
light: field({
type: 'media',
title: 'Light Mode Logo',
description: 'Pick an image from your gallery.',
icon: 'i-lucide-sun',
default: '',
}),
dark: field({
type: 'media',
title: 'Dark Mode Logo',
description: 'Pick an image from your gallery.',
icon: 'i-lucide-moon',
default: '',
}),
alt: field({
type: 'string',
title: 'Alt',
description: 'Alt to display for accessibility.',
icon: 'i-lucide-text',
default: '',
}),
},
}),
},
}),
socials: field({
type: 'object',
title: 'Social Networks',
description: 'Social links configuration.',
icon: 'i-lucide-network',
default: {},
}),
toc: group({
title: 'Table of contents',
description: 'TOC configuration.',
icon: 'i-lucide-list',
fields: {
title: field({
type: 'string',
title: 'Title',
description: 'Title of the table of contents.',
icon: 'i-lucide-heading',
default: 'On this page',
}),
bottom: group({
title: 'Bottom',
description: 'Bottom section of the table of contents.',
icon: 'i-lucide-list',
fields: {
title: field({
type: 'string',
title: 'Title',
description: 'Title of the bottom section.',
icon: 'i-lucide-heading',
default: 'Community',
}),
links: field({
type: 'array',
title: 'Links',
description: 'Links to display in the bottom section.',
icon: 'i-lucide-link',
default: [],
}),
},
}),
},
}),
github: group({
title: 'GitHub',
description: 'GitHub configuration.',
icon: 'i-simple-icons-github',
fields: {
url: field({
type: 'string',
title: 'URL',
description: 'GitHub URL.',
icon: 'i-simple-icons-github',
default: '',
}),
branch: field({
type: 'string',
title: 'Branch',
description: 'GitHub branch.',
icon: 'i-lucide-git-branch',
default: 'main',
}),
rootDir: field({
type: 'string',
title: 'Root Directory',
description: 'Root directory of the GitHub repository.',
icon: 'i-lucide-folder',
default: '',
}),
},
}),
},
})

25
app/server/routes/raw/[...slug].md.get.ts Normal file
View File

@ -0,0 +1,25 @@
import { withLeadingSlash } from 'ufo'
import { stringify } from 'minimark/stringify'
import { queryCollection } from '@nuxt/content/nitro'
export default eventHandler(async (event) => {
const slug = getRouterParams(event)['slug.md']
if (!slug?.endsWith('.md')) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
const path = withLeadingSlash(slug.replace('.md', ''))
const page = await queryCollection(event, 'docs').path(path).first()
if (!page) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
// Add title and description to the top of the page if missing
if (page.body.value[0]?.[0] !== 'h1') {
page.body.value.unshift(['blockquote', {}, page.description])
page.body.value.unshift(['h1', {}, page.title])
}
setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' })
})

3
app/tsconfig.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "./.nuxt/tsconfig.json"
}

95
cli/cli.ts Normal file
View File

@ -0,0 +1,95 @@
import { resolve } from 'node:path'
import { defineCommand, runMain } from 'citty'
import type { ArgsDef } from 'citty'
import { getNuxtConfig } from './setup'
import type { CLIOptions } from './types'
export function createCLI(opts: CLIOptions) {
const sharedArgs: ArgsDef = {
dir: {
type: 'positional',
description: 'Docs directory',
required: true,
default: '.',
},
}
const init = defineCommand({
meta: {
name: 'init',
description: 'Initialize a fresh Docus project',
},
args: { ...sharedArgs },
async setup({ args }) {
const dir = resolve(args.dir as string)
const { runCommand } = await import('nuxi')
await runCommand('init', [dir, '-t', 'gh:nuxtlabs/docus/.starter', dir])
},
})
const dev = defineCommand({
meta: {
name: 'dev',
description: 'Start docs in development mode',
},
args: { ...sharedArgs },
async setup({ args }) {
const dir = resolve(args.dir as string)
const nuxtConfig = await getNuxtConfig(dir, {
...opts.setup,
dev: true,
})
const { runCommand } = await import('nuxi')
await runCommand('dev', [dir, '--no-fork', '--port', process.env.PORT || '4000'], { overrides: nuxtConfig })
},
})
const prepare = defineCommand({
meta: {
name: 'prepare',
description: 'Prepare docs for development or production',
},
args: { ...sharedArgs },
async setup({ args }) {
const dir = resolve(args.dir as string)
const nuxtConfig = await getNuxtConfig(dir, opts.setup)
const { runCommand } = await import('nuxi')
await runCommand('prepare', [dir], { overrides: nuxtConfig })
},
})
const build = defineCommand({
meta: {
name: 'build',
description: 'Build docs for production',
},
args: { ...sharedArgs },
async setup({ args }) {
const dir = resolve(args.dir as string)
const nuxtConfig = await getNuxtConfig(dir, opts.setup)
const { runCommand } = await import('nuxi')
await runCommand('build', [dir], { overrides: nuxtConfig })
},
})
const main = defineCommand({
meta: {
name: opts.name,
description: opts.description,
},
subCommands: {
init,
dev,
prepare,
build,
},
})
return {
runMain: () => runMain(main),
}
}

16
cli/main.ts Executable file
View File

@ -0,0 +1,16 @@
#!/usr/bin/env node
import * as dotenv from 'dotenv'
import { createCLI } from './cli'
dotenv.config()
const cli = createCLI({
name: 'Docus',
description: 'Docus Docs CLI',
setup: {
defaults: {},
},
})
cli.runMain()

38
cli/setup.ts Normal file
View File

@ -0,0 +1,38 @@
import { fileURLToPath } from 'node:url'
import { resolve } from 'node:path'
import type { NuxtConfig } from 'nuxt/config'
import type { DocsOptions } from './types'
declare global {
const __DOCS_DIR__: string
}
const appDir = fileURLToPath(new URL('../app', import.meta.url))
const pkgDir = fileURLToPath(new URL('..', import.meta.url))
export async function getNuxtConfig(dir: string, _opts: DocsOptions = {}) {
const fixLayers = (_, nuxt) => {
const hasDocsDir = nuxt.options._layers.some(layer => layer.cwd === dir)
if (!hasDocsDir) {
nuxt.options._layers.unshift({
cwd: dir,
config: {
rootDir: dir,
srcDir: dir,
},
})
}
}
// @ts-expect-error __DOCS_DIR__ is not defined
global.__DOCS_DIR__ = resolve(dir, 'content')
// Prepare loadNuxt overrides
return {
compatibilityDate: '2025-06-17',
extends: [appDir],
modulesDir: [resolve(pkgDir, 'node_modules'), resolve(appDir, 'node_modules')],
modules: [fixLayers],
} as NuxtConfig
}

23
cli/types.ts Normal file
View File

@ -0,0 +1,23 @@
export interface CLIOptions {
name: string
description: string
setup: DocsOptions
}
export interface DocsOptions {
dev?: boolean
defaults?: {
// Module name
name?: string
// Module description
description?: string
// Docs directory
dir?: string
// Website URL
url?: string
// GitHub repository
github?: string
// GitHub branch
branch?: string
}
}

41
docs/app/app.config.ts Normal file
View File

@ -0,0 +1,41 @@
export default defineAppConfig({
socials: {
x: 'https://x.com/nuxt_js',
discord: 'https://discord.com/invite/ps2h6QT',
nuxt: 'https://nuxt.com',
},
github: {
rootDir: 'docs',
},
toc: {
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-lucide-credit-card',
label: 'Purchase a license',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank',
}],
},
},
uiPro: {
pageHero: {
slots: {
title: 'font-semibold sm:text-6xl',
container: '!pb-0',
},
},
pageCard: {
slots: {
container: 'lg:flex min-w-0',
wrapper: 'flex-none',
},
},
},
})

14
docs/app/assets/css/main.css Normal file
View File

@ -0,0 +1,14 @@
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../../../content/**/*";
@source "../../../../app/app/app.config.ts";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--container-8xl: 90rem;
}
:root {
--ui-container: var(--container-8xl);
}

11
docs/app/components/AppHeaderCTA.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<UButton
v-if="$route.path == '/'"
to="/getting-started/installation"
color="neutral"
size="sm"
class="hidden lg:inline-flex"
>
Get Started
</UButton>
</template>

90
docs/app/components/AppHeaderLogo.vue Normal file
View File

@ -0,0 +1,90 @@
<script setup lang="ts">
const props = defineProps<{
white?: boolean
}>()
const isBlinking = ref(false)
const isHovering = ref(false)
const isTouchDevice = ref(false)
let cleanup: (() => void) | undefined
const color = computed(() => props.white ? 'text-white' : 'text-black dark:text-white')
function setupBlinking() {
const blinkDelay = Math.random() * 5000 + 2000
const timerId = setTimeout(() => {
isBlinking.value = true
const blinkTimerId = setTimeout(() => {
isBlinking.value = false
setupBlinking()
}, 200)
return () => clearTimeout(blinkTimerId)
}, blinkDelay)
return () => clearTimeout(timerId)
}
onMounted(() => {
cleanup = setupBlinking()
isTouchDevice.value = 'ontouchstart' in window
})
onBeforeUnmount(() => {
cleanup?.()
})
</script>
<template>
<svg
viewBox="0 0 139 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:class="color"
alt="Docus logo"
@mouseenter="isHovering = true"
@mouseleave="isHovering = false"
>
<path
v-if="isBlinking || (isHovering && !isTouchDevice)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 16.0501C26.697 16.0501 28.2332 17.8658 28.2332 15.9708C28.2332 15.9708 26.697 15 24.802 15C22.907 15 21.3708 15.9708 21.3708 15.9708C21.3708 17.8658 22.907 16.0501 24.802 16.0501ZM14.6182 16.0501C16.5133 16.0501 18.0494 17.866 18.0494 15.971C18.0494 15.971 16.395 15 14.5 15C12.605 15 11.1871 15.971 11.1871 15.971C11.1871 17.866 12.7233 16.0501 14.6182 16.0501Z"
fill="currentColor"
/>
<path
v-else
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 19.402C26.697 19.402 28.2332 17.8658 28.2332 15.9708C28.2332 14.0758 26.697 12.5396 24.802 12.5396C22.907 12.5396 21.3708 14.0758 21.3708 15.9708C21.3708 17.8658 22.907 19.402 24.802 19.402ZM14.6182 19.4022C16.5133 19.4022 18.0494 17.866 18.0494 15.971C18.0494 14.076 16.5133 12.5398 14.6182 12.5398C12.7233 12.5398 11.1871 14.076 11.1871 15.971C11.1871 17.866 12.7233 19.4022 14.6182 19.4022Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M66.9254 19.7235C66.9254 21.3159 67.3047 22.7336 68.0589 23.983C68.8344 25.2345 69.9001 26.2128 71.2614 26.9192C72.6224 27.6255 74.1522 27.9808 75.8559 27.9808C77.58 27.9808 79.1197 27.6253 80.4803 26.9192C81.8415 26.2129 82.8968 25.2349 83.6521 23.9842C84.4068 22.7345 84.7864 21.3165 84.7864 19.7235C84.7864 18.1306 84.4068 16.7233 83.653 15.4945L83.6521 15.4931C82.8972 14.243 81.8427 13.2757 80.4828 12.5895L80.4803 12.5883C79.1197 11.8823 77.58 11.5267 75.8559 11.5267C74.1318 11.5267 72.5921 11.8823 71.2315 12.5883L71.2303 12.5889C69.8902 13.2748 68.8346 14.2426 68.0589 15.4943C67.3044 16.7442 66.9254 18.1519 66.9254 19.7235ZM78.487 22.7884L78.4893 22.7858C79.1787 22.025 79.5098 20.9944 79.5098 19.7235C79.5098 18.472 79.1782 17.4602 78.487 16.7192C77.7995 15.9821 76.9158 15.6155 75.8559 15.6155C74.796 15.6155 73.9122 15.9821 73.2248 16.7192C72.5336 17.4602 72.202 18.472 72.202 19.7235C72.202 20.9944 72.533 22.025 73.2224 22.7858L73.2248 22.7884C73.9122 23.5254 74.796 23.892 75.8559 23.892C76.9158 23.892 77.7995 23.5254 78.487 22.7884Z"
fill="currentColor"
/>
<path
d="M102.777 23.9716C102.226 25.168 101.362 26.1218 100.178 26.8352C98.8826 27.5957 97.3382 27.9808 95.5355 27.9808C93.7706 27.9808 92.2006 27.6249 90.82 26.9186C89.4388 26.2119 88.3637 25.2336 87.5888 23.983C86.8345 22.7336 86.4553 21.3159 86.4553 19.7235C86.4553 18.1307 86.8347 16.7236 87.5884 15.495C88.363 14.2446 89.4374 13.2767 90.8176 12.5902L90.82 12.5889C92.2006 11.8826 93.7706 11.5267 95.5355 11.5267C97.3377 11.5267 98.8816 11.9217 100.177 12.7019L100.179 12.7032C101.362 13.3981 102.226 14.3415 102.777 15.536C102.812 15.6127 102.782 15.7129 102.692 15.7592L99.0173 17.6509C98.9272 17.6973 98.8018 17.6656 98.7381 17.559C97.9721 16.2774 96.8895 15.6155 95.5056 15.6155C94.4273 15.6155 93.5161 15.9808 92.7896 16.714L92.7871 16.7165C92.0745 17.4573 91.7318 18.4701 91.7318 19.7235C91.7318 20.9962 92.0739 22.0278 92.7847 22.7885L92.7871 22.7911L92.7896 22.7935C93.5162 23.5267 94.4273 23.892 95.5056 23.892C96.8895 23.892 97.9721 23.2301 98.7381 21.9485C98.8018 21.842 98.9272 21.8102 99.0173 21.8566L102.692 23.7483C102.782 23.7947 102.812 23.8948 102.777 23.9716Z"
fill="currentColor"
/>
<path
d="M116.533 27.5185V25.5732L116.118 26.034C115.543 26.6721 114.853 27.1553 114.047 27.4846C113.238 27.8151 112.38 27.9808 111.471 27.9808C109.424 27.9808 107.811 27.3731 106.605 26.1761C105.427 24.9869 104.817 23.1837 104.817 20.7212V11.989C104.817 11.884 104.903 11.7988 105.008 11.7988H109.844C109.949 11.7988 110.034 11.884 110.034 11.989V19.784C110.034 21.0337 110.266 21.9976 110.777 22.6251C111.291 23.2566 112.035 23.5594 112.969 23.5594C113.93 23.5594 114.725 23.2222 115.333 22.5432C115.968 21.8368 116.263 20.7912 116.263 19.4514V11.989C116.263 11.884 116.348 11.7988 116.453 11.7988H121.29C121.395 11.7988 121.48 11.884 121.48 11.989V27.5185C121.48 27.6236 121.395 27.7087 121.29 27.7087H116.723C116.618 27.7087 116.533 27.6236 116.533 27.5185Z"
fill="currentColor"
/>
<path
d="M133.19 22.3635C133.033 22.198 132.813 22.0836 132.552 22.0061C132.068 21.8373 131.311 21.6843 130.294 21.5434L130.291 21.543C129.001 21.3828 127.905 21.1732 127.001 20.9156C126.145 20.6659 125.403 20.2057 124.772 19.5307C124.166 18.8818 123.848 17.9594 123.848 16.7305C123.848 15.7331 124.141 14.8573 124.727 14.0941L124.729 14.0918C125.316 13.3081 126.176 12.6868 127.322 12.2358L127.324 12.235C128.488 11.7654 129.884 11.5267 131.52 11.5267C132.682 11.5267 133.834 11.6459 134.977 11.8845C135.957 12.0892 136.792 12.3657 137.485 12.7111C137.561 12.7486 137.599 12.8448 137.559 12.9371L136.195 16.0508C136.152 16.151 136.024 16.2007 135.913 16.145C134.558 15.4693 133.102 15.1318 131.55 15.1318C130.644 15.1318 129.937 15.2416 129.465 15.4899C129 15.7145 128.705 16.053 128.705 16.5188C128.705 16.762 128.779 16.9814 128.933 17.1638C129.084 17.3421 129.298 17.4701 129.553 17.5599L129.558 17.5614L129.562 17.5628C130.04 17.7094 130.814 17.8627 131.874 18.0241C133.206 18.2247 134.303 18.4545 135.167 18.7122C136.003 18.9613 136.725 19.4206 137.336 20.0951L137.338 20.0977L137.341 20.1003C137.945 20.7286 138.263 21.6295 138.263 22.8375C138.263 23.8133 137.97 24.6901 137.382 25.4752C136.797 26.2372 135.919 26.849 134.731 27.301L134.73 27.3015C133.566 27.7517 132.149 27.9808 130.471 27.9808C129.131 27.9808 127.811 27.8318 126.511 27.5337C125.374 27.2555 124.443 26.9114 123.712 26.505C123.641 26.4657 123.606 26.3729 123.645 26.2838L125.008 23.1475C125.053 23.0442 125.188 22.9929 125.304 23.056C125.966 23.4151 126.719 23.7105 127.561 23.9439L127.565 23.9449C128.602 24.2117 129.631 24.3455 130.651 24.3455C131.573 24.3455 132.269 24.2564 132.701 24.0502L132.706 24.0479C133.163 23.8172 133.436 23.4641 133.436 22.9887C133.436 22.7491 133.354 22.5358 133.19 22.3635Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M44.6799 7.02197H53.7408C56.0076 7.02197 58.0084 7.44945 59.7488 8.29791C61.4884 9.14597 62.8315 10.3455 63.7852 11.897C64.7377 13.4466 65.2181 15.2665 65.2181 17.3654C65.2181 19.4642 64.7377 21.2841 63.7852 22.8337C62.8315 24.3852 61.4884 25.5847 59.7488 26.4328C58.0084 27.2813 56.0076 27.7087 53.7408 27.7087H44.6799C44.3382 27.7087 44.0612 27.4318 44.0612 27.0901V7.64061C44.0612 7.29895 44.3382 7.02197 44.6799 7.02197ZM53.5011 23.4083C55.3462 23.4083 56.8475 22.8794 57.9792 21.8014C59.1352 20.7194 59.7018 19.2302 59.7018 17.3654C59.7018 15.5005 59.1352 14.0113 57.9792 12.9293C56.8475 11.8513 55.3462 11.3224 53.5011 11.3224H50.1841C49.816 11.3224 49.5175 11.6209 49.5175 11.989V22.7417C49.5175 23.1098 49.816 23.4083 50.1841 23.4083H53.5011Z"
fill="currentColor"
/>
</svg>
</template>

21
docs/app/components/content/BrowserFrame.vue Normal file
View File

@ -0,0 +1,21 @@
<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>

33
docs/app/components/content/ColorModeSwitch.vue Normal file
View File

@ -0,0 +1,33 @@
<script setup>
const colorMode = useColorMode()
const isLight = computed({
get() {
return colorMode.value === 'light'
},
set(_isLight) {
colorMode.preference = _isLight ? 'light' : 'dark'
},
})
</script>
<template>
<ClientOnly>
<div class="flex-1 flex items-center justify-center">
<USwitch
v-model="isLight"
unchecked-icon="i-lucide-moon"
checked-icon="i-lucide-sun"
aria-label="Toggle color mode"
size="xl"
color="neutral"
:ui="{
base: 'w-70 h-35 rounded-lg rotate-90 data-[state=checked]:bg-[var(--ui-color-neutral-200)]',
thumb: 'data-[state=checked]:translate-x-35 data-[state=checked]:rtl:-translate-x-35 rounded-lg size-34',
icon: 'rotate-270 size-8',
}"
@click="isDark = !isDark"
/>
</div>
</ClientOnly>
</template>

14
docs/app/components/content/CommandSearch.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup lang="ts">
const appConfig = useAppConfig()
const src = computed(() => `https://ui.nuxt.com/examples/content-search-example?primary=${appConfig.ui.colors?.primary}&neutral=${appConfig.ui.colors?.neutral}`)
</script>
<template>
<ClientOnly>
<iframe
:src="src"
class="rounded-lg relative h-96 w-full"
/>
</ClientOnly>
</template>

18
docs/app/components/content/FloatingNuxt.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="flex-1 flex items-center justify-center">
<NuxtImg
src="/landing/nuxt-logo-3D.svg"
class="h-42 floating-logo"
alt="Nuxt 3D Logo"
/>
</div>
</template>
<style>
.floating-logo {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.group:hover .floating-logo {
transform: translateY(-20px);
}
</style>

87
docs/app/components/content/NuxtImage.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="w-full flex items-center justify-center">
<svg
width="309"
height="309"
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0"
y="0"
width="309"
height="309"
rx="8"
fill="url(#paint0_linear_549_2095)"
fill-opacity="0.2"
/>
<rect
x="0.5"
y="0.5"
width="308"
height="308"
rx="8"
stroke="url(#paint1_linear_549_2095)"
stroke-opacity="0.4"
/>
<path
d="M250.424 224.554C251.995 199.097 246.309 173.754 234.01 151.409C221.753 129.139 206.184 104.281 197.759 104.281C182.497 104.281 159.941 135.743 151.205 139.926C139.866 129.94 100.698 80.5 88.8565 80.5C77.0152 80.5 29.4718 153.81 20.6396 172.34C6.93039 201.102 2.09076 293.5 22.2949 293.5C35.8243 293.5 51.7545 293.459 69.0776 293.414C108.704 293.311 190.075 293.104 232.215 293.414C243.818 293.499 248.52 255.423 250.424 224.554Z"
fill="url(#paint2_linear_549_2095)"
fill-opacity="0.3"
/>
<path
d="M241.47 38.3696C241.47 47.4864 234.079 54.877 224.963 54.877C215.846 54.877 208.455 47.4864 208.455 38.3696C208.455 29.2529 215.846 21.8623 224.963 21.8623C234.079 21.8623 241.47 29.2529 241.47 38.3696Z"
fill="white"
fill-opacity="0.3"
/>
<defs>
<linearGradient
id="paint0_linear_549_2095"
x1="154.5"
y1="0.5"
x2="154.5"
y2="308.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="paint1_linear_549_2095"
x1="154.5"
y1="0.5"
x2="154.5"
y2="308.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="paint2_linear_549_2095"
x1="126.999"
y1="48.1171"
x2="132.171"
y2="247.688"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
</defs>
</svg>
</div>
</template>

2
docs/content/1.getting-started/.navigation.yml Normal file
View File

@ -0,0 +1,2 @@
title: Getting Started
icon: false

54
docs/content/1.getting-started/2.introduction.md Normal file
View File

@ -0,0 +1,54 @@
---
title: Introduction
description: Welcome to Docus theme documentation.
navigation:
icon: i-lucide-house
seo:
title: Introduction
description: Discover how to create, manage, and publish documentation
effortlessly with Docus.
---
Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro).
## What is Docus?
Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com).
We use this theme across all our Nuxt module documentations, including:
::card-group
:::card
---
icon: i-simple-icons-nuxtdotjs
target: _blank
title: Nuxt Image
to: https://image.nuxt.com
---
The documentation of `@nuxt/image`
:::
:::card
---
icon: i-simple-icons-nuxtdotjs
target: _blank
title: Nuxt Supabase
to: https://supabase.nuxtjs.org
---
The documentation of `@nuxt/supabase`
:::
::
## Key Features
This theme includes a range of features designed to improve documentation management:
- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required!
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
- **Full-Text Search**: Includes built-in search functionality for content discovery.
- **Optimized Typography**: Features refined typography for enhanced readability.
- **Dark Mode**: Offers dark mode support for user preference.
- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities.

65
docs/content/1.getting-started/3.installation.md Normal file
View File

@ -0,0 +1,65 @@
---
title: Installation
description: Get started with Docus.
navigation:
icon: i-lucide-download
seo:
description: Get started with Docus documentation theme.
---
## Local development
::steps
### Create your docs directory
Use the `docus` CLI to create a new Docus project in the `docs/` directory:
```bash [Terminal]
npx docus init docs
```
We recommend using the `npm` package manager.
### Start your docs server in development
Move to the `docs/` directory and start your docs server in development mode:
```bash [Terminal]
npm run dev
```
A local preview of your documentation will be available at <http://localhost:4000>
### Write your documentation
Head over the [Edition](/concepts/edition) section to learn how to write your documentation.
::
## Online Edition with [Nuxt Studio](https://content.nuxt.com/studio)
::prose-steps
### Create a new project on [Nuxt Studio](https://nuxt.studio)
From your user or team dashboard, click the `New project` button then choose `Start from a template` and select **Docus.** Clone it on your GitHub personal account or any organisation of your choice.
### Deploy in one click
Once your project has been created and you're in the project dashboard, navigate to the `Deploy` section, choose the `GitHub Pages` tab and set your [Nuxt UI Pro license](https://ui.nuxt.com/pro/pricing) (`NUXT_UI_PRO_LICENSE` ) in the environment variables then click on the **Deploy** button.
:::prose-note
---
to: https://content.nuxt.com/docs/studio/setup#enable-the-full-editing-experience
---
This is a one click static deployment available with [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) but you can also handle deployment yourself and use the `Selfhosted` tab.
:::
### Write your documentation in the editor
Once the deployment is achieved, you'll be able to display the preview of your documentation. You can browse your content pages to edit them or create new ones.
:video{controls loop poster="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.jpg" src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
::
::prose-tip{to="https://content.nuxt.com/docs/studio/debug"}
If you want to try Docus and Nuxt Studio in develoment mode without an UI Pro license, you can check the Nuxt Content documentation for local setup with Nuxt Studio.
::

52
docs/content/1.getting-started/4.project-structure.md Normal file
View File

@ -0,0 +1,52 @@
---
navigation:
icon: i-lucide-folder-tree
title: Project Structure
---
Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/main/.starter).
This is the minimal directory structure to get an up and running Docus website.
```bash
content/
index.md
public/
favicon.ico
package.json
```
### `content/` directory
This is where you [write pages](/concepts/edition) in Markdown.
### `public/` directory
Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias.
### `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:
```json [package.json]
{
"name": "docus-starter",
"scripts": {
"dev": "docus dev",
"build": "docus build"
},
"devDependencies": {
"docus": "latest"
}
}
```
### `app.config.ts`
*This file is not mandatory to start a Docus application.*
This is where you can [configure Docus](/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
::prose-tip{to="/concepts/nuxt"}
Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory.
::

129
docs/content/1.getting-started/5.studio.md Normal file
View File

@ -0,0 +1,129 @@
---
title: Web Editor
description: Build your documentation using Nuxt Studio web editor
navigation:
icon: i-lucide-mouse-pointer-2
---
## **Introduction**
The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
::prose-tip{to="https://content.nuxt.com/studio"}
Learn more about Nuxt Studio in the Nuxt Content documentation.
::
## **Web Editor vs. CLI**
The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE.
::prose-note
Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best.
::
## **Two distinct editors**
Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**.
You can select your favorite editor from the settings page of your project.
::prose-note
Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors.
::
## **Markdown editor**
![Markdown editor for developers](/documentation/markdown-editor-studio.png)
The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.
## **Visual editor**
![Visual editor for non technical users](/documentation/visual-editor-studio.png)
The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.
However, it stands out with its additional features that improve the writing experience:
### **Toolbar**
Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax):
- Title formatting
- Bold
- Italic
- Strike-through
- Code
- Link
- Class
- Bullet list
- Numerated list
### **The** `/` **shortcut**
Simply type `/` anywhere in the editor to access all Studio features.
#### **Formatting features**
- Title formatting
- Line break
- Horizontal rule
- Code-block
- Paragraph
- Bold & italic
#### **Components**
One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.
In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
::prose-note
You can also create custom components and let the user integrate them from the visual editor.
::
Just type `/` to access the list of all the components available.
#### **Images**
Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert.
From the media modal, you can set the **alt attribute** for SEO and accessibility purpose.
#### **Videos**
Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL.
As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media.
## **Live Preview**
![preview.png](/documentation/preview-studio.png)
Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section.
When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
## **Making Changes**
To edit your documentation:
1. **Browse files** using the file explorer.
2. **Open a file** by clicking on it.
3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts.
4. **Preview your changes** to see how they’ll appear when published.
## **Publishing Changes**
When you’re ready to publish:
- Click the **Publish** button in the top-right corner of the editor.
- Your changes will be pushed directly to your deployment branch and go live immediately.

24
docs/content/1.getting-started/6.migration.md Normal file
View File

@ -0,0 +1,24 @@
---
title: Migration
description: " How to migrate your documentation from an existing Markdown
solution to Docus"
navigation:
icon: i-lucide-replace
---
## **Migrating to Docus**
Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward.
Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever.
To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter.
From there, you have two scenarios:
- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones.
- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](/essentials/components) provided by Nuxt UI.
Once your content has been moved to the `content/` folder, you can go through the [configuration section](/concepts/configuration) to easily customize your app.
Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it.

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.

1
docs/content/3.essentials/.navigation.yml Normal file
View File

@ -0,0 +1 @@
title: Essentials

223
docs/content/3.essentials/1.markdown-syntax.md Normal file
View File

@ -0,0 +1,223 @@
---
title: Markdown Syntax
description: Text, title, and styling in standard markdown.
navigation:
icon: i-lucide-heading-1
---
## Titles
Use titles to introduce main sections. They structure your documentation and help users navigate content.
::code-preview
---
class: "[&>div]:*:my-0"
---
## Titles
#code
```mdc
## Titles
```
::
### Subtitles
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
::code-preview
---
class: "[&>div]:*:my-0"
---
### Subtitles
#code
```mdc
### Subtitles
```
::
::tip
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
::
## Text Formatting
Docus supports most Markdown formatting options.
| Style | How to use | Result |
| ------ | ------------ | ---------- |
| Bold | `**bold**` | **Bold** |
| Italic | `*italic*` | *Italic* |
| Strike | `~~strike~~` | ~~Strike~~ |
Combine formatting for richer text styles and visual emphasis.
| Style | How to use | Result |
| ------------- | ------------------- | ----------------- |
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
## Links
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
To create a link, wrap the link text in brackets `[]()`.
::code-preview
---
class: "[&>div]:*:my-0"
---
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
#code
```mdc
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
```
::
### Internal links
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
::code-preview
---
class: "[&>div]:*:my-0"
---
[Installation](/getting-started/installation)
#code
```mdc
[Installation](/getting-started/installation)
```
::
## Lists
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
### Unordered
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
::code-preview
---
class: "[&>div]:*:my-0"
---
- I'm a list item.
- I'm another list item.
- I'm the last list item.
#code
```mdc
- I'm a list item.
- I'm another list item.
- I'm the last list item.
```
::
### Ordered
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
::code-preview
---
class: "[&>div]:*:my-0"
---
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
#code
```mdc
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
```
::
### Nested
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
::code-preview
---
class: "[&>div]:*:my-0"
---
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
#code
```mdc
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
```
::
## Tables
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
| Prop | Default | Type |
| ------- | --------- | -------- |
| `name` | | `string` |
| `size` | `md` | `string` |
| `color` | `neutral` | `string` |
#code
```mdc
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
```
::
## Blockquotes
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
### Singleline
Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
::code-preview
---
class: "[&>div]:*:my-0"
---
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
#code
```mdc
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
```
::
### Multiline
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
::code-preview
---
class: "[&>div]:*:my-0"
---
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
>
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
#code
```mdc
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
>
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
```
::

396
docs/content/3.essentials/2.code-blocks.md Normal file
View File

@ -0,0 +1,396 @@
---
title: Code Blocks
description: Display inline code and code blocks in your documentation.
navigation:
icon: i-lucide-code-xml
---
## Basic
### Inline Code
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
::code-preview
---
class: "[&>div]:*:my-0"
---
`inline code`
#code
```mdc
`inline code`
```
::
### Code Blocks
Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
#code
````mdc
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
````
::
When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.
Filenames help users understand the code's location and purpose within a project.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
#code
````mdc
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
````
::
Every code-block has a built-in copy button that will copy the code to your clipboard.
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
Icons are already defined by default, but you can customize them in your `app.config.ts`:
```ts [app.config.ts]
export default defineAppConfig({
uiPro: {
prose: {
codeIcon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
})
```
::
## Advanced
### CodeGroup
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
:::code-group{.w-full}
```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```
```bash [yarn]
yarn add @nuxt/ui-pro@next
```
```bash [npm]
npm install @nuxt/ui-pro@next
```
```bash [bun]
bun add @nuxt/ui-pro@next
```
:::
#code
````mdc
:::code-group
```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```
```bash [yarn]
yarn add @nuxt/ui-pro@next
```
```bash [npm]
npm install @nuxt/ui-pro@next
```
```bash [bun]
bun add @nuxt/ui-pro@next
```
::
````
::
### CodeTree
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
:::code-tree{default-value="app/app.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/css/main.css']
})
```
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"eslint": "9.20.1",
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
:::
::
### `CodePreview`
Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
label: Preview
---
:::code-preview
---
class: "[&>div]:*:my-0"
---
`inline code`
#code
```mdc
`inline code`
```
:::
#code
````mdc
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
````
::
### `CodeCollapse`
Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
:::code-collapse{class="[&>div]:my-0"}
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--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;
}
```
:::
#code
````mdc
::code-collapse
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--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;
}
```
::
````
::

424
docs/content/3.essentials/3.components.md Normal file
View File

@ -0,0 +1,424 @@
---
title: Markdown Components
description: Use Markdown components to help you structure your content, with
the help of Nuxt UI Pro.
navigation:
icon: i-lucide-component
title: Components
---
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
::prose-note{to="https://ui.nuxt.com/getting-started"}
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
::
### `Accordion`
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
::tabs
:::tabs-item{icon="i-lucide-eye" label="Preview"}
::::accordion
:::::accordion-item
---
icon: i-lucide-circle-help
label: What is Docus and what are its key features??
---
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
:::::
:::::accordion-item
---
icon: i-lucide-circle-help
label: How do I get started with Docus?
---
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
:::::
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::accordion
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
:::
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
:::
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
:::
::
```
:::
::
### `Badge`
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::badge
**v3.0.0**
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::badge
**v3.0.0**
::
```
:::
::
### `Callout`
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::div{.flex.flex-col.gap-4.w-full}
:::::note{.w-full.my-0}
Here's some additional information for you.
:::::
:::::tip{.w-full.my-0}
Here's a helpful suggestion.
:::::
:::::warning{.w-full.my-0}
Be careful with this action as it might have unexpected results.
:::::
:::::caution{.w-full.my-0}
This action cannot be undone.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
```
:::
::
### `Card` and `CardGroup`
Use markdown in the default slot of the `card` component to highlight your content.
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::card-group{.w-full.my-0}
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Dashboard
to: https://github.com/nuxt-ui-pro/dashboard
---
A dashboard with multi-column layout.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: SaaS
to: https://github.com/nuxt-ui-pro/saas
---
A template with landing, pricing, docs and blog.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Docs
to: https://github.com/nuxt-ui-pro/docs
---
A documentation with `@nuxt/content`.
:::::
:::::card
---
icon: i-simple-icons-github
target: _blank
title: Landing
to: https://github.com/nuxt-ui-pro/landing
---
A landing page you can use as starting point.
:::::
::::
:::
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
```mdc
:::card-group
::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/dashboard
target: _blank
---
A dashboard with multi-column layout.
::
::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::
::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/docs
target: _blank
---
A documentation with `@nuxt/content`.
::
::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/landing
target: _blank
---
A landing page you can use as starting point.
::
:::
```
:::
::
### `Collapsible`
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::collapsible
| Prop | Default | Type |
| ------- | --------- | -------- |
| `name` | | `string` |
| `size` | `md` | `string` |
| `color` | `neutral` | `string` |
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::collapsible
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
```
:::
::
### `Field` and `FieldGroup`
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::field-group{.my-0}
:::::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
:::::
:::::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
:::::
:::::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
:::::
:::::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
:::::
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::field-group
::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
::
::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
::
::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
::
::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
::
::
```
:::
::
### `Icon`
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
::code-preview
:icon{name="i-simple-icons-nuxtdotjs"}
#code
```mdc
:icon{name="i-simple-icons-nuxtdotjs"}
```
::
### `Kbd`
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
::code-preview
#code
```mdc
:kbd{value="meta"} :kbd{value="K"}
```
::
### `Tabs`
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
::code-preview
:::tabs{.w-full}
::::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
::::
::::tabs-item{icon="i-lucide-eye" label="Preview"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
::::
:::
#code
````mdc
::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::
```
::::
:::tabs-item{icon="i-lucide-eye" label="Preview"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
:::
::
````
::
### `Steps`
Wrap your headings with the Steps component to display a list of steps.
Use the `level` prop to define which heading will be used for the steps.
::tabs
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
::::steps{level="4"}
#### Start a fresh new project
```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docus
```
#### Run docus CLI to run your dev server
```bash [Terminal]
docus dev
```
::::
:::
:::tabs-item{icon="i-lucide-code" label="Code"}
````mdc
::steps{level="4"}
#### Start a fresh new project
```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docus
```
#### Run docus CLI to run your dev server
```bash [Terminal]
docus dev
```
::
````
:::
::

53
docs/content/3.essentials/4.images-embeds.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Images and Embeds
description: Add image, video, and other HTML elements
navigation:
icon: i-lucide-image
seo:
description: Add image, video, and other HTML elements using Docus theme
---
## Markdown
Display images or videos using standard Markdown syntax.
### Images
::code-preview
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
#code
```mdc
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
```
::
Or with your local images
::code-preview
![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
#code
```mdc
![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
```
::
::note{to="https://image.nuxt.com/"}
Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
::
### Videos
::prose-code-preview
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
#code
```mdc
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
```
::
###

269
docs/content/index.md Normal file
View File

@ -0,0 +1,269 @@
---
seo:
title: Write beautiful docs with Markdown
description: Ship fast, flexible, and SEO-optimized documentation with beautiful
design out of the box. Docus brings together the best of the Nuxt ecosystem.
Powered by Nuxt UI Pro.
---
::u-page-hero
#title
Write beautiful docs with Markdown
#description
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
Docus brings the best of the Nuxt ecosystem into one CLI.
#links
:::u-button
---
color: neutral
size: xl
to: /getting-started/installation
trailing-icon: i-lucide-arrow-right
---
Get started
:::
:::u-button
---
color: neutral
icon: simple-icons-github
size: xl
to: https://github.com/nuxtlabs/docus
variant: outline
---
Star on GitHub
:::
#headline
:::u-button
---
size: sm
to: https://content.nuxt.com/blog/docus-v3
variant: outline
---
Docus, the comeback →
:::
::
::u-page-section
:::u-page-grid
::::u-page-card
---
spotlight: true
class: group col-span-2 lg:col-span-1
target: _blank
to: https://nuxt.com
---
:::::floating-nuxt
:::::
#title
Built with [Nuxt 3]{.text-primary}
#description
Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
to: https://ui.nuxt.com/pro
---
:::::u-color-mode-image
---
height: 320
width: 859
alt: Beautiful visual powered by UI Pro
class: w-full h-80 object-cover rounded-lg
dark: /landing/dark/templates-ui-pro.webp
light: /landing/light/templates-ui-pro.webp
---
:::::
#title
Powered by [Nuxt UI Pro]{.text-primary}
#description
Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::tabs
::::::tabs-item{.mt-5 icon="i-lucide-eye" label="Preview"}
:::::::div{.flex.flex-col.gap-4}
::::::::note{.my-0}
Here's some additional information for you.
::::::::
::::::::tip{.my-0}
Here's a helpful suggestion.
::::::::
::::::::warning{.my-0}
Be careful with this action as it might have unexpected results.
::::::::
::::::::caution{.my-0}
This action cannot be undone.
::::::::
:::::::
::::::
::::::tabs-item
---
class: mt-5 mb-2 text-xs overflow-x-auto
icon: i-lucide-code
label: Code
---
```mdc
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
```
::::::
:::::
#title
Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
#description
The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 md:col-span-1
target: _blank
---
:::::div{.bg-elevated.rounded-lg.p-3.overflow-x-auto}
```ts [app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'green',
secondary: 'sky',
},
},
socials: {
x: 'https://x.com/nuxt_js',
nuxt: 'https://nuxt.com'
}
})
```
:::::
#title
Customize with [Nuxt App Config]{.text-primary}
#description
Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 md:col-span-1 min-h-[450px]
target: _blank
---
:::::color-mode-switch
:::::
#title
[Nuxt Color]{.text-primary} mode
#description
Built-in dark mode provided, no configuration required.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::u-color-mode-image
---
height: 554
width: 859
alt: Built-in navigation and full-text search
class: rounded-lg
dark: /landing/dark/command-menu.png
format: webp
light: /landing/light/command-menu.png
loading: lazy
---
:::::
#title
Built-in navigation and [full-text search]{.text-primary}
#description
Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::browser-frame
:video{.rounded-md controls loop playsinline src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
:::::
#title
Collaborate on [Nuxt Studio]{.text-primary}
#description
Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 lg:col-span-1
target: _blank
to: https://image.nuxt.com/
---
:::::div{.flex-1.flex.items-center.justify-center}
::::::u-color-mode-image
---
alt: Nuxt Image visual
class: w-[30%] lg:w-[70%] my-12 lg:my-0
dark: /landing/dark/nuxt-image.svg
light: /landing/light/nuxt-image.svg
---
::::::
:::::
#title
[Nuxt Image]{.text-primary} optimization
#description
Docus automatically converts Markdown images to use `<NuxtImg>` .
::::
:::
::

16
docs/nuxt.config.ts Normal file
View File

@ -0,0 +1,16 @@
export default defineNuxtConfig({
modules: ['@nuxtjs/plausible'],
css: ['../app/assets/css/main.css'],
site: {
name: 'Docus',
},
llms: {
domain: 'https://docus.dev',
title: 'Docus',
description: 'Write beautiful docs with Markdown.',
full: {
title: 'Docus',
description: 'Write beautiful docs with Markdown.',
},
},
})

15
docs/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "docus-docs",
"description": "Official documentation for Docus, also used as playground.",
"type": "module",
"scripts": {
"build": "docus build",
"dev": "docus dev"
},
"dependencies": {
"@nuxtjs/plausible": "^1.2.0"
},
"devDependencies": {
"docus": "workspace:*"
}
}

BIN
docs/public/documentation/app-header-body.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/public/documentation/app-header-center.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/public/documentation/app-header-cta.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/public/documentation/app-header-logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/public/documentation/app-page-header-links.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/public/documentation/docs-aside-left-top.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/public/documentation/docs-aside-right-bottom.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/public/documentation/frontmatter-preview-title-description.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
docs/public/documentation/markdown-editor-studio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/public/documentation/mountains.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 KiB

BIN
docs/public/documentation/og-image-example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
docs/public/documentation/preview-studio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
docs/public/documentation/visual-editor-studio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
docs/public/landing/dark/command-menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

83
docs/public/landing/dark/nuxt-image.svg Normal file
View File

@ -0,0 +1,83 @@
<svg
width="309"
height="309"
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0"
y="0"
width="309"
height="309"
rx="8"
fill="url(#paint0_linear_549_2095)"
fill-opacity="0.2"
/>
<rect
x="0.5"
y="0.5"
width="308"
height="308"
rx="8"
stroke="url(#paint1_linear_549_2095)"
stroke-opacity="0.4"
/>
<path
d="M250.424 224.554C251.995 199.097 246.309 173.754 234.01 151.409C221.753 129.139 206.184 104.281 197.759 104.281C182.497 104.281 159.941 135.743 151.205 139.926C139.866 129.94 100.698 80.5 88.8565 80.5C77.0152 80.5 29.4718 153.81 20.6396 172.34C6.93039 201.102 2.09076 293.5 22.2949 293.5C35.8243 293.5 51.7545 293.459 69.0776 293.414C108.704 293.311 190.075 293.104 232.215 293.414C243.818 293.499 248.52 255.423 250.424 224.554Z"
fill="url(#paint2_linear_549_2095)"
fill-opacity="0.3"
/>
<path
d="M241.47 38.3696C241.47 47.4864 234.079 54.877 224.963 54.877C215.846 54.877 208.455 47.4864 208.455 38.3696C208.455 29.2529 215.846 21.8623 224.963 21.8623C234.079 21.8623 241.47 29.2529 241.47 38.3696Z"
fill="white"
fill-opacity="0.3"
/>
<defs>
<linearGradient
id="paint0_linear_549_2095"
x1="154.5"
y1="0.5"
x2="154.5"
y2="308.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="paint1_linear_549_2095"
x1="154.5"
y1="0.5"
x2="154.5"
y2="308.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="paint2_linear_549_2095"
x1="126.999"
y1="48.1171"
x2="132.171"
y2="247.688"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop
offset="1"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

Some files were not shown because too many files have changed in this diff Show More