Shadcn Docs Nuxt

https://github.com/ztl-uwu/shadcn-docs-nuxt
Admin
Effortless and beautiful docs template built with Nuxt Content & shadcn-vue.
Tokens:41,232
Snippets:295
Trust Score:8.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server - shadcn-docs-nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/2.installation.md

This command starts the development server for your shadcn-docs-nuxt project. It typically uses a script defined in your package.json file to bundle and serve your application locally. Access the running application via the provided URL, usually http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

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

### Install Packages with pm-install

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/pm.md

Demonstrates how to install packages using the `pm-install` component. It shows basic installation, installing as a dev dependency, and installing globally.

```markdown
:pm-install{name="shadcn-docs-nuxt"}
:pm-install{name="shadcn-docs-nuxt" save-dev}
:pm-install
:pm-install{name="-g nuxi@latest"}
```

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

### Start Development Server (Bash)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/README.md

Command to start the local development server for the shadcn-docs-nuxt project, typically accessible at http://localhost:3000.

```bash
npm run dev
```

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

### Install Dependencies (Bash)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/README.md

Commands to install project dependencies using various package managers like yarn, npm, pnpm, and bun.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

# bun
bun install
```

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

### Start Development Server with npm, pnpm, bun

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/steps.md

Commands to start the local development server. The '-o' flag opens the application in the default browser. Compatible with npm, pnpm, and bun.

```bash
npm run dev -- -o
```

```bash
pnpm dev -o
```

```bash
bun run dev -o
```

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

### Initialize shadcn-docs-nuxt Project with Starter Template

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/2.installation.md

This command initializes a new Nuxt project using the shadcn-docs-nuxt starter template from GitHub. It utilizes the nuxi CLI to fetch and set up the project structure. Ensure you have nuxi installed globally or use npx.

```bash
nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

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

### Install Project Dependencies with npm, pnpm, bun

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/steps.md

Commands to install project dependencies. This is a standard step after initializing a new project. Works with npm, pnpm, and bun.

```bash
npm install
```

```bash
pnpm install
```

```bash
bun install
```

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

### Install Packages with Package Manager

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/pm.md

Demonstrates installing packages using the pm-install component. Supports installing regular dependencies, dev dependencies, and global packages. Configuration for package managers can be found in main.pm.

```vue
<template>
  <div class="p-4">
    <pm-install name="shadcn-docs-nuxt"></pm-install>
    <pm-install name="shadcn-docs-nuxt" save-dev></pm-install>
    <pm-install></pm-install>
    <pm-install name="-g nuxi@latest"></pm-install>
  </div>
</template>

<script setup lang="ts">
import PmInstall from './PmInstall.vue';
</script>
```

```markdown
:pm-install{name="shadcn-docs-nuxt"}
:pm-install{name="shadcn-docs-nuxt" save-dev}
:pm-install
:pm-install{name="-g nuxi@latest"}
```

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

### Bash Commands for Nuxt Project Management

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/code-tree.md

Illustrates common bash commands used for managing a Nuxt project, including dependency installation, starting the development server, building for production, and previewing the production build. Supports npm, pnpm, yarn, and bun.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

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

### Install Dependencies (pnpm)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/README.md

This command installs all the necessary project dependencies using pnpm. It's a crucial step after cloning the repository or creating a new project to ensure all required packages are available. This assumes pnpm is installed globally.

```bash
pnpm install
```

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

### Install nuxt-component-meta Module

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/fr/1.getting-started/3.writing/1.markdown.md

This command installs the 'nuxt-component-meta' package, which is a Nuxt module used for analyzing component metadata to provide autocompletion suggestions.

```shell
pnpm install nuxt-component-meta
```

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

### Displaying Code Snippet with Offset Lines

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/3.advanced/3.code-snippet.md

This example shows how to use the `start` and `offset` props to display a specific segment of lines from a local file. `start` defines the initial line number, and `offset` determines how many lines to include. This is useful for showing code snippets without the entire file content.

```markdown
::code-snippet
---
file: /examples/file.vue
language: vue
start: 6
offset: 4
---
::
```

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

### Install shadcn-docs-nuxt@latest

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/5.upgrade/1.v1.md

This command installs the latest version of shadcn-docs-nuxt using npm. It ensures that you have the most recent features and bug fixes.

```bash
npm install shadcn-docs-nuxt@latest
```

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

### Install and Configure nuxt-component-meta Module

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/3.writing/1.markdown.md

Installs the `nuxt-component-meta` dependency and configures it within the Nuxt project's `nuxt.config.ts` file. This module enables automatic scanning of project components for metadata to provide suggestions.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-component-meta'],
});
```

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

### Installing Custom Icon Collections

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/icon.md

Provides the command to install custom icon collections for use with Nuxt Icon. This is recommended for performance and reliability.

```bash
npm i -D @iconify-json/collection-name
```

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

### Playground Component for Interactive Examples

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/4.blog/2.v1-1.md

The ::playground component allows embedding interactive code examples directly into documentation. It supports providers like StackBlitz and CodeSandbox, with configuration options for repository, branch, and specific files. This enhances the documentation by providing live, runnable code snippets.

```markdown
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```

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

### Initialize Project with Starter Template (Bash)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/README.md

This command initializes a new Nuxt project using the shadcn-docs-nuxt starter template from GitHub. It requires npx and nuxi to be installed and available in your PATH. This is the first step in setting up a new project with this template.

```bash
npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

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

### README Markdown for Nuxt Starter

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/code-tree.md

Provides essential information for setting up, developing, and deploying a Nuxt 3 minimal starter project. It includes commands for installing dependencies, running the development server, and building for production.

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

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

### Inline Code Examples

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/2.code-blocks.md

Demonstrates the usage of inline code snippets. It includes a basic inline code example and one with TypeScript type annotation and highlighting.

```text
`code inline`
```

```text
`const codeInline: string = 'highlighted code inline'`{lang="ts"}
```

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

### Run Scripts with pm-run

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/pm.md

Illustrates how to execute package scripts using the `pm-run` component. Examples include running a development script and a build script with additional flags.

```markdown
:pm-run{script="dev"}
:pm-run{script="build --watch -o"}
```

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

### Markdown Link Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Shows the syntax for creating hyperlinks in Markdown. Links are essential for navigation and referencing external or internal resources.

```markdown
[Link](/getting-started/introduction)
```

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

### Install shadcn-docs-nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/fr/4.blog/2.v1-1.md

Commande pour mettre à jour le projet vers la dernière version de shadcn-docs-nuxt. Assurez-vous d'exécuter cette commande dans le répertoire de votre projet.

```shell
npm install shadcn-docs-nuxt@latest
# ou
yarn add shadcn-docs-nuxt@latest
# ou
pnpm add shadcn-docs-nuxt@latest
```

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

### Navigate to Project Directory

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/2.installation.md

After initializing the project, this command changes the current directory to the newly created project folder. Replace '[project-name]' with the actual name of your project directory. This step is crucial before running any project-specific commands.

```bash
cd [project-name]
```

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

### Install Nuxt MDC VS Code Extension

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/3.writing/1.markdown.md

Installs the Nuxt MDC extension for VS Code, providing syntax highlighting and autocompletion for MDC syntax. This is done via VS Code's Quick Open feature.

```shell
ext install Nuxt.mdc
```

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

### Stack Component Nested Code Block Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/stack.md

Illustrates a nested Stack component within a Markdown code block, showcasing its recursive usage. This example shows how to render a Stack layout inside content.

```mdc
::stack
  ::div{class="p-6 text-3xl font-bold"}
  ✨ shadcn-docs-nuxt
  ::

  ```mdc
  ---
  title: Installation
  description: How to install shadcn-docs-nuxt in your app.
  icon: lucide:play
  ---

  ## Using the starter template
  ```

  :pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}

  :read-more{title="Installation" to="/getting-started/installation"}

  ::card
  ---
  title: Components
  icon: lucide:box
  ---
  See MDC components provided by **shadcn-docs-nuxt**.
  ::
::
```

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

### Line Style Tabs Component Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/tabs.md

Demonstrates the implementation of the Tabs component with the 'line' variant, suitable for interfaces where a clean, underlined tab style is desired. Includes examples of adding content and associated code snippets.

```vue
::tabs{variant="line"}
  ::div{label="Anteprima" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
    :badge[Badge]
  ::
  ::div{label="Codice"}
    ```tsx
    import { Badge } from "@/components/ui/badge"

    export function BadgeDemo() {
      return <Badge>Badge</Badge>
    }
    ```
  ::
::
```

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

### Run SSR Server

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/4.deployment.md

Start the SSR server by executing the generated index file. This command is used to run the application in a Server-Side Rendering environment.

```shell
node .output/server/index.mjs
```

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

### Markdown Ordered List Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Illustrates the syntax for creating ordered (numbered) lists in Markdown. These lists are used when the sequence of items is important.

```markdown
1. Foo
2. Bar
3. Baz
```

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

### Install remark-math and rehype-katex for shadcn-docs-nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/2.integrations/math.md

Installs the remark-math and rehype-katex plugins using npm or yarn, marking them as development dependencies. These plugins are essential for processing and rendering LaTeX math equations with KaTeX in a Nuxt application.

```bash
npm install remark-math rehype-katex --save-dev
yarn add remark-math rehype-katex --dev
```

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

### Tabs: Line Style Example with Badge (TypeScript)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/tabs.md

Shows the 'line' variant of the Tabs component, often used for code previews or distinct sections. This example includes a Badge component within a tab.

```tsx
import { Badge } from "@/components/ui/badge"

export function BadgeDemo() {
  return <Badge>Badge</Badge>
}
```

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

### Markdown Paragraph Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Provides the basic Markdown syntax for a paragraph. Paragraphs are the standard block of text in Markdown documents.

```markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

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

### Run Scripts with Package Manager

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/pm.md

Illustrates how to execute scripts defined in the package.json file using the pm-run component. It shows examples of running development scripts and build commands with specific flags.

```vue
<template>
  <div class="p-4">
    <pm-run script="dev"></pm-run>
    <pm-run script="build --watch -o"></pm-run>
  </div>
</template>

<script setup lang="ts">
import PmRun from './PmRun.vue';
</script>
```

```markdown
:pm-run{script="dev"}
:pm-run{script="build --watch -o"}
```

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

### Card Style Tabs Component Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/tabs.md

Illustrates the usage of the Tabs component with the 'card' variant, providing a distinct visual style for tabbed content. Includes examples of adding content and icons to individual tabs.

```vue
::tabs{variant="card"}
  ::div{label="Card Tab"}
  ### Questo è un tab in stile card
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  Questo è il Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::
```

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

### Stack Component Usage Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/stack.md

Demonstrates how to use the Stack component to create a layout with a title and other MDC components. This is typically used for structuring documentation pages or feature introductions.

```vue
<template>
  <div class="p-4 md:p-8">
    <Stack>
      <div class="p-6 text-3xl font-bold">
        ✨ shadcn-docs-nuxt
      </div>

      <MarkdownParser :content="'---
title: Installazione
description: Come installare shadcn-docs-nuxt nella tua app.
icon: lucide:play
---

## Utilizzando il template starter
```
'">
      </MarkdownParser>

      <PmX command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter" />

      <ReadMore title="Installazione" to="/getting-started/installation" />

      <Card
        title="Componenti"
        icon="lucide:box"
      >
        Vedi i componenti MDC forniti da **shadcn-docs-nuxt**.
      </Card>
    </Stack>
  </div>
</template>

<script setup>
import Stack from './Stack.vue'; // Assuming Stack is in the same directory or aliased
import PmX from './PmX.vue'; // Assuming PmX is a custom component
import ReadMore from './ReadMore.vue'; // Assuming ReadMore is a custom component
import Card from './Card.vue'; // Assuming Card is a custom component
import MarkdownParser from './MarkdownParser.vue'; // Assuming MarkdownParser handles MDC content
</script>
```

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

### Markdown Heading Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Demonstrates how to create headings in Markdown, ranging from H1 to H6. This is a fundamental element for structuring content.

```markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```

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

### Markdown Table Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Illustrates the Markdown syntax for creating tables, including headers, rows, and cell content. Tables are useful for organizing data.

```markdown
| Key | Type      | Description                                 |
| --- | --------- | ------------------------------------------- |
| 1   | Wonderful | Table with `some long code snippet example` |
| 2   | Wonderful | Data                                        |
| 3   | Wonderful | Website                                     |
```

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

### Read More Component Usage (Markdown)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/read-more.md

Demonstrates how to use the Read More component within Markdown content. It shows examples with and without custom titles and icons, linking to internal and external URLs.

```markdown
::read-more{to="/getting-started/writing/markdown"}
::read-more{title="Nuxt website" to="https://nuxt.com/"}
::read-more{to="https://nuxt.com/"}
::read-more{icon="lucide:link" to="https://nuxt.com/"}
```

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

### Example Directory Structure

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/3.writing/3.folders.md

This snippet illustrates a typical directory structure within a Nuxt project where `_dir.yml` files are used to configure folders. The `_dir.yml` file in the `content/1.frameworks/` directory controls the behavior and appearance of the 'frameworks' folder and its sub-pages.

```tree
content/
  1.frameworks/
    _dir.yml
    1.vue.md
    2.nuxt.md
```

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

### Nuxt Shortcut Component Usage Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/shortcut.md

Demonstrates how to use the Shortcut component in Nuxt with different key combinations and sizes. The 'meta' value automatically adjusts to the platform's command key (⌘ or Ctrl).

```vue
<template>
  <Stack>
    <Div class="p-4">
      <Shortcut value="meta" />
      <Shortcut value="K" />
      <Br />
      <Shortcut value="xs" size="xs" />
      <Shortcut value="sm" />
      <Shortcut value="md" size="md" />
    </Div>
  </Stack>
</template>

<script setup lang="ts">
import Stack from './Stack.vue';
import Div from './Div.vue';
import Shortcut from './Shortcut.vue';
import Br from './Br.vue';
</script>
```

```markdown
```mdc
:shortcut{value="meta"} :shortcut{value="K"}

:shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
```
```

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

### Markdown Unordered List Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Shows the syntax for creating unordered (bulleted) lists in Markdown. These lists are useful for enumerating items without a specific order.

```markdown
- Foo
- Bar
- Baz
```

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

### Display Nuxt.js App Configuration and Files

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/km/2.components/2.docs/code-tree.md

This snippet demonstrates the usage of the CodeTree component to visualize the structure and content of a sample Nuxt.js application. It displays configuration files like `nuxt.config.ts`, `app.config.ts`, `package.json`, `tsconfig.json`, and `main.css`, as well as the main `app.vue` and a `README.md` file. This allows developers to quickly understand the project's setup and dependencies.

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

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

```css
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```

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

  future: {
    compatibilityVersion: 4
  },

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

```json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.1"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "vue-tsc": "^2.2.0"
  }
}
```

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

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

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

### Markdown Blockquote Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/1.markdown.md

Illustrates how to format blockquotes in Markdown. Blockquotes are used to highlight cited text or emphasize specific content.

```markdown
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

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

### Accordion Component Usage Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/3.page/accordion.md

Demonstrates the basic implementation of the Accordion component using MDC syntax. It shows how to define accordion items with titles and content, and highlights features like accessibility and styling flexibility.

```mdc
::accordion{default-value="first-item" collapsible}
  ::accordion-item{value="first-item"}
  #title
  È accessibile?

  #content
  Sì. Aderisce al pattern di design WAI-ARIA.
  ::

  ::accordion-item
  #title
  È senza stile?

  #content
  Sì. È senza stile di default, dandoti libertà sull'aspetto e la sensazione.
  ::
  :accordion-item{title="Può essere animato?" content="Sì! Puoi utilizzare la proprietà transition per configurare l'animazione."}
::
```

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

### Basic Card Usage in Nuxt Content

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/card.md

Demonstrates the basic implementation of a card component, including title, description, content, and footer slots. This example uses Nuxt Content syntax with the shadcn-vue integration.

```mdc
::card
---
icon: lucide:box
---

#title
Card Title

#description
Description

#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._

#footer
Footer
::
```

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

### Basic Code Block Example in TypeScript

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/1.prose/2.code-blocks.md

Demonstrates the basic usage of a code block with TypeScript syntax highlighting. It shows how to render a simple JavaScript function within a code block.

```ts
export default () => {
  console.log('Code block');
};
```

```markdown
```ts
export default () => {
  console.log('Code block');
};
```
```

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

### Stack Component Usage Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/stack.md

Demonstrates how to use the Stack component to nest other MDC elements like 'div', 'pm-x', and 'card'. This is useful for creating complex content layouts.

```vue
::stack
  ::div{class="p-4 md:p-8"}
    ::stack
      ::div{class="p-6 text-3xl font-bold"}
      ✨ shadcn-docs-nuxt
      ::

      ```mdc
      ---
      title: Installation
      description: How to install shadcn-docs-nuxt in your app.
      icon: lucide:play
      ---

      ## Using the starter template
      ```

      :pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}

      :read-more{title="Installation" to="/getting-started/installation"}

      ::card
      ---
      title: Components
      icon: lucide:box
      ---
      See MDC components provided by **shadcn-docs-nuxt**.
      ::
    ::
  ::
::
```

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

### Nuxt Content Default Configuration with Options

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/1.configuration/2.nuxt-content.md

Provides a comprehensive example of the default Nuxt Content configuration, including settings for document-driven mode, syntax highlighting (themes, preloaded languages), navigation fields, and experimental search functionality.

```typescript
export default defineNuxtConfig({
  content: {
    documentDriven: true,
    highlight: {
      theme: {
        default: 'github-light',
        dark: 'github-dark',
      },
      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'mdc', 'yaml', 'bash', 'ini', 'dotenv'],
    },
    navigation: {
      fields: ['icon'],
    },
    experimental: {
      search: {
        indexed: true,
      },
    },
  },
});
```

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

### Page Front Matter Configuration (YAML)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/3.writing/2.pages.md

Example of front matter attributes for a page in shadcn-docs-nuxt. This YAML block defines metadata such as title, description, icon, and navigation badges.

```yaml
---
title: Front Matter
description: Front matter attributes used in shadcn-docs-nuxt.
icon: lucide:book-type

navTruncate: false
navBadges:
  - value: New
    type: lime

badges:
  - value: Docus
    to: https://docus.dev/api/components#alert
    target: _blank
  - value: Source
    icon: lucide:code
    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
    target: _blank

authors:
  - name: Tony Zhang
    username: ZTL-UwU
    avatar: https://www.github.com/ZTL-UwU.png
    to: https://github.com/ZTL-UwU
    target: _blank
---

<!-- Content of the page -->
```

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

### Nuxt MDC: Simple Collapsible Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/3.page/collapsible.md

Demonstrates the basic usage of the Collapsible component in Nuxt MDC. It shows how to define a title and content for a simple collapsible section. No external dependencies are required beyond the component itself.

```html
::collapsible
#title
Show properties

#content
This is a **Simple** style collapsible.
::
```

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

### Link Alert in Nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/alert.md

Illustrates how to configure the Alert component to function as a link. This example shows how to specify a URL and target attribute to create a clickable alert.

```mdc
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
  A **link** alert.
::
```

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

### Example with Nested Stack and Code Block

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/stack.md

Illustrates a nested Stack component structure, including a Markdown code block within it. This showcases how to combine different MDC components for complex layouts.

```vue
<template>
  <Stack>
    <div class="p-6 text-3xl font-bold">
      ✨ shadcn-docs-nuxt
    </div>

    <MarkdownParser :content="'---
title: Installazione
description: Come installare shadcn-docs-nuxt nella tua app.
icon: lucide:play
---

## Utilizzando il template starter
```
'">
    </MarkdownParser>

    <PmX command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter" />

    <ReadMore title="Installazione" to="/getting-started/installation" />

    <Card
      title="Componenti"
      icon="lucide:box"
    >
      Vedi i componenti MDC forniti da **shadcn-docs-nuxt**.
    </Card>
  </Stack>
</template>

<script setup>
import Stack from './Stack.vue';
import PmX from './PmX.vue';
import ReadMore from './ReadMore.vue';
import Card from './Card.vue';
import MarkdownParser from './MarkdownParser.vue';
</script>
```

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

### Render Field Group Component in Vue

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/km/2.components/2.docs/field-group.md

This snippet shows how to render the Field Group component within a Vue template. It includes examples of different field types like boolean, required, and methods for clearing, getting, and setting errors. The component relies on Nuxt UI Pro for its implementation.

```vue
::field-group
  ::field{name="withDefault" type="boolean" defaultValue="true"}
A field with a default value.
  ::
  ::field{name="requiredField" type="boolean" required}
A required field.
  ::
  ::field{name="clear (path?: string)" type="void"}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
  ::
  ::field{name="getErrors (path?: string)" type="FormError[]"}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
  ::
  ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
Sets form errors for a given path. If no path is provided, overrides all errors.
  ::
  ::field{name="errors" type="Ref<FormError[]>"}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
  ::
::
```

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

### Initialize Starter Template with npm, pnpm, bun

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/steps.md

Commands to initialize a new project using the shadcn-docs-nuxt starter template. Supports npm, pnpm, and bun package managers. This operation clones a starter template from GitHub.

```bash
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

```bash
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

```bash
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

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

### Smart Icon Usage in Nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/icon.md

Illustrates the use of the :smart-icon component, which can render Iconify icons, emojis, and URLs automatically. It shows examples of each type, including size customization.

```vue
<template>
  <div>
    <p>Iconify</p>
    <div class="space-x-2">
      <smart-icon name="lucide:box"></smart-icon>
      <smart-icon name="vscode-icons:file-type-js-official"></smart-icon>
      <smart-icon name="vscode-icons:file-type-vue"></smart-icon>
    </div>

    <p>Emojis</p>
    <div class="space-x-2">
      <smart-icon name="😍"></smart-icon>
      <smart-icon name="🚀"></smart-icon>
      <smart-icon name="🎉" :size="30"></smart-icon>
    </div>

    <p>URL</p>
    <div class="space-x-2">
      <smart-icon name="/logo.svg"></smart-icon>
      <smart-icon name="https://vueuse.org/favicon.svg" :size="40"></smart-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
// No script needed for basic usage
</script>
```

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

### Badge Component as Link - MDC

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/badge.md

Shows how to use the Badge component as a clickable link by providing a 'to' prop with a URL. This example uses an 'outline' variant with 'info' type.

```mdc
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
  Link
::
```

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

### Displaying Code Snippet from Local File

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/3.advanced/3.code-snippet.md

This example shows how to use the `CodeSnippet` component in markdown to display code from a local file. It requires specifying the `file` path and the `language` for syntax highlighting. The content within the `::code-snippet` block is frontmatter defining the component's props.

```markdown
::code-snippet
---
file: /examples/file.vue
language: vue
---
::
```

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

### Embed Stackblitz Playground Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/playground.md

This snippet shows how to use the Playground component to embed an interactive Stackblitz editor. It requires specifying the GitHub repository, branch, and the file to open. The component leverages the Stackblitz provider for integration.

```vue
<template>
  ::stack
    ::div{class="p-4"}
      ::playground
      ---
      provider: stackblitz
      repo: nuxt/starter
      branch: v3
      file: app.vue
      ---
      ::
    ::
  ::
</template>
```

```markdown
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```

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

### Fetching and Displaying Remote Code Snippet

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/3.advanced/3.code-snippet.md

This example illustrates how to use the `CodeSnippet` component to fetch and display code directly from a remote URL. The `url` prop points to the raw code file, and the `language` prop is essential for correct syntax highlighting.

```markdown
::code-snippet
---
url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
language: vue
---
::
```

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

### Configure Steps Component Heading Level

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/steps.md

Example of how to configure the 'level' prop for the Steps component in Mdc syntax. This prop controls the HTML heading element (h1-h6) used for the steps. Defaults to h3.

```mdc
::steps{:level="5"}
  ##### Multi-level headings

  ```mdc
  ::steps{:level="5"}
  ```

  ##### Available Headings

  `h1` through `h6`. Defaults to `h3`.
::
```

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

### HeroAlt Component Markdown Usage (MDC)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/3.page/hero-alt.md

Illustrates how to use the HeroAlt component directly within Markdown files using the Nuxt Content (MDC) syntax. This example includes configuring announcements, actions with icons, and content slots.

```mdc
::hero-alt
---
announcement:
  title: 'Introducing Charts'
  icon: 'lucide:pie-chart'
  to: /getting-started
actions:
  - name: Get Started
    to: /getting-started
  - name: GitHub
    variant: outline
    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
    leftIcon: 'lucide:github'
---

#title
Build your component library

#description
Beautifully designed components that you can copy and paste into your apps.
::
```

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

### Embed CodeSandbox Playground Example

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/playground.md

This snippet demonstrates embedding an interactive CodeSandbox editor using the Playground component. It requires specifying the GitHub repository, branch, and the file to open, utilizing the CodeSandbox provider for integration.

```vue
<template>
  ::stack
    ::div{class="p-4"}
      ::playground
      ---
      provider: codesandbox
      repo: nuxt/starter
      branch: v3
      file: app.vue
      ---
      ::
    ::
  ::
</template>
```

```markdown
::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```

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

### Execute Commands with pm-x

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/2.components/2.docs/pm.md

Shows how to execute arbitrary commands using the `pm-x` component. This includes initializing a new project with a specific command.

```markdown
:pm-x{command="nuxi@latest init <project-name>"}
```

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

### Build for Production (Bash)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/README.md

Command to build the application for production deployment. This optimizes assets and prepares the project for deployment.

```bash
npm run build
```

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

### Display Shortcut Component in Nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/shortcut.md

This snippet demonstrates how to use the Shortcut component within a Nuxt application. It shows examples of displaying meta keys and different size variants. The component automatically adapts meta key icons based on the platform (Cmd for macOS, Ctrl for Windows).

```html
<template>
  <p>
    :shortcut{value="meta"} :shortcut{value="K"} :br
    :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
  </p>
</template>

<script setup>
// No script needed for basic usage
</script>
```

```markdown
:shortcut{value="meta"} :shortcut{value="K"}

:shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
```

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

### HeroAlt Component with Outline Button and GitHub Icon (Vue/Nuxt)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/fr/2.components/3.page/hero-alt.md

Illustrates an alternative configuration for the HeroAlt component, featuring an outline variant for the GitHub action button and incorporating a left-aligned GitHub icon. This example highlights flexibility in action button styling and integration.

```vue
::hero-alt
---
announcement:
  title: 'Présentation des Graphiques'
  icon: 'lucide:pie-chart'
  to: /getting-started
actions:
  - name: Commencer
    to: /getting-started
  - name: GitHub
    variant: outline
    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
    leftIcon: 'lucide:github'
---

#title
Construisez votre bibliothèque de composants

#description
Des composants magnifiquement conçus que vous pouvez copier et coller dans vos applications.
::
```

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

### Preview Production Build (Bash)

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/README.md

Command to locally preview the production build of the application. This allows testing the optimized build before deploying.

```bash
npm run preview
```

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

### Preview Static Deployment Locally

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/4.deployment.md

Preview your statically deployed application locally using the `serve` command. This allows you to test the generated static files before deploying to a hosting service.

```shell
npx serve .output/public
```

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

### Run Generate Command for Static Hosting

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/1.getting-started/4.deployment.md

Execute the `generate` script to build your application for static hosting. This command prepares the necessary files for deployment to static hosting services.

```shell
npm run generate
```

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

### Nuxi CLI Command for Project Initialization

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/fr/2.components/2.docs/stack.md

This command uses the Nuxt CLI ('nuxi') to initialize a new Nuxt project. It specifies a project name and uses a GitHub template for 'shadcn-docs-nuxt-starter', which is useful for quickly setting up a project with the shadcn-docs-nuxt theme.

```bash
nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```

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

### Install remark-math and rehype-mathjax for shadcn-docs-nuxt

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/3.api/2.integrations/math.md

Installs the remark-math and rehype-mathjax plugins using npm or yarn, marking them as development dependencies. These plugins are required for processing and rendering LaTeX math equations with MathJax in a Nuxt application.

```bash
npm install remark-math rehype-mathjax --save-dev
yarn add remark-math rehype-mathjax --dev
```

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

### README.md with Nuxt.js Commands

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/code-tree.md

This snippet displays the README.md file content, including instructions and commands for setting up, running, and building a Nuxt.js project using npm, pnpm, yarn, and bun.

```markdown
# Nuxt 3 Minimal Starter

Consulta la [documentazione di Nuxt 3](https://nuxt.com/docs/getting-started/introduction) per saperne di più.

## Configurazione

Assicurati di installare le dipendenze:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Server di Sviluppo

Avvia il server di sviluppo su `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Produzione

Compila l'applicazione per la produzione:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Anteprima locale della build di produzione:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Consulta la [documentazione di deployment](https://nuxt.com/docs/getting-started/deployment) per maggiori informazioni.

```

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

### Execute Commands with Package Manager

Source: https://github.com/ztl-uwu/shadcn-docs-nuxt/blob/main/www/content/it/2.components/2.docs/pm.md

Shows how to use the pm-x component to execute arbitrary command-line commands. This includes initializing a new project with nuxi. The component supports a 'no-sync' option to prevent synchronization.

```vue
<template>
  <div class="p-4">
    <pm-x command="nuxi@latest init <project-name>"></pm-x>
    <pm-x command="nuxi@latest init <project-name>" no-sync></pm-x>
  </div>
</template>

<script setup lang="ts">
import PmX from './PmX.vue';
</script>
```

```markdown
:pm-x{command="nuxi@latest init <project-name>"}
:pm-x{command="nuxi@latest init <project-name>" no-sync}
```
Tokens:
Raw