---
title: 入门指南
description: 欢迎使用简单文档
navigation:
  icon: lucide-house
---


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



## Usage
::note
You can pass any property from the HTML `<img>` element such as `alt`, `loading`, etc.
::

::stack
  ::div{class="p-4 space-x-2"}
    :icon{name="lucide:box" class="size-6"}
    :icon{name="vscode-icons:file-type-js-official" class="size-6"}
    :icon{name="vscode-icons:file-type-vue" class="size-6"}
    :icon{name="vscode-icons:file-type-nuxt" class="size-6"}
  ::

  ```mdc
  :icon{name="lucide:box"}
  :icon{name="vscode-icons:file-type-js-official"}
  :icon{name="vscode-icons:file-type-vue"}
  :icon{name="vscode-icons:file-type-nuxt" :size="30"}
  ```
::

::ETabs
  ::div{label="PostgreSQL" icon="lucide:database"}
  ### PostgreSQL column types

  ```ts
  import { integer, pgTable } from 'drizzle-orm/pg-core';

  export const table = pgTable('table', {
    int: integer('int')
  });
  ```
  ::
  ::div{label="MySQL"}
  ### MySQL column types

  ```ts
  import { int, mysqlTable } from 'drizzle-orm/mysql-core';

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### SQLite column types

  ```ts
  import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';

  const table = sqliteTable('table', {
    id: integer('id')
  });

  // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
  integer('id', { mode: 'number' });
  integer('id', { mode: 'boolean' });
  integer('id', { mode: 'timestamp_ms' });
  integer('id', { mode: 'timestamp' }); // Date
  ```
  ::
::



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

::ECard
---
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png
icon: i-simple-icons-tailwindcss
spotlight: true
title: Image Card
description: Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
---
#content
wow

::


::button-link{icon="lucide:arrow-up-right" variant="outline" to="/getting-started" target="_blank" size="md"}
  Get Started
::  
   
::button-link{trailing-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
  GitHub
::  
   
::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
  Ghost
::  


::FileTree
---
title: File Tree
icon: lucide:folder-tree
tree:
  - app:
    - components:
      - Header.vue
      - Footer.vue
    - composables:
      - useErrorHandler.ts
    - app.vue # This is highlighted
  - docs:
    - ^index.md^
---
::

::steps{level="4"}
  #### Start a fresh new project
  
  ```bash [Terminal]
  npx nuxi init -t github:nuxt-ui-pro/docus
  ```
  
  #### Run docus CLI to run your dev server
  
  ```bash [Terminal]
  docus dev
  ```
::


::card-group
  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt
  to: https://nuxt.com
  ---
  The Nuxt website
  :::

  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt UI
  to: https://ui.nuxt.com
  ---
  The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
  :::

  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt Image
  to: https://image.nuxt.com
  ---
  The documentation of `@nuxt/image`
  :::

  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt Content
  to: https://content.nuxt.com
  ---
  The documentation of `@nuxt/content`
  :::

  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt Devtools
  to: https://devtools.nuxt.com
  ---
  The documentation of `@nuxt/devtools`
  :::

  :::card
  ---
  icon: i-simple-icons-nuxtdotjs
  target: _blank
  title: Nuxt Hub
  to: https://hub.nuxt.com
  ---
  The best place to manage your projects, environments and variables.
  :::
::

## Key Features

This template includes a range of features designed to streamline documentation management:

- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
- **Full-Text Search**: Includes built-in search functionality for content discovery.
- **Optimized Typography**: Features refined typography for enhanced readability.
- **Dark Mode**: Offers dark mode support for user preference.
- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.