estel_docs/content/1.简单文档/1.index.md

title, description, navigation

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

::::code-group

pnpm add @nuxt/ui-pro@next

yarn add @nuxt/ui-pro@next

npm install @nuxt/ui-pro@next

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"} ::

: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

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

export const table = pgTable('table', {
  int: integer('int')
});

:: ::div{label="MySQL"}

MySQL column types

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

const table = mysqlTable('table', {
  int: int('int')
});

:: ::div{label="SQLite"}

SQLite column types

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

:: ::

::ECard

img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png icon: 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

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

Run docus CLI to run your dev server

docus dev

::

::card-group :::card

icon: simple-icons-nuxtdotjs target: _blank title: Nuxt to: https://nuxt.com

The Nuxt website :::

:::card

icon: simple-icons-nuxtdotjs target: _blank title: Nuxt UI to: https://ui.nuxt.com

The documentation of @nuxt/ui and @nuxt/ui-pro :::

:::card

icon: simple-icons-nuxtdotjs target: _blank title: Nuxt Image to: https://image.nuxt.com

The documentation of @nuxt/image :::

:::card

icon: simple-icons-nuxtdotjs target: _blank title: Nuxt Content to: https://content.nuxt.com

The documentation of @nuxt/content :::

:::card

icon: simple-icons-nuxtdotjs target: _blank title: Nuxt Devtools to: https://devtools.nuxt.com

The documentation of @nuxt/devtools :::

:::card

icon: 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: Utilizes the latest Nuxt framework for optimal performance.
• Built with Nuxt UI and Nuxt UI Pro: Integrates a comprehensive suite of UI components.
• MDC Syntax via Nuxt Content: Supports Markdown with component integration for dynamic content.
• Nuxt 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.