### Create Initial Documentation Content

Source: https://docs-please.pages.dev/docs/getting-started/installation

Example of creating the first documentation page file within the 'content' directory. This Markdown file includes frontmatter for title and description, followed by the main content.

```markdown
## title: Welcome
description: My documentation site
---

# Welcome to My Docs
This is my documentation site.
```

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

### Run Nuxt Development Server

Source: https://docs-please.pages.dev/docs/getting-started/installation

Starts the Nuxt development server to preview your documentation site. This command is executed after installing dependencies and configuring the Nuxt project. The site will be accessible at http://localhost:3000.

```bun
bun dev
```

```pnpm
pnpm dev
```

```npm
npm run dev
```

```yarn
yarn dev
```

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

### Steps Component with Code Blocks

Source: https://docs-please.pages.dev/docs/components/steps

Shows how to embed code examples within the Steps component. The example illustrates installing a package, configuring Nuxt, and starting the development server.

```markdown
::steps
### Install the package
```bash
npm install docs-please
```

### Add to your Nuxt config
```ts
export default defineNuxtConfig({
  extends: ['docs-please'],
})
```

### Start development
```bash
npm run dev
```
::
```

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

### Install command using npm

Source: https://docs-please.pages.dev/llms-full.txt

An example of installing a Vue package using npm. When placed within a CodeTabs component, this command will be presented in a tabbed format for various package managers.

```bash
npm install vue
```

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

### Example Demo Component Structure

Source: https://docs-please.pages.dev/docs/components/component-preview

Provides an example structure for a demo component that should be placed in the `~/components/demo/` directory. This example shows importing a Button component from a UI library.

```vue
import { Button } from '~/components/ui/button'

```

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

### Create Demo Components for ComponentPreview

Source: https://docs-please.pages.dev/llms-full.txt

Demo components intended for use with the `ComponentPreview` component should be located within the `~/components/demo/` directory. The example shows a basic Vue component structure using `<script setup>` and template.

```vue
<!-- components/demo/ButtonDemo.vue -->
<script setup>
import { Button } from '~/components/ui/button'
</script>

<template>
  <div class="flex gap-2">
    <Button>Default</Button>
    <Button variant="outline">
      Outline
    </Button>
    <Button variant="ghost">
      Ghost
    </Button>
  </div>
</template>
```

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

### Nuxt Development Server Command

Source: https://docs-please.pages.dev/llms-full.txt

Command to run the Nuxt development server after installing and configuring the docs-please layer. This command starts a local server to preview the documentation site.

```bash
npm run dev
```

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

### CodeGroup: Add @nuxt/ui package manager examples

Source: https://docs-please.pages.dev/llms-full.txt

The CodeGroup component allows users to display code examples in multiple languages or package managers within tabs. It is useful for showing installation commands for different package managers like pnpm, yarn, npm, and bun.

```bash
pnpm add @nuxt/ui
```

```bash
yarn add @nuxt/ui
```

```bash
npm install @nuxt/ui
```

```bash
bun add @nuxt/ui
```

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

### Install Docs-Please Nuxt Layer

Source: https://docs-please.pages.dev/llms-full.txt

Installs the 'docs-please' Nuxt layer package using npm. This command is the first step in integrating the documentation layer into a Nuxt project.

```bash
npm install docs-please
```

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

### Install Docs-Please Layer (Package Managers)

Source: https://docs-please.pages.dev/docs/getting-started/installation

Installs the docs-please Nuxt layer using common package managers. Ensure Node.js 18+ and Nuxt 4.x are installed. This command adds the 'docs-please' package to your project dependencies.

```bun
bun add docs-please
```

```pnpm
pnpm add docs-please
```

```npm
npm add docs-please
```

```yarn
yarn add docs-please
```

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

### ButtonA Component Usage Examples (Nuxt.js)

Source: https://docs-please.pages.dev/docs/components/button-a

Demonstrates how to use the ButtonA component for internal and external links, including examples with icons. This component leverages Nuxt's link features and MDC syntax.

```markdown
::ButtonA{to="/docs/getting-started"}
  Get Started
::
```

```markdown
::ButtonA{to="/docs/installation"}
  Installation Guide
::
```

```markdown
::ButtonA{href="https://github.com/org/repo" target="_blank"}
  View on GitHub
::
```

```markdown
::ButtonA{to="/docs/components"}
  Browse Components →
::
```

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

### Run build script using npm

Source: https://docs-please.pages.dev/llms-full.txt

An example of running a build script with npm. This command, when used with CodeTabs, will be displayed alongside equivalent commands for other package managers.

```bash
npm run build
```

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

### Install and Enable Plausible Analytics in Nuxt

Source: https://docs-please.pages.dev/llms-full.txt

Installs the @nuxtjs/plausible module and enables it in the Nuxt configuration to add Plausible analytics to the documentation site.

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

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

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

### Markdown Text Formatting Examples

Source: https://docs-please.pages.dev/llms-full.txt

Illustrates various text formatting options available in Markdown, including bold, italic, strikethrough, and combinations like bold italic. These styles enhance readability and visual emphasis within documentation content. The examples show the Markdown syntax and the resulting rendered output.

```mdc
**bold**
```

```mdc
*italic*
```

```mdc
~~strike~~
```

```mdc
**_bold italic_**
```

```mdc
~~**bold**~~
```

```mdc
~~*italic*~~
```

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

### CodeTree: Nuxt.js project file structure example

Source: https://docs-please.pages.dev/llms-full.txt

The CodeTree component displays code blocks in a file tree view, ideal for showcasing project structures and file relationships. This example demonstrates a typical Nuxt.js project configuration.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/css/main.css']
})
```

```css
@import "tailwindcss";
@import "@nuxt/ui";
```

```typescript
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
```

```vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```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": "4.0.0-alpha.1",
    "nuxt": "^4.1.0"
  },
  "devDependencies": {
    "eslint": "^9.34.0",
    "typescript": "^5.9.3",
    "vue-tsc": "^3.0.6"
  }
}
```

```json
{
  "extends": "./.nuxt/tsconfig.json"
}
```

```markdown
# Nuxt 4 Minimal Starter

Look at the [Nuxt 4 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.
```

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

### Configure Nuxt to Extend Docs-Please Layer

Source: https://docs-please.pages.dev/docs/getting-started/installation

Extends the Nuxt application with the 'docs-please' layer by updating the nuxt.config.ts file. This integrates the documentation layer into your Nuxt project. The 'compatibilityDate' is set to ensure future compatibility.

```typescript
export default defineNuxtConfig({
  extends: ['docs-please'],
  compatibilityDate: '2025-12-03',
})
```

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

### Steps Component Usage (MDC)

Source: https://docs-please.pages.dev/llms-full.txt

Illustrates the usage of the Steps component for creating numbered guides. It shows how to structure steps using `h3` headings within the `::steps` block, and how to include code blocks for tutorials.

```mdc
::steps
### Install dependencies

Run the install command to set up the project.

### Configure your application

Update your configuration file with the required settings.

### Start developing

Run the development server and start building.
::

::steps
### Install the package

```bash
npm install docs-please
```

### Add to your Nuxt config

```ts
export default defineNuxtConfig({
  extends: ['docs-please'],
})
```

### Start development

```bash
npm run dev
```
::
```

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

### Example Markdown Frontmatter

Source: https://docs-please.pages.dev/llms-full.txt

Shows the required frontmatter for markdown files, including 'title' and 'description' fields, which are used for page metadata and SEO.

```markdown
---
title: Page Title
description: A brief description for SEO
---

# Content Here
```

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

### Import Button Component

Source: https://docs-please.pages.dev/docs/components/button

Demonstrates how to import the Button component into your project. Ensure the component is correctly installed and accessible via the specified path.

```typescript
import { Button } from '~/components/ui/button'
```

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

### ComponentPreview with Different Preview Types

Source: https://docs-please.pages.dev/docs/components/component-preview

Explains and demonstrates the different `type` prop options for ComponentPreview: 'component' (default), 'example', and 'block'. 'Block' is suitable for larger components, rendering as an image on mobile and an iframe on desktop.

```markdown
::component-preview{name="ButtonDemo" type="component"}
::
::component-preview{name="ButtonDemo" type="example"}
::
::component-preview{name="DashboardDemo" type="block"}
::
```

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

### Display Multi-Language Code Examples with Tabs

Source: https://docs-please.pages.dev/docs/components/tabs

Illustrates how to use the `::tabs` component to showcase code snippets in different programming languages or frameworks. This is useful for comparing syntax or providing examples for diverse environments.

```vue
::tabs
  ::tabs-item{label="Vue"}
    ```vue
    const count = ref(0)
    ```
  ::
  ::tabs-item{label="React"}
    ```tsx
    function Counter() {
      const [count, setCount] = useState(0)
      return <button onClick={() => setCount(c => c + 1)}>{count}</button>
    }
    ```
  ::
::
```

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

### Install Plausible Analytics Nuxt Module

Source: https://docs-please.pages.dev/docs/concepts/nuxt

This command installs the Plausible analytics Nuxt module using Bun, npm, or Yarn. Ensure you have one of these package managers installed.

```bun
bun add @nuxtjs/plausible
```

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

```yarn
yarn add @nuxtjs/plausible
```

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

### Vue and React Counter Example with Tabs

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates how to use the tabs component to display equivalent code snippets in different frameworks, specifically Vue and React. This allows users to see how a simple counter component can be implemented in various environments.

```markdown
::tabs
  ::tabs-item{label="Vue"}
  ```vue
  <script setup>
  const count = ref(0)
  </script>

  <template>
    <button @click="count++">{{ count }}</button>
  </template>
  ```
  ::

  ::tabs-item{label="React"}
  ```tsx
  function Counter() {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(c => c + 1)}>{count}</button>
  }
  ```
  ::
::
```

```markdown
::tabs
  :::tabs-item{label="Vue"}
  ```vue
  <script setup>
  const count = ref(0)
  </script>

  <template>
    <button @click="count++">
      {{ count }}
    </button>
  </template>
  ```
  :::

  :::tabs-item{label="React"}
  ```tsx
  function Counter() {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(c => c + 1)}>{count}</button>
  }
  ```
  :::
::
```

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

### Basic Markdown Content Structure

Source: https://docs-please.pages.dev/llms-full.txt

Example of a basic markdown file for content within the 'content' directory. Includes frontmatter for title and description, followed by markdown content.

```markdown
## <!-- content/index.md -->

title: Welcome
description: My documentation site

---

# Welcome to My Docs

This is my documentation site.
```

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

### Markdown Heading Syntax

Source: https://docs-please.pages.dev/llms-full.txt

Provides examples of markdown syntax for creating headings of different levels (H1, H2, H3), used for structuring content.

```markdown
# H1 - Page Title

## H2 - Section

### H3 - Subsection
```

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

### Callout Component Examples (MDC)

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates how to use the Callout component with an icon, title, and different variants. The `icon` attribute adds an info icon, `title` sets the header text, and `variant` changes the appearance (e.g., 'destructive' for warnings).

```mdc
::callout{icon}
This callout includes an info icon.
::

::callout{icon icon=""}
This callout includes an info icon.
::

::callout{title="Note"}
This callout has a title.
::

::callout{title="Note"}
This callout has a title.
::

::callout{icon title="Info"}
This is the default informational callout.
::

::callout{icon icon="" title="Info"}
This is the default informational callout.
::

::callout{icon title="Warning" variant="destructive"}
This action cannot be undone. Please proceed with caution.
::

::callout
---
icon: ""
title: Warning
variant: destructive
---
This action cannot be undone. Please proceed with caution.
::
```

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

### Markdown Frontmatter Example

Source: https://docs-please.pages.dev/docs/getting-started/writing-content

Illustrates the required frontmatter for each Markdown file. Frontmatter is placed at the beginning of the file, enclosed by '---' and typically includes 'title' and 'description' for SEO purposes. The main content follows the frontmatter.

```markdown
---
title: Page Title
description: A brief description for SEO
---
# Content Here
```

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

### Vue Button Component Examples

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates the usage of different variants of the Button component from shadcn-vue, including 'default', 'outline', and 'ghost'. These components are globally registered and can be used directly in Vue templates.

```vue
<Button variant="default">
Click me
</Button>

<Button variant="outline">
Outline
</Button>

<Button variant="ghost">
Ghost
</Button>
```

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

### Display Live Component Demos with ComponentPreview

Source: https://docs-please.pages.dev/llms-full.txt

The ComponentPreview component allows for showcasing live demos of UI components within documentation. It supports various props for alignment, hiding source code, and different preview types (component, example, block). Demo components must be placed in the `~/components/demo/` directory.

```markdown
::component-preview{name="ButtonDemo"}
::
```

```markdown
::component-preview{name="ButtonDemo" align="start"}
::

::component-preview{name="ButtonDemo" align="center"}
::

::component-preview{name="ButtonDemo" align="end"}
::
```

```markdown
::component-preview{name="ButtonDemo" hide-code}
::
```

```markdown
::component-preview{name="ButtonDemo" type="component"}
::

::component-preview{name="ButtonDemo" type="example"}
::

::component-preview{name="DashboardDemo" type="block"}
::
```

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

### ButtonA Component Usage (MDC)

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates how to use the ButtonA component in MDC syntax for internal and external links, including examples with icons. It accepts NuxtLink props like 'to', 'href', and 'target'.

```mdc
::ButtonA{to="/docs/getting-started"}
Get Started
::
```

```mdc
::ButtonA{to="/docs/installation"}
Installation Guide
::
```

```mdc
::ButtonA{href="https://github.com/org/repo" target="_blank"}
View on GitHub
::
```

```mdc
::ButtonA{to="/docs/components"}
Browse Components →
::
```

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

### Button Component with Icons

Source: https://docs-please.pages.dev/docs/components/button

An example of using the Button component with an icon. This demonstrates how to integrate icons alongside text for enhanced visual communication.

```html
<button data-v-0d9c538f="" data-variant="default" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path> <path d="M10 17l5-5-5-5"></path> <path d="M13.5 12h-10"></path> </svg> Login with Email </button>
```

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

### Markdown Title Syntax

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates the use of Markdown for creating main titles (H2) and subtitles (H3) in documentation. These headings structure content and automatically generate anchors for navigation and table of contents. The example shows the raw Markdown syntax.

```mdc
## Titles
```

```mdc
### Subtitles
```

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

### MDC CopyButton for Clipboard Functionality

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates the usage of the `copy-button` MDC component to add a copy-to-clipboard functionality. The example shows how to provide the text to be copied using the `value` prop within a Markdown file.

```mdc
::copy-button{value="npm install docs-please"}
::
```

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

### Structure Content into Steps using `steps` component

Source: https://docs-please.pages.dev/llms-full.txt

The `steps` component is used to display a list of steps, often for tutorials or guides. Headings within the component are rendered as steps. The `level` prop determines which heading level is used for the steps. It's useful for breaking down complex processes.

```mdc
::steps{level="4"}
    #### Start a fresh new project
    
```bash [Terminal]
    npm create nuxt@latest -- -t github:nuxt-content/docus
```
    
    #### Run docus CLI to run your dev server
    
```bash [Terminal]
    docus dev
```
  ::
```

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

### Show Code Output with CodePreview

Source: https://docs-please.pages.dev/docs/essentials/code-blocks

Use the `code-preview` component to display code output adjacent to the code itself, ideal for interactive examples and demonstrating results. Place the code to be previewed in the default slot and the actual code in the `code` slot.

```markdown
`code-preview`

`inline code`
```

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

### Vue Button Component with Icons

Source: https://docs-please.pages.dev/llms-full.txt

Shows how to integrate icons within the Button component, typically placed before the button text for enhanced visual cues. An example using 'lucide:mail' is provided.

```vue
<Button>
  <Icon name="lucide:mail" class="mr-2" />
  Login with Email
</Button>
```

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

### Displaying Images with Markdown

Source: https://docs-please.pages.dev/docs/essentials/images-embeds

Demonstrates how to display images using standard Markdown syntax. It shows examples for both external URLs and local image files. Docus automatically uses the 'Nuxt Social Image' component for rendering these images.

```markdown
![Nuxt Social Image](https://nuxt.com/new-social.jpg)

![Snow-capped mountains in a sea of clouds at sunset](https://docs-please.pages.dev/mountains.webp)
```

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

### Markdown External Link Syntax

Source: https://docs-please.pages.dev/llms-full.txt

Shows the syntax for creating external hyperlinks in Markdown. By wrapping link text in square brackets and the URL in parentheses, users can navigate to external resources. An example with `rel="nofollow"` is also provided, which is common for SEO and trust signals.

```mdc
[Nuxt UI](https://ui.nuxt.com/getting-started/installation/nuxt)
```

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

### CodeTabs: Package Manager Command Conversion

Source: https://docs-please.pages.dev/docs/components/code-tabs

This component automatically converts package manager commands (npm, yarn, pnpm, bun) into a tabbed interface. It detects command patterns for installation, creation, npx, and running scripts, providing equivalent commands for all supported managers. User preferences for the selected package manager are persisted in local storage. The component renders a header with a terminal icon and package manager tabs, each displaying syntax-highlighted commands.

```markdown
```bunpnpmmyarn
npm install pkg
```
```

```markdown
```bunpnpmmyarn
npm install
```
```

```markdown
```bunpnpmmyarn
npm create app
```
```

```markdown
```bunpnpmmyarn
npx command
```
```

```markdown
```bunpnpmmyarn
npm run dev
```
```

```markdown
```bash
bun add vue
```
```

```bash
bunx --bun create-nuxt-app my-app
```

```bash
bun build
```

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

### Markdown Features: Headings, Code Blocks, Lists, Links, Tables

Source: https://docs-please.pages.dev/docs/getting-started/writing-content

Demonstrates common Markdown syntax for structuring content. Includes examples of H1, H2, and H3 headings, inline and fenced code blocks (with TypeScript highlighting), unordered and ordered lists, internal and external links, and basic table creation.

```markdown
# H1 - Page Title
## H2 - Section
### H3 - Subsection

```ts
const hello = 'world'
```

- Item 1
- Item 2
  - Nested item
1. First
2. Second

[Internal Link](/docs/getting-started/installation)
[External Link](https://example.com)

| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
```

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

### Using ComponentPreview with MDC Syntax

Source: https://docs-please.pages.dev/docs/components/component-preview

Demonstrates how to use the `::component-preview` MDC syntax to display a component demo. It requires the `name` prop to point to a component located in the `~/components/demo/` directory. The component will render the demo and optionally show its source code.

```markdown
::component-preview{name="ButtonDemo"}
::
```

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

### Create project using npx

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates creating a new Nuxt application using npx. The CodeTabs component will transform this into a selectable set of commands for different package managers.

```bash
npx create-nuxt-app my-app
```

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

### MDC CodeCollapsibleWrapper for Long Code Blocks

Source: https://docs-please.pages.dev/llms-full.txt

Shows how to use the `code-collapsible-wrapper` MDC component to enclose long code examples, providing expand/collapse functionality. It includes a TypeScript example demonstrating its usage within a Markdown file.

```mdc
::code-collapsible-wrapper
```ts
// This is a long code example that will be collapsible
export function createConfiguration(options: ConfigOptions): Config {
  const defaults = {
    theme: 'light',
    language: 'en',
    features: {
      darkMode: true,
      animations: true,
      accessibility: true,
    },
  }

  return {
    ...defaults,
    ...options,
    features: {
      ...defaults.features,
      ...options.features,
    },
  }
}

export function validateConfiguration(config: Config): boolean {
  if (!config.theme) {
    throw new Error('Theme is required')
  }
  if (!config.language) {
    throw new Error('Language is required')
  }
  return true
}

export function applyConfiguration(config: Config): void {
  validateConfiguration(config)
  // Apply theme
  document.documentElement.setAttribute('data-theme', config.theme)
  // Apply language
  document.documentElement.setAttribute('lang', config.language)
}
```
::
```

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

### Markdown Internal Link Syntax

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates how to create internal links within documentation using Markdown. By using root-relative paths (e.g., `/en/getting-started/installation`), these links allow seamless navigation between different sections of the documentation site. This improves user experience and information discoverability.

```mdc
[Installation](/en/getting-started/installation)
```

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

### Package Manager Tabs with Sync

Source: https://docs-please.pages.dev/llms-full.txt

Shows how to implement synchronized tabs for package manager commands (npm, pnpm, bun). The `sync` prop allows the user's selection to be remembered across different tab instances using localStorage.

```markdown
::tabs{sync="pm"}
  ::tabs-item{label="npm"}
  ```bash
  npm install @pleaseai/docs
  ```
  ::

  ::tabs-item{label="pnpm"}
  ```bash
  pnpm add @pleaseai/docs
  ```
  ::

  ::tabs-item{label="bun"}
  ```bash
  bun add @pleaseai/docs
  ```
  ::
::
```

```markdown
::tabs{sync="pm"}
  :::tabs-item{label="npm"}
  ```bash
  npm install @pleaseai/docs
  ```
  :::

  :::tabs-item{label="pnpm"}
  ```bash
  pnpm add @pleaseai/docs
  ```
  :::

  :::tabs-item{label="bun"}
  ```bash
  bun add @pleaseai/docs
  ```
  :::
::
```

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

### Configure App Settings with app.config.ts

Source: https://docs-please.pages.dev/

Customize global settings such as documentation title, GitHub repository owner and name using the app.config.ts file. This approach avoids direct code modifications for theme and repository linkage.

```typescript
export default defineAppConfig({
  docs: {
    title: 'My Docs',
    github: {
      owner: 'myorg',
      name: 'my-docs'
    }
  }
})
```

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

### Using Steps Component with Headings

Source: https://docs-please.pages.dev/docs/components/steps

Demonstrates the basic usage of the `::steps` component by wrapping `h3` headings and their associated content. Each `h3` will be automatically numbered.

```markdown
::steps
### Install dependencies
Run the install command to set up the project.

### Configure your application
Update your configuration file with the required settings.

### Start developing
Run the development server and start building.
::
```

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

### Ordered Lists in Markdown

Source: https://docs-please.pages.dev/llms-full.txt

Use ordered lists with numbers for items where sequence is important, such as steps in a process. Each item starts with a number followed by a period.

```mdc
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
```

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

### Vue Separator Component Styling

Source: https://docs-please.pages.dev/llms-full.txt

Shows how to customize the appearance of the Separator component using Tailwind CSS classes. An example is provided to change the background and margin.

```vue
<Separator class="my-8 bg-primary/20" />
```

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

### Multi-line Blockquotes in Markdown

Source: https://docs-please.pages.dev/llms-full.txt

Use multi-line blockquotes for longer quotations or when including multiple paragraphs within a single quoted section. Each line of the quote should start with '>'.

```mdc
> Nuxt UI is a collection of Vue components, composables and utils, 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.
```

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

### Configure Default Locale in Docus

Source: https://docs-please.pages.dev/llms-full.txt

Sets the default language for UI components, HTML tag attributes, and built-in interface strings. This is for single-language documentation setups.

```typescript
export default defineAppConfig({
  docus: {
    locale: 'fr' // Default: 'en'
  }
})
```

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

### Default Callout Variant Example

Source: https://docs-please.pages.dev/docs/components/callout

Shows the default variant of the Callout component, combining an icon and a title for an informational message. This is the standard appearance for general information.

```markdown
::callout{icon title="Info"}
This is the default informational callout.
::
```

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

### Configuring ComponentPreview Alignment

Source: https://docs-please.pages.dev/docs/components/component-preview

Shows how to control the horizontal alignment of the content within the ComponentPreview. The `align` prop accepts 'start', 'center', or 'end' to position the demo accordingly.

```markdown
::component-preview{name="ButtonDemo" align="start"}
::
::component-preview{name="ButtonDemo" align="center"}
::
::component-preview{name="ButtonDemo" align="end"}
::
```

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

### Vue Separator Component Examples

Source: https://docs-please.pages.dev/llms-full.txt

Illustrates the use of the Separator component from shadcn-vue, showing its default horizontal orientation and how to configure it for vertical orientation. This component is used to visually separate content.

```vue
<Separator />

<Separator orientation="vertical" />
```

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

### Basic Callout Usage with MDC Syntax

Source: https://docs-please.pages.dev/docs/components/callout

Demonstrates the basic usage of the Callout component using the MDC syntax. It shows how to render a default callout message.

```markdown
::callout
This is a default callout message.
::
```

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

### Nuxt Content MDC Syntax for Notes and Alerts

Source: https://docs-please.pages.dev/llms-full.txt

This snippet demonstrates how to use the enhanced Markdown syntax provided by Nuxt Content, specifically for displaying notes, tips, warnings, and cautions. These components are designed to highlight different types of information within the documentation.

```mdc
::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action.
::

::caution
This action cannot be undone.
::
```

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

### Vertical Separator Example (Vue)

Source: https://docs-please.pages.dev/docs/components/separator

Illustrates how to render a vertical Separator by setting the 'orientation' prop to 'vertical'. This is useful for side-by-side content layouts. It requires the 'orientation' prop to be passed.

```vue
<Separator orientation="vertical" />
```

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

### Display Keyboard Shortcuts using `kbd` component

Source: https://docs-please.pages.dev/llms-full.txt

The `kbd` component is used to display keyboard shortcuts or key combinations. It accepts a `value` prop to define the text displayed within the key indicator. This component is useful for in-text instructions.

```mdc
:kbd{value="meta"} :kbd{value="K"}
```

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

### Basic Code Blocks in Markdown

Source: https://docs-please.pages.dev/llms-full.txt

Present multi-line code snippets with syntax highlighting using code blocks. Enclose the code within triple backticks (```). Essential for code examples.

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

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

### Horizontal Separator Example (Vue)

Source: https://docs-please.pages.dev/docs/components/separator

Shows the default horizontal orientation of the Separator component. It visually divides content into sections above and below. This component requires no explicit props for basic horizontal display.

```vue
<!-- Content above -->
<Separator />
<!-- Content below -->
```

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

### Create a Basic Vue Page in Nuxt

Source: https://docs-please.pages.dev/llms-full.txt

This Vue component defines a simple page with a 'Hello' heading. It's intended to be placed in the 'pages/' directory of a Nuxt application. No external dependencies are required beyond Vue and Nuxt.

```vue
<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>
```

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

### Site Configuration with app.config.ts

Source: https://docs-please.pages.dev/llms-full.txt

Defines site-wide configuration options for the docs-please layer, including title, description, and GitHub repository details. This file should be placed at the project root.

```typescript
export default defineAppConfig({
  docs: {
    title: 'My Docs',
    description: 'Documentation for my project',
    github: {
      owner: 'username',
      name: 'repo',
      url: 'https://github.com/username/repo',
      branch: 'main',
    },
  },
})
```

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

### Using MDC Syntax for Vue Components in Markdown

Source: https://docs-please.pages.dev/docs/concepts/edition

Demonstrates how to integrate Vue components directly within Markdown files using the MDC syntax provided by Nuxt Content. This allows for enhanced content creation with props and slots.

```markdown
:::u-page-feature :::
```

```markdown
:::u-page-feature #title Nuxt 4 #description Powered by Nuxt 4 for optimal performances and SEO. :::
```

```markdown
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"} #title Nuxt 4 #description Powered by Nuxt 4 for optimal performances and SEO. :::
```

```markdown
:::u-page-feature ---
icon: i-simple-icons-nuxt
to: https://nuxt.com
---
#title Nuxt 4
#description Powered by Nuxt 4 for optimal performances and SEO.
:::
```

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

### Destructive Callout Variant Example

Source: https://docs-please.pages.dev/docs/components/callout

Demonstrates the 'destructive' variant of the Callout component, used for warnings and errors. It includes an icon, title, and specifies the 'destructive' variant for a clear warning appearance.

```markdown
::callout{icon title="Warning" variant="destructive"}
This action cannot be undone. Please proceed with caution.
::
```

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

### Using MDC Syntax for Vue Components in Markdown

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates how to embed Vue components directly into Markdown files using MDC syntax. This allows for dynamic content and component integration. The syntax supports basic component usage, slots, and props.

```mdc
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
  #title
  Nuxt 4
  
  #description
  Powered by Nuxt 4 for optimal performances and SEO.
:::

```

```mdc
:::u-page-feature
  ---
  icon: i-simple-icons-nuxt
  to: https://nuxt.com
  ---
  #title
  Nuxt 4
  
  #description
  Powered by Nuxt 4 for optimal performances and SEO.
:::

```

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

### Fenced Code Block Styling with ProsePre

Source: https://docs-please.pages.dev/llms-full.txt

Applies styling to fenced code blocks, enabling Shiki syntax highlighting, language icons, copy buttons, optional line numbers, and line highlighting. The example shows a TypeScript function.

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`
}
```

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

### Markdown Table Styling with ProseTable

Source: https://docs-please.pages.dev/llms-full.txt

Applies styling to markdown tables, including wrapper with overflow scroll, rounded borders, bold headers with padding, data cell padding, and row borders. The example shows a standard markdown table.

```markdown
| Header 1 | Header 2 | Header 3 |
| -------- |	|	|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 2   | Cell 3   |
```

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

### Per-Page SEO Configuration (Markdown Frontmatter)

Source: https://docs-please.pages.dev/docs/concepts/configuration

Allows specific SEO metadata (title and description) to be set for individual Markdown files within the `content/` directory. This is achieved by using the `seo` key within the frontmatter block of each Markdown file.

```markdown
---
seo:
  title: 'Configuration'
  description: 'Customize your Docus documentation from the Nuxt application configuration file.'
---

```

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

### Separator Styling with Tailwind CSS (Vue)

Source: https://docs-please.pages.dev/docs/components/separator

Provides an example of how to customize the appearance of the Separator component using Tailwind CSS utility classes. This allows for fine-grained control over the component's look and feel, such as color, thickness, and spacing.

```vue
<Separator class="my-4" />
<Separator orientation="vertical" class="h-10" />
```

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

### Synchronize Tab Selection with `sync` Prop

Source: https://docs-please.pages.dev/docs/components/tabs

Shows how to use the `sync` prop on the `::tabs` component to maintain the user's selected tab across different instances or sessions using localStorage. This is exemplified with package manager installation commands.

```vue
::tabs{sync="pm"}
  ::tabs-item{label="npm"}
    ```bash
    npm install @pleaseai/docs
    ```
  ::
  ::tabs-item{label="pnpm"}
    ```bash
    pnpm add @pleaseai/docs
    ```
  ::
  ::tabs-item{label="bun"}
    ```bash
    bun add @pleaseai/docs
    ```
  ::
::
```

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

### Steps Component with Explicit Step Elements (MDC)

Source: https://docs-please.pages.dev/llms-full.txt

Demonstrates an alternative way to structure the Steps component using explicit `::step` elements for greater control over individual step content and structure.

```mdc
::steps
  ::step
  ### First Step
  Content for the first step.
  ::

  ::step
  ### Second Step
  Content for the second step.
  ::
::
```

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

### CodeCollapse: CSS theme definitions for @nuxt/ui

Source: https://docs-please.pages.dev/llms-full.txt

The CodeCollapse component is used for long code blocks to maintain clean pages. It allows users to expand code blocks only when necessary, thus improving readability. This example shows CSS theme definitions for @nuxt/ui.

```css
@import "tailwindcss";
@import "@nuxt/ui";

@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;
}
```