### Start Docus Development Server

Source: https://docus.dev/en/getting-started/installation

After setting up your Docus project, you can start the development server to preview your documentation in real-time. This command builds and serves your documentation locally.

```bash
npm run dev
```

--------------------------------

### Start Docus Development Server

Source: https://docus.dev/en/getting-started/installation

After creating your Docus project and navigating into its directory, you can start the development server to preview your documentation locally. The preview will be available at http://localhost:3000.

```bash
cd my-docs
npm run dev
```

--------------------------------

### Docus package.json Example

Source: https://docus.dev/en/getting-started/project-structure

Provides an example of the minimal `package.json` file for a Docus application, including essential dependencies and scripts.

```json
{
  "name": "my-docs",
  "scripts": {
    "build": "nuxt build --extend docus",
    "dev": "nuxt dev --extend docus"
  },
  "dependencies": {
    "docus": "latest",
    "better-sqlite3": "^12.2.0",
    "nuxt": "^4.0.0"
  }
}
```

--------------------------------

### JavaScript Configuration Example

Source: https://docus.dev/en

Demonstrates how to configure Docus globally using `app.config.ts`. This example shows how to set primary and secondary colors, and define social media links for the application.

```javascript
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      secondary: 'sky',
    },
  },
  socials: {
    x: 'https://x.com/nuxt_js',
    nuxt: 'https://nuxt.com'
  }
})
```

--------------------------------

### Docus Project Structure Example

Source: https://docus.dev/en/getting-started/project-structure

Illustrates the basic directory structure of a new Docus project, including content, public assets, and package.json.

```bash
my-docs/
├── content/             # Your markdown content
│   ├── index.md         # Homepage
│   └── docs/            # Documentation pages
├── public/              # Static assets
└── package.json         # Dependencies and scripts
```

--------------------------------

### Install Nuxt UI Pro with Different Package Managers

Source: https://docus.dev/en/essentials/code-blocks

Provides installation commands for `@nuxt/ui-pro` using various package managers including pnpm, yarn, npm, and bun. This is presented within a code group for easy comparison.

```bash
pnpm add @nuxt/ui-pro@next
```

```bash
yarn add @nuxt/ui-pro@next
```

```bash
npm install @nuxt/ui-pro@next
```

```bash
bun add @nuxt/ui-pro@next
```

--------------------------------

### Run Docus Development Server

Source: https://docus.dev/en/getting-started/migration

Command to start the Docus development server. In v4, this is integrated with Nuxt's dev command using an extends flag.

```bash
nuxt dev --extends docus
```

--------------------------------

### Nuxt Project Structure Example

Source: https://docus.dev/fr/getting-started/project-structure

Illustrates the typical directory layout of a Nuxt project, which Docus utilizes. This includes the app directory for configuration and components, the server directory for API routes, plugins, middleware, and modules.

```tree
my-docs/ 
├── app/                 # Répertoire app (optionnel)
│   ├── app.config.ts    # App configuration
│   ├── components/      # Composants Vue personnalisés
│   ├── layouts/         # Layouts personnalisés
│   ├── pages/           # Pages Vue personnalisées (en dehors du contenu)
│   ├── composables/     # Composables Vue
│   └── middleware/      # Middleware de route 
├── server/              # Code côté serveur
│   └── api/             # Routes API
├── plugins/             # Plugins Nuxt
├── middleware/          # Middleware global
└── modules/             # Modules Nuxt personnalisés
```

--------------------------------

### Run Docus Development Server

Source: https://docus.dev/en/essentials/components

This command starts the Docus development server, allowing you to preview your documentation site locally as you make changes. It's essential for the development workflow.

```bash
docus dev
```

--------------------------------

### Nuxt UI Pro Tabs and TabsItem Example

Source: https://docus.dev/fr/essentials/components

Provides an example of using Tabs and TabsItem components to create tabbed interfaces. It shows how to define content for each tab, including code snippets and previews.

```vue
::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="Aperçu"}
    :::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    :::::
  :::
:::
```

--------------------------------

### Nuxt App Configuration Example

Source: https://docus.dev/fr

Demonstrates how to configure Nuxt application settings, including primary and secondary colors, and social media links, using `defineAppConfig`.

```javascript
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      secondary: 'sky',
    },
  },
  socials: {
    x: 'https://x.com/nuxt_js',
    nuxt: 'https://nuxt.com'
  }
})
```

--------------------------------

### Multiline Blockquote Example

Source: https://docus.dev/en/essentials/markdown-syntax

Demonstrates how to create a multi-line blockquote in Markdown, suitable for longer quotes or multiple paragraphs. The example shows the correct formatting for such content.

```markdown
> 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.
```

--------------------------------

### Créer un projet Docus avec la CLI

Source: https://docus.dev/fr/getting-started/installation

Utilisez la commande `npx create-docus` pour initialiser un nouveau projet Docus. Vous pouvez spécifier un template comme `i18n` pour l'internationalisation.

```bash
npx create-docus my-docs
# Créer avec le modèle i18n
npx create-docus my-docs -t i18n
```

--------------------------------

### Démarrer le serveur de développement Docus

Source: https://docus.dev/fr/getting-started/installation

Naviguez dans le répertoire de votre projet Docus et lancez le serveur de développement avec `npm run dev` pour visualiser votre documentation localement.

```bash
cd my-docs
npm run dev
```

--------------------------------

### Tabs Component Usage

Source: https://docus.dev/en/essentials/components

Provides an example of using the `tabs` and `tabs-item` components to create tabbed content interfaces. It includes examples of embedding callouts within tabs.

```html
::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.
    :::::
  :::
::
```

--------------------------------

### Create Docus Project with CLI

Source: https://docus.dev/en/getting-started/installation

Use the create-docus CLI to quickly set up a new Docus project. This command initializes the necessary files and configurations for your documentation site.

```bash
npx nuxi init my-docs
cd my-docs
npx nuxi module add @docus/docs
```

--------------------------------

### Markdown Title Example (Markdown)

Source: https://docus.dev/en/essentials/markdown-syntax

This example shows how to create a level 2 heading in Markdown, commonly used for section titles in documentation. It demonstrates the basic syntax for structuring content.

```markdown
## Titles
```

--------------------------------

### Create Docus Project with CLI

Source: https://docus.dev/en/getting-started/installation

Use the create-docus CLI to initialize a new Docus project. You can choose between a default template for single-language documentation or an 'i18n' template for multi-language support.

```bash
npx create-docus my-docs
```

```bash
npx create-docus my-docs -t i18n
```

--------------------------------

### Add Plausible Analytics to Nuxt Docs

Source: https://docus.dev/en/concepts/nuxt

This snippet shows how to install the Nuxt Plausible module to integrate Plausible analytics into your documentation site. It requires running an npm install command in your terminal.

```bash
npm install @nuxtjs/plausible
```

--------------------------------

### Nuxt Studio Online Edition

Source: https://docus.dev/en/getting-started/installation

Nuxt Studio provides an online editor for creating and managing your documentation. You can create a new project directly on Nuxt Studio and deploy it with a single click.

```bash
npx nuxi init my-docs
cd my-docs
npx nuxi module add @docus/docs
npx nuxi dev
```

--------------------------------

### Create Tabbed Code Examples with CodeGroup

Source: https://docus.dev/en/essentials/code-blocks

Explains how to group multiple code blocks into tabs using the `code-group` directive. This is particularly useful for showcasing code examples across different languages or package managers, allowing users to switch between them.

```markdown
:::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
```
:::
```

--------------------------------

### Create Documentation Directory

Source: https://docus.dev/en/getting-started/installation

This command creates the 'docs' directory within your project, which is where all your documentation content will reside. Docus uses this directory to build the documentation site.

```bash
mkdir docs
```

--------------------------------

### Docus nuxt.config.ts - Extending Nuxt

Source: https://docus.dev/fr/getting-started/project-structure

An example of a `nuxt.config.ts` file for a Docus project, demonstrating how to extend Nuxt functionalities, such as integrating the `@nuxtjs/plausible` module.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxtjs/plausible']
})
```

--------------------------------

### Initialize New Docus Project

Source: https://docus.dev/en/essentials/components

This command initializes a new Docus project using the Nuxt UI Pro Docus template from GitHub. It sets up the basic structure for your documentation site.

```bash
npx nuxi init -t github:nuxt-ui-pro/docus
```

--------------------------------

### Markdown Table

Source: https://docus.dev/en/essentials/markdown-syntax

Provides an example of creating a table in Markdown to present structured data in rows and columns. This is useful for comparing information or listing properties.

```Markdown
`| Prop    | Default   | Type                     | |---------|-----------|--------------------------| | `name`  |           | `string`{lang="ts-type"} | | `size`  | `md`      | `string`{lang="ts-type"} | | `color` | `neutral` | `string`{lang="ts-type"} |`
```

--------------------------------

### Initialize Docus Project

Source: https://docus.dev/en/getting-started/migration

Command to initialize a new Docus project. This command replaces the older 'docus init' command in v4.

```bash
npx create-docus my-docs
```

--------------------------------

### Badge Component Usage

Source: https://docus.dev/en/essentials/components

Shows how to use the Badge component with markdown in its default slot to display a badge in the documentation. The example demonstrates displaying a version number.

```Vue
::badge **v3.0.0** ::
```

--------------------------------

### Docus App Configuration

Source: https://docus.dev/en/getting-started/installation

This snippet shows the base application configuration for Docus, including the base URL, build ID, and build assets directory.

```javascript
window.__NUXT__.config.app = {
  baseURL: "/",
  buildId: "b3d82cf4-250a-4406-89e7-42160a47410c",
  buildAssetsDir: "/_nuxt/",
  cdnURL: ""
}
```

--------------------------------

### Markdown Frontmatter Example

Source: https://docus.dev/en/concepts/edition

This snippet demonstrates the basic structure of frontmatter in a Markdown file, including title and description fields. This is a common convention in Markdown-based CMS for page meta-data.

```Markdown
---
title: 'Edition'
description: 'Learn how to write your documentation.'
---
```

--------------------------------

### Docus Project Structure - Basic

Source: https://docus.dev/fr/getting-started/project-structure

This shows the basic directory structure for a Docus v4 project created with `npx create-docus my-docs`. It includes content, public, and package.json.

```bash
my-docs/
├── content/
│   ├── index.md
│   └── docs/
├── public/
└── package.json
```

--------------------------------

### Configure Docus Preview Settings

Source: https://docus.dev/en/getting-started/migration

Sets up the preview configuration for Docus, specifying the API endpoint for the Nuxt Studio preview and the API for staging environments. It also includes settings for iframe messaging.

```javascript
window.__NUXT__.config.public.preview = {
  api: "https://api.nuxt.studio",
  iframeMessagingAllowedOrigins: "",
  stagingApi: "https://dev-api.nuxt.studio"
}
```

--------------------------------

### Nuxt UI Pro FieldGroup and Field Example

Source: https://docus.dev/fr/essentials/components

Illustrates the usage of FieldGroup to group Field components, which represent props or parameters. Each Field can be defined with a name and type, along with a description.

```vue
::field-group
  ::field{name="analytics" type="boolean"}
    Par défaut à `false` - Active l'analytics pour votre projet (bientôt disponible).
  ::
  ::field{name="blob" type="boolean"}
    Par défaut à `false` - Active le stockage blob pour stocker des assets statiques, comme des images, vidéos et plus.
  ::
  ::field{name="cache" type="boolean"}
    Par défaut à `false` - Active le cache pour mettre en cache les réponses de vos routes serveur ou fonctions avec `cachedEventHandler` et `cachedFunction` de Nitro.
  ::
  ::field{name="database" type="boolean"}
    Par défaut à `false` - Active la base de données SQL pour stocker les données de votre application.
  ::
:::
```

--------------------------------

### Docus package.json - Dependencies and Scripts

Source: https://docus.dev/fr/getting-started/project-structure

This is a minimal `package.json` file for a Docus v4 application, listing essential dependencies like `docus`, `better-sqlite3`, and `nuxt`, along with build and development scripts.

```json
{
  "name": "my-docs",
  "scripts": {
    "build": "nuxt build --extend docus",
    "dev": "nuxt dev --extend docus"
  },
  "dependencies": {
    "docus": "latest",
    "better-sqlite3": "^12.2.0",
    "nuxt": "^4.0.0"
  }
}
```

--------------------------------

### Extended Nuxt Project Structure for Docus

Source: https://docus.dev/en/getting-started/project-structure

Shows how a Docus project can incorporate standard Nuxt project files and directories for customization.

```bash
my-docs/
├── nuxt.config.ts       # Nuxt configuration (add extra modules, components, etc.)
├── app/                 # App directory
│   ├── app.config.ts    # App configuration
│   ├── components/      # Components (add your own components)
│   ├── layouts/         # Layouts (add your own layouts)
│   └── pages/           # Pages (add your own pages)
└── server/              # Server-side code (add your own server-side code)
```

--------------------------------

### Display Basic Code Blocks

Source: https://docus.dev/en/essentials/code-blocks

Demonstrates how to display multi-line code snippets with syntax highlighting using standard markdown code block syntax. This is essential for presenting clear code examples.

```markdown
```ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```
```