ProseCodeTree
使用语法突出显示的代码可视化文件和文件夹结构。
用法
使用code-tree组件以任意特定顺序包装代码块，以显示文件的树视图。
app/app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
::code-tree{defaultValue="app/app.config.ts"}
```ts [nuxt.config.ts]
defineNuxtConfig（{
模块：'@ nuxt/ui']，
css：文件'assets/css/main.css']
})
```
```css [app/assets/css/main.css]
@import“tailwindcss”;
@import“@nuxt/ui”;
```
```ts [app/app.config.ts]
defineAppConfig（{
UI：{
颜色：{
主：'天空'，
颜色：'slate'
}
}
})
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
“name”：“nuxt-app”，
“私有”：是，
“type”：“模块”，
“脚本”：{
“build”：“nuxt build”，
“dev”：“nuxt dev”，
“generate”：“nuxt generate”，
“preview”：“nuxt preview”，
“postinstall”：“nuxt prepare”，
“typecheck”：“nuxt typecheck”
},
“dependencies”：{
“@iconify-json/lucide”：“^1.2.0”，
“@nuxt/ui”：“^4.0.0”，
“nuxt”：“^4.0.0”
},
“develop”：{
“typescript”：“^6.0.0”，
“vue-tsc”：“^3.2.0”
}
}
```
```json [tsconfig.json]
{
“extends”：“./.nuxt/tsv.json”
}
```
````md [README.md]
# Nuxt 4最小启动器
查看[Nuxt 4文档](https://nuxt.com/docs/getting-started/introduction)了解更多信息。
## 设置
确保安装依赖项：
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## 开发服务器
在`http://localhost:3000`上启动开发服务器：
```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
```
查看[部署文档](https://nuxt.com/docs/getting-started/deployment)了解更多信息。
````
::
API
Props
| Prop | Default | Type |
|---|---|---|
items | TreeItem[] | |
modelValue | stringThe selected path. | |
defaultValue | stringThe default path to select. | |
expandAll | false | boolean Expand all directories by default. |
ui | { root?: SlotClass; list?: SlotClass; item?: SlotClass; listWithChildren?: SlotClass; itemWithChildren?: SlotClass; link?: SlotClass; linkLeadingIcon?: SlotClass; linkLabel?: SlotClass; linkTrailing?: SlotClass; linkTrailingIcon?: SlotClass; content?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
prose: {
codeTree: {
slots: {
root: 'relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md',
list: 'isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto',
item: '',
listWithChildren: 'ms-4.5 border-s border-default',
itemWithChildren: 'ps-1.5 -ms-px',
link: 'relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none before:outline-primary/25 focus-visible:before:outline-3',
linkLeadingIcon: 'size-4 shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-expanded:rotate-180',
content: 'overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-s-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto'
},
variants: {
active: {
true: {
link: 'text-highlighted before:bg-elevated'
},
false: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
]
}
}
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
codeTree: {
slots: {
root: 'relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md',
list: 'isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto',
item: '',
listWithChildren: 'ms-4.5 border-s border-default',
itemWithChildren: 'ps-1.5 -ms-px',
link: 'relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none before:outline-primary/25 focus-visible:before:outline-3',
linkLeadingIcon: 'size-4 shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-expanded:rotate-180',
content: 'overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-s-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto'
},
variants: {
active: {
true: {
link: 'text-highlighted before:bg-elevated'
},
false: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
]
}
}
}
}
}
}
})
]
})Changelog
No recent changes