estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改页面的内容
Some checks failed
CI / lint (push) Failing after 29m56s
Details
CI / typecheck (push) Failing after 8m26s
Details
CI / build (ubuntu-latest) (push) Failing after 18s
Details

Browse Source
This commit is contained in:
estel
2025-07-31 15:04:22 +08:00
parent a301b4c692
commit ce50120e40
39 changed files with 2692 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/app.config.ts
View File

@@ -263,7 +263,7 @@ export default defineAppConfig({
colorMode: true,
links: [{
'icon': 'simple-icons-github',
'to': 'https://github.com/nuxt-ui-pro/docs',
'to': 'https://github.com/estel-li/estel_docs',
'target': '_blank',
'aria-label': 'GitHub'
}]
@@ -297,7 +297,7 @@ export default defineAppConfig({
title: '当前页',
bottom: {
title: 'Community',
edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
edit: 'https://github.com/estel-li/estel_docs/edit/main/content',
links: [{
icon: 'lucide-star',
label: 'GitHub',

2
app/components/AppSidebar.vue
View File

@@ -51,7 +51,7 @@
<div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 mx-5" />
<!-- 文档目录导航 -->
<div class="mt-6 flex items-center justify-start pl-4 w-full">
<div class="mt-6 flex items-center justify-start pl-4 w-full pb-3">
<UContentNavigation
highlight
:navigation="navigation"

20
app/components/TemplateMenu.vue
View File

@@ -3,11 +3,8 @@
v-slot="{ open }"
:modal="false"
:items="[{
label: 'Starter',
to: 'https://ui-pro-starter.nuxt.dev/'
}, {
label: 'Landing',
to: 'https://landing-template.nuxt.dev/'
label: 'Blog',
to: 'https://lijue.me'
}, {
label: 'Docs',
to: 'https://docs-template.nuxt.dev/',
@@ -15,15 +12,10 @@
checked: true,
type: 'checkbox'
}, {
label: 'SaaS',
to: 'https://saas-template.nuxt.dev/'
}, {
label: 'Dashboard',
to: 'https://dashboard-template.nuxt.dev/'
}, {
label: 'Chat',
to: 'https://chat-template.nuxt.dev/'
}]"
label: 'JiWei',
to: 'https://www.xajiwei.com/'
},
]"
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
size="xs"
>

4
app/components/auth/register.vue
View File

@@ -30,8 +30,8 @@ const fields = ref([
<template>
<UAuthForm
class="max-w-md"
title="Login"
description="Enter your credentials to access your account."
title="注册"
description="使用社交账号或邮箱注册"
icon="lucide-user"
:fields="fields"
:providers="providers"

82
app/components/docs/DocsAsideLeftTop.vue
View File

@@ -4,76 +4,24 @@ import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'lucide-book-open'
label: '稷维科技',
icon: 'lucide-globe',
to: 'https://www.xajiwei.com',
target: '_blank',
},
{
label: 'Composables',
icon: 'lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/'
},
{
label: 'useOverlay',
icon: 'lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/'
},
{
label: 'useToast',
icon: 'lucide-file-text',
description: 'Display a toast within your application.',
to: '/'
}
]
},
{
label: 'Components',
label: '组件速查',
icon: 'lucide-box',
to: '',
children: [
{
label: 'Link',
icon: 'lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/'
},
{
label: 'Modal',
icon: 'lucide-file-text',
description: 'Display a modal within your application.',
to: '/'
},
{
label: 'NavigationMenu',
icon: 'lucide-file-text',
description: 'Display a list of links.',
to: '/'
},
{
label: 'Pagination',
icon: 'lucide-file-text',
description: 'Display a list of pages.',
to: ''
},
{
label: 'Popover',
icon: 'lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/'
},
{
label: 'Progress',
icon: 'lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/'
}
]
}
to: '/简单文档/components/api'
},
{
label: '关于',
icon: 'lucide-info',
to: '/about'
},
]
// [
// {

26
app/components/example/ExampleAlert.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup>
const props = defineProps({
type: {
type: String,
default: () => '',
},
})
const alertClass = computed(() => {
return {
warning: 'bg-orange-100 border-orange-200 dark:bg-orange-900 dark:border-orange-800',
info: 'bg-blue-100 border-blue-200 dark:bg-blue-900 dark:border-blue-800',
success: 'bg-green-100 border-green-200 dark:bg-green-900 dark:border-green-800',
}[props.type]
})
</script>
<template>
<div
class="text-black p-2 border dark:text-white rounded"
:class="alertClass"
>
<slot mdc-unwrap="p" />
</div>
</template>

5
app/components/example/ExampleCard.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
<slot />
</div>
</template>

11
app/components/example/ExampleFulltextContentSearch.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<UCard>
<UButton
color="primary"
icon="i-lucide-search"
@click="useContentSearch().open.value = true"
>
Open Search Modal
</UButton>
</UCard>
</template>

47
app/components/example/ExampleFulltextFusejs.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import Fuse from 'fuse.js'
const query = ref('')
const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
const fuse = new Fuse(data.value || [], {
keys: [
'title',
'description',
],
})
const result = computed<Array<{ item: typeof data.value[0] }>>(() => fuse.search(toValue(query)).slice(0, 10))
</script>
<template>
<UContainer class="p-4">
<UCard>
<UInput
v-model="query"
placeholder="Search..."
class="w-full"
/>
<ul>
<li
v-for="link of result"
:key="link.item.id"
class="mt-2"
>
<UButton
variant="ghost"
class="w-full"
:to="link.item.id"
>
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">{{ link.item.title }}</span>
<span class="text-gray-500 text-xs truncate">
{{ link.item.content?.slice(0, 100) }}...
</span>
</div>
</UButton>
</li>
</ul>
</UCard>
</UContainer>
</template>

51
app/components/example/ExampleFulltextMiniSearch.vue Normal file
View File

@@ -0,0 +1,51 @@
<script setup lang="ts">
import MiniSearch from 'minisearch'
const query = ref('')
const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
const miniSearch = new MiniSearch({
fields: ['title', 'content'],
storeFields: ['title', 'content'],
searchOptions: {
prefix: true,
fuzzy: 0.2,
},
})
// Add data to the MiniSearch instance
miniSearch.addAll(toValue(data.value || []))
const result = computed(() => miniSearch.search(toValue(query)).slice(0, 10))
</script>
<template>
<UContainer class="p-4">
<UCard>
<UInput
v-model="query"
placeholder="Search..."
class="w-full"
/>
<ul>
<li
v-for="link of result"
:key="link.id"
class="mt-2"
>
<UButton
variant="ghost"
class="w-full"
:to="link.id"
>
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">{{ link.title }}</span>
<span class="text-gray-500 text-xs truncate">
{{ link.content?.slice(0, 100) }}...
</span>
</div>
</UButton>
</li>
</ul>
</UCard>
</UContainer>
</template>

8
app/components/example/ExampleHero.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<section class="pt-4">
<h1 class="text-4xl">
<slot mdc-unwrap="p" />
</h1>
<slot name="description" />
</section>
</template>

29
app/components/example/ExampleIconCard.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup>
defineProps({
title: {
type: String,
default: 'Default title',
},
description: {
type: String,
default: 'Default description',
},
icon: {
type: String,
default: 'IconMarkdown',
},
})
</script>
<template>
<div class="p-6 border bg-white dark:bg-black dark:border-gray-700 rounded">
<UIcon
:name="icon"
class="w-20 h-20"
/>
<h2 class="text-3xl font-semibold mb-2">
{{ title }}
</h2>
<p>{{ description }}</p>
</div>
</template>

22
app/components/example/ExampleLandingHero.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup lang="ts">
defineProps<{
image: string
}>()
</script>
<template>
<section class="flex flex-col sm:flex-row sm:items-center gap-4 py-8 sm:gap-12 sm:py-12 h-[331px]">
<div class="flex flex-col gap-1">
<h1 class="text-4xl font-semibold">
<slot name="title" />
</h1>
<div class="text-base text-gray-600 dark:text-gray-300">
<slot name="description" />
</div>
</div>
<img
:src="image"
class="w-1/2 rounded-lg"
>
</section>
</template>

5
app/components/example/ExampleTitle.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<h1 class="text-4xl text-black dark:text-white">
<slot mdc-unwrap="p" />
</h1>
</template>

6
content.config.ts
View File

@@ -2,15 +2,11 @@ import { defineContentConfig, defineCollection, z } from '@nuxt/content'
export default defineContentConfig({
collections: {
landing: defineCollection({
type: 'page',
source: 'index.md'
}),
docs: defineCollection({
type: 'page',
source: {
include: '**',
exclude: ['index.md']
exclude: ['/web/**']
},
schema: z.object({
links: z.array(z.object({

222
content/1.简单文档/1.index.md
View File

@@ -5,12 +5,218 @@ navigation:
icon: lucide-house
---
## Motivations 动机
## 缘起
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
于是自己动手，丰衣足食。
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
于是自己动手，丰衣足食.
同时在 Markdown 语法的基础上增加了许多**魔法(自定义组件)**,比如:
## Features 特性
::code-group
```mdc [index.md]
在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
::card
这里是卡片里的内容
::
```
```html [Card.vue]
<!-- Card组件: components/content/Card.vue -->
<template>
<div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
<slot />
</div>
</template>
```
:::code-preview{icon="i-lucide-eye" label="Preview"}
::::example-card
这里是卡片里的内容
::::
:::
::
:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App" }
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.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 [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.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
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.
````
::
:::
::code-group
```md [搜索.md]
#### 此组件打开一个模态搜索框,进行搜索
::::example-fulltext-content-search
::::
#### 此组件建立一个mini搜索框,进行搜索
::::example-fulltext-mini-search
::::
```
:::code-preview{label="预览模态组件" icon="i-lucide-eye"}
::::example-fulltext-content-search
::::
:::
:::code-preview{label="预览搜索框组件" icon="i-lucide-eye"}
::::example-fulltext-mini-search
::::
:::
::
::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"}
阅读更多关于 [`自定义组件`](/简单文档/components/api) 的内容.
::
## 特性
- 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
- 完美支持 Markdown 和 相关扩展。
@@ -20,14 +226,12 @@ navigation:
- 开源且免费。
- 支持移动端。
## Credits 致谢
## 致谢
- Nuxt Content：为 Vue 开发者简化内容管理。
- shadcn-ui：用于美观的组件和文档设计。
- shadcn-vue: 用于 shadcn-ui 的 vue 版本及部分文档组件源码。
- Nuxt UI Pro ：文档系统 UI 组件。
- Docus：获取灵感及一些文档组件源代码。
- Nuxt UI Pro 文档：获取灵感。
## License 许可证
## License
MIT

7
content/1.简单文档/5.components/1.API.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: 常用组件
description: 常用自定义组件速查文档
navigation:
icon: lucide-component
---

7
content/1.简单文档/5.components/1.v1.md
View File

@@ -1,7 +0,0 @@
---
title: Upgrade to v1
description: Changes and upgrade guide for v1.0.
navigation:
icon: lucide:circle-arrow-up
---

158
content/1.简单文档/5.components/alert.md Normal file
View File

@@ -0,0 +1,158 @@
---
icon: lucide:triangle-alert
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
---
## Usage
::stack
::div{class="p-4"}
::alert{icon="lucide:info"}
A **default** alert with `code` and a [link](/).
::
::alert{type="secondary" icon="lucide:info"}
A **secondary** alert with `code` and a [link](/).
::
::
```mdc
::alert{icon="lucide:info"}
A **default** alert with `code` and a [link](/).
::
::alert{type="secondary" icon="lucide:info"}
A **secondary** alert with `code` and a [link](/).
::
```
::
### Link
::stack
::div{class="p-4"}
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
A **link** alert.
::
::
```mdc
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
A **link** alert.
::
```
::
### Variants
::tabs{variant="line"}
::stack{label="info" icon="lucide:info"}
::div{class="p-3"}
::alert{type="info" icon="lucide:info"}
An **info** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="info" icon="lucide:info"}
An **info** alert with `code` and a [link](/).
::
```
::
::stack{label="note" icon="lucide:pencil"}
::div{class="p-3"}
::alert{type="note" icon="lucide:pencil"}
A **note** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="note" icon="lucide:pencil"}
A **note** alert with `code` and a [link](/).
::
```
::
::stack{label="success" icon="lucide:lightbulb"}
::div{class="p-3"}
::alert{type="success" icon="lucide:lightbulb"}
A **success** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="success" icon="lucide:lightbulb"}
A **success** alert with `code` and a [link](/).
::
```
::
::stack{label="example" icon="lucide:test-tube"}
::div{class="p-3"}
::alert{type="example" icon="lucide:test-tube"}
An **example** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="example" icon="lucide:test-tube"}
An **example** alert with `code` and a [link](/).
::
```
::
::stack{label="warning" icon="lucide:triangle-alert"}
::div{class="p-3"}
::alert{type="warning" icon="lucide:triangle-alert"}
A **warning** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="warning" icon="lucide:triangle-alert"}
A **warning** alert with `code` and a [link](/).
::
```
::
::stack{label="danger" icon="lucide:circle-x"}
::div{class="p-3"}
::alert{type="danger" icon="lucide:circle-x"}
A **danger** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="danger" icon="lucide:circle-x"}
A **danger** alert with `code` and a [link](/).
::
```
::
::
### Title
::stack
::div{class="p-4"}
::alert{title="Title" icon="lucide:layout-list"}
An alert with a title.
::
::
```mdc
::alert{title="Title" icon="lucide:layout-list"}
An alert with a title.
::
```
::
## Props
::field-group
:field{name="title" type="string"}[Alert title]
:field{name="icon" type="string"}[Alert icon]
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="external" type="boolean"}[Alias to `target='_blank'`]
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
::

125
content/1.简单文档/5.components/badge.md Normal file
View File

@@ -0,0 +1,125 @@
---
title: Badge
icon: lucide:badge
badges:
- value: Docus
to: https://docus.dev/api/components#badge
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
target: _blank
---
## Usage
::stack
::div{class="p-3"}
::badge
Default
::
::badge{size="sm"}
Small
::
::
```mdc
::badge
Default
::
::badge{size="sm"}
Small
::
```
::
### Variants
::tabs{variant="line"}
::stack{label="outline"}
::div{class="p-3"}
:badge[Outline]{variant="outline"}
::
```mdc
:badge[Outline]{variant="outline"}
```
::
::stack{label="secondary"}
::div{class="p-3"}
:badge[Secondary]{variant="secondary"}
::
```mdc
:badge[Secondary]{variant="secondary"}
```
::
::stack{label="info"}
::div{class="p-3"}
:badge[Info]{type="info"}
::
```mdc
:badge[Info]{type="info"}
```
::
::stack{label="warning"}
::div{class="p-3"}
:badge[Warning]{type="warning"}
::
```mdc
:badge[Warning]{type="warning"}
```
::
::stack{label="success"}
::div{class="p-3"}
:badge[Success]{type="success"}
::
```mdc
:badge[Success]{type="success"}
```
::
::stack{label="lime"}
::div{class="p-3"}
:badge[lime]{type="lime"}
::
```mdc
:badge[lime]{type="lime"}
```
::
::stack{label="danger"}
::div{class="p-3"}
:badge[Danger]{type="danger"}
::
```mdc
:badge[Danger]{type="danger"}
```
::
::
### Link
::stack
::div{class="p-3"}
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
Link
::
::
```mdc
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
Link
::
```
::
## Props
::field-group
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
:field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
:field{name="size" type="'md' | 'sm'" default-value="'md'"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
::

53
content/1.简单文档/5.components/button-link.md Normal file
View File

@@ -0,0 +1,53 @@
---
title: Button Link
icon: lucide:external-link
badges:
- value: Docus
to: https://docus.dev/api/components#buttonlink
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
target: _blank
- value: 0.6.5
---
## Usage
::stack
::div{class="p-3 flex gap-4"}
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
Get Started
::
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
GitHub
::
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
Ghost
::
::
```mdc
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
Get Started
::
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
GitHub
::
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
Ghost
::
```
::
## Props
::field-group
:field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
:field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
:field{name="leftIcon" type="string"}[Icon on the left]
:field{name="rightIcon" type="string"}[Icon on the right]
:field{name="to" type="string"}[Link URL]
:field{name="href" type="string"}[Alias to `to`]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="blank" type="boolean"}[Alias to `target='_blank'`]
::

16
content/1.简单文档/5.components/callout.md Normal file
View File

@@ -0,0 +1,16 @@
---
title: Callout
icon: lucide:megaphone
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/callout
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
target: _blank
---
::alert{to="/components/docs/alert"}
`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
::

175
content/1.简单文档/5.components/card-group.md Normal file
View File

@@ -0,0 +1,175 @@
---
title: Card Group
icon: lucide:layout-grid
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/card-group
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::card-group
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::card
---
title: Commands
icon: lucide:square-terminal
to: https://nuxt.com/docs/api/commands/add
target: _blank
---
List of Nuxt CLI commands to init, analyze, build, and preview your application.
::
::
::
```mdc
::card-group
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::card
---
title: Commands
icon: lucide:square-terminal
to: https://nuxt.com/docs/api/commands/add
target: _blank
---
List of Nuxt CLI commands to init, analyze, build, and preview your application.
::
::
```
::
### Cols
::stack
::div{class="p-4"}
::card-group{:cols="3"}
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::
::
```mdc
::card-group{:cols="3"}
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::
```
::
## Props
::field-group
:field{name="cols" type="1 | 2 | 3 | 4 | 5 | 6" default-value="2"}[Number of columns (only for desktop)]
::

173
content/1.简单文档/5.components/card.md Normal file
View File

@@ -0,0 +1,173 @@
---
title: Card
icon: lucide:square
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/card
target: _blank
- value: Docus
to: https://docus.dev/api/components#card
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Card.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::card
---
icon: lucide:box
---
#title
Card Title
#description
Description
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
#footer
Footer
::
::
```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
::
```
::
### Link
::stack
::div{class="p-4"}
::card
---
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
target: _blank
# showLinkIcon: false
---
#title
Link Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
target: _blank
# showLinkIcon: false
---
#title
Link Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
### Horizontal
::stack
::div{class="p-4"}
::card
---
icon: 'lucide:fold-horizontal'
icon-size: 26
horizontal: true
---
#title
Horizontal Card
#description
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
icon: 'lucide:fold-horizontal'
icon-size: 26
horizontal: true
---
#title
Horizontal Card
#description
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
### Image
::stack
::div{class="p-4"}
::card
---
img: /og-nuxt.png
---
#title
Image Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
img: /og-nuxt.png
---
#title
Image Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
## Props
::field-group
:field{name="title" type="string"}[Card title]
:field{name="description" type="string"}[Card description]
:field{name="content" type="string"}[Card content]
:field{name="footer" type="string"}[Card footer]
:field{name="icon" type="string"}[Card icon]
:field{name="horizontal" type="boolean" default-value="false"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="iconSize" type="number" default-value="24"}
:field{name="img" type="string"}[Image URL]
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
::

77
content/1.简单文档/5.components/code-group.md Normal file
View File

@@ -0,0 +1,77 @@
---
title: Code Group
icon: lucide:code-xml
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/code-group
target: _blank
- value: Docus
to: https://docus.dev/api/components#codegroup
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::code-group
```vue [app.vue]
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
```
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
::
::
```mdc
::code-group
```vue [app.vue]
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
```
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
::
```
::
::alert{to="/components/docs/tabs"}
`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
::
## Props
:field{name="sync" type="string"}[Sync scope for `::tabs`]

324
content/1.简单文档/5.components/code-tree.md Normal file
View File

@@ -0,0 +1,324 @@
---
title: Code Tree
icon: lucide:folder-code
badges:
- value: 0.8.17
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeTree.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.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 [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.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
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.
````
::
::
`````mdc height=400
::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.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 [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.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
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.
````
::
`````
::
## Props
::field-group
:field{name="defaultValue"}[Default open file]
:field{name="title" type="string"}[Code tree title]
:field{name="height" type="number" default-value="400"}
::

62
content/1.简单文档/5.components/field-group.md Normal file
View File

@@ -0,0 +1,62 @@
---
title: Field Group
icon: lucide:settings-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/field-group
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::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.
::
::
::
```mdc
::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.
::
::
```
::

39
content/1.简单文档/5.components/field.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Field
icon: lucide:settings-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/field
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
::
```mdc
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
```
::
The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
## Props
::field-group
:field{name="name" type="string"}[Field name]
:field{name="type" type="string"}[Field type]
:field{name="description" type="string"}[Field description]
:field{name="defaultValue" type="string"}[Field default value]
:field{name="required" type="boolean"}[Whether the field is required]
::

182
content/1.简单文档/5.components/file-tree.md Normal file
View File

@@ -0,0 +1,182 @@
---
title: File Tree
icon: lucide:folder-tree
badges:
- value: 0.8.10
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::file-tree
---
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^ # This is highlighted
- docs:
- index.md
---
::
```
::
### Customizations
::stack
::div{class="p-4"}
::file-tree
---
title: File Tree Title
icon: lucide:folder-tree
autoSlash: false # Whether to add a slash after every folder automatically
showArrow: true # Whether to show the guide arrow
tree:
- components:
- layout:
- Header.vue
- Footer.vue
- ...
- content:
- Accordion.vue
- Alert.vue
- ProseCode.vue
- ...
---
::
::
```mdc
::file-tree
---
title: File Tree Title
icon: lucide:folder-tree
autoSlash: false # Whether to add a slash after every folder automatically
showArrow: true # Whether to show the collapse arrow
tree:
- components:
- layout:
- Header.vue
- Footer.vue
- ...
- content:
- Accordion.vue
- Alert.vue
- ProseCode.vue
- ...
---
::
```
::
### Disable Icons
::stack
::div{class="p-4"}
::file-tree
---
showIcon: false
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
showIcon: false
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
```
::
### Diff
::stack
::div{class="p-4"}
::file-tree
---
showIcon: false
tree:
- app:
- + components:
- Header.vue
- "- Footer.vue"
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
showIcon: false
tree:
- app:
- + components:
- Header.vue
- "- Footer.vue"
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
```
::
## Props
::field-group
:field{name="tree"}[The file tree]
:field{name="title" type="string"}[File tree title]
:field{name="icon" type="string"}[File tree title icon]
:field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
:field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
:field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
::

94
content/1.简单文档/5.components/icon.md Normal file
View File

@@ -0,0 +1,94 @@
---
title: Icon
icon: lucide:star
badges:
- value: Docus
to: https://docus.dev/api/components#icon
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
target: _blank
---
::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
::
## Usage
::stack
::div{class="p-4 space-x-2"}
: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"}
::
```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"}
```
::
If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
```bash [Terminal]
npm i -D @iconify-json/collection-name
```
`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
### Smart Icon
:badge[0.5.3]{variant="outline"}
You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will render them automatically.
::stack
::div{class="p-4"}
**Iconify**
<div class="space-x-2">
:smart-icon{name="lucide:box"}
:smart-icon{name="vscode-icons:file-type-js-official"}
:smart-icon{name="vscode-icons:file-type-vue"}
</div>
**Emojis**
<div class="space-x-2">
:smart-icon{name="😍"}
:smart-icon{name="🚀"}
:smart-icon{name="🎉" :size="30"}
</div>
**URL**
<div class="space-x-2">
:smart-icon{name="/logo.svg"}
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
</div>
::
```mdc
**Iconify**
:smart-icon{name="lucide:box"}
:smart-icon{name="vscode-icons:file-type-js-official"}
:smart-icon{name="vscode-icons:file-type-vue"}
**Emojis**
:smart-icon{name="😍"}
:smart-icon{name="🚀"}
:smart-icon{name="🎉" :size="30"}
**URL**
:smart-icon{name="/logo.svg"}
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
```
::

82
content/1.简单文档/5.components/playground.md Normal file
View File

@@ -0,0 +1,82 @@
---
title: Playground
icon: lucide:app-window
navBadges:
- value: New
type: lime
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
target: _blank
---
## Usage
### Stackblitz
::stack
::div{class="p-4"}
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
::
```mdc
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```
::
### CodeSandbox
::stack
::div{class="p-4"}
::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::
::
```mdc
::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```
::
## Props
::field-group
:field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
:field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
:field{name="branch" type="string" default-value="main"}[Branch name]
::field{name="id" type="string"}
Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
::alert{icon="lucide:info" type="info"}
You need to provide either `repo` or `id` prop, but not both.
::
::
:field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
:field{name="file" type="string"}[File path to open]
:field{name="title" type="string" default-value="Playground"}[Title of the iframe]
::

39
content/1.简单文档/5.components/read-more.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Read More
icon: lucide:bookmark
badges:
- value: undocs
to: https://undocs.pages.dev/guide/components#read-more
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
: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/"}
::
```mdc
: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/"}
```
::
## Props
::field-group
:field{name="title" type="string"}[Read More title]
:field{name="icon" type="string"}[Read More icon]
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
::

89
content/1.简单文档/5.components/stack.md Normal file
View File

@@ -0,0 +1,89 @@
---
title: Stack
icon: lucide:rows-3
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
target: _blank
- value: 0.6.2
---
## Usage
::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**.
::
::
::
```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**.
::
::
```
::
Stackable components:
- `div`
- Code Blocks
- `alert`
- `callout`
- `read-more`
- `code-group`
- `code-tree`
- `card`
- `tabs`
- `pm-install`
- `pm-run`
- `pm-x`

148
content/1.简单文档/5.components/steps.md Normal file
View File

@@ -0,0 +1,148 @@
---
title: Steps
icon: lucide:arrow-down-0-1
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
target: _blank
---
## Usage
::stack
::div{class="p-4 md:p-6"}
::steps
### Get Starter Template
::code-group
```bash [npm]
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [pnpm]
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [bun]
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
::
::alert
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
::
### Install Dependencies
::code-group
```bash [npm]
npm install
```
```bash [pnpm]
pnpm install
```
```bash [bun]
bun install
```
::
### Development Server
::code-group
```bash [npm]
npm run dev -- -o
```
```bash [pnpm]
pnpm dev -o
```
```bash [bun]
bun run dev -o
```
::
::
::
```mdc height=400
::steps
### Get Starter Template
::code-group
```bash [npm]
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [pnpm]
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [bun]
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
::
::alert
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
::
### Install Dependencies
::code-group
```bash [npm]
npm install
```
```bash [pnpm]
pnpm install
```
```bash [bun]
bun install
```
::
### Development Server
::code-group
```bash [npm]
npm run dev -- -o
```
```bash [pnpm]
pnpm dev -o
```
```bash [bun]
bun run dev -o
```
::
::
```
::
### Multi-level headings
:badge[0.4.6]{variant="outline"}
::stack
::div{class="p-4 md:p-6"}
::steps{:level="5"}
##### Specify the level of headings to use
```mdc
::steps{:level="5"}
```
##### Available Headings
`h1` through `h6`. Defaults to `h3`.
::
::
```mdc
::steps{:level="5"}
##### Multi-level headings
```mdc
::steps{:level="5"}
```
##### Available Headings
`h1` through `h6`. Defaults to `h3`.
::
```
::
## Props
:field{name="level" type="number"}[Specify the level of headings to use]

375
content/1.简单文档/5.components/tabs.md Normal file
View File

@@ -0,0 +1,375 @@
---
title: Tabs
icon: lucide:table-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/tabs
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::tabs
::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
```
::
::
::
```mdc height=300
::tabs
::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
```
::
::
```
::
### Card Style
::stack
::div{class="p-4"}
::tabs{variant="card"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::
```mdc
::tabs{variant="card"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
```
::
### Line Style
:badge[0.6.4]{variant="outline"}
::stack
::div{class="p-4"}
::tabs{variant="line"}
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
:badge[Badge]
::
::div{label="Code"}
```tsx
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return <Badge>Badge</Badge>
}
```
::
::
::
```mdc
::tabs{variant="line"}
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
:badge[Badge]
::
::div{label="Code"}
```tsx
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return <Badge>Badge</Badge>
}
```
::
::
```
::
### Combobox Style
:badge[0.7.5]{variant="outline"}
::stack
::div{class="p-4"}
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
::div{label="PostgreSQL"}
### 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
```
::
::
::
```mdc height=300
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
::div{label="PostgreSQL"}
### 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
```
::
::
```
::
### Synced Tabs
:badge[0.8.0]{variant="outline"}
:read-more{to="/components/docs/pm"}
::stack
::div{class="p-4 md:p-8"}
#### Scope 1
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
#### Scope 2
::tabs{variant="line" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="separate" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::
```mdc height=400
#### Scope 1
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
#### Scope 2
::tabs{variant="line" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="separate" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
```
::
## Props
::field-group
:field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
:field{name="padded" type="boolean" default-value="true"}
:field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
:field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
:field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
:field{name="sync" type="string"}[Sync scope]
::

6
content/99.about.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: 关于
description: Estel Docs 文档系统
date: 2025-07-31
navigation: false
---

14
nuxt.config.ts
View File

@@ -67,5 +67,17 @@ export default defineNuxtConfig({
scan: true,
sizeLimitKb: 512
}
}
},
llms: {
domain: 'https://docs.jiwei.xin',
title: 'Estel Docs',
description: 'Estel Docs 文档系统',
sections: [
{
title: 'Estel Docs',
description: 'Estel Docs 文档系统',
contentCollection: 'docs'
},
],
},
})

5
package.json
View File

@@ -21,8 +21,8 @@
"nuxt-content",
"shadcn-vue"
],
"main": "./nuxt.config.ts",
"scripts": {
"main": "./nuxt.config.ts",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
@@ -38,6 +38,7 @@
"@nuxt/image": "^1.10.0",
"@nuxt/ui-pro": "^3.2.0",
"better-sqlite3": "^12.2.0",
"minisearch": "^7.1.2",
"nuxt": "^4.0.1",
"nuxt-llms": "0.1.3",
"nuxt-og-image": "^5.1.9"

8
pnpm-lock.yaml generated
View File

@@ -29,6 +29,9 @@ importers:
better-sqlite3:
specifier: ^12.2.0
version: 12.2.0
minisearch:
specifier: ^7.1.2
version: 7.1.2
nuxt:
specifier: ^4.0.1
version: 4.0.1(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.0.7)(@vue/compiler-sfc@3.5.17)(better-sqlite3@12.2.0)(db0@0.3.2(better-sqlite3@12.2.0))(eslint@9.31.0(jiti@2.4.2))(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.45.1)(terser@5.43.1)(typescript@5.8.3)(vite@7.0.6(@types/node@24.0.7)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.1)(yaml@2.8.0))(vue-tsc@3.0.1(typescript@5.8.3))(yaml@2.8.0)
@@ -4572,6 +4575,9 @@ packages:
resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
engines: {node: '>=16 || 14 >=14.17'}
minisearch@7.1.2:
resolution: {integrity: sha512-R1Pd9eF+MD5JYDDSPAp/q1ougKglm14uEkPMvQ/05RGmx6G9wvmLTrTI/Q5iPNJLYqNdsDQ7qTGIcNWR+FrHmA==}
minizlib@3.0.2:
resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
engines: {node: '>= 18'}
@@ -11469,6 +11475,8 @@ snapshots:
minipass@7.1.2: {}
minisearch@7.1.2: {}
minizlib@3.0.2:
dependencies:
minipass: 7.1.2