Der ProsecodeTree
Visualisieren Sie Datei-und Ordnerstrukturen mit Syntax-hervorgehobenem Code.
Bearbeiten
Wickeln Sie Ihre Codeblöcke mit einer code-tree-Komponente in einer bestimmten Reihenfolge ein, um eine Baumansicht Ihrer Dateien anzuzeigen.
app/app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
::code-tree{defaultValue="app/app.config.ts"}
```ts [nuxt.config.ts]
default export defineNuxtConfig ({Dateiendung})
Module: ['@ nuxt/ui'],
css: ['~/assets/css/main.css']
})
```
```css [app/assets/css/main.css]
@ import "tailwindcss";
@ import "@ nuxt/ui";
```
```ts [app/app.config.ts]
default export defineAppConfig ({Dateiendung})
siehe: {
Farben: {
Stichwort: „ Sky ".
Farbe: „ Slate "
}
}
})
```
```vue [app/app.vue]
x122x Bearbeiten
X123x Bearbeiten
x124x Bearbeiten
X125x Bearbeiten
x126x Bearbeiten
```
```json [package.json]
{
"name":"nuxt-app",
"privat": wahr,
"Typ":"Modul",
„ Schriftstücke ":
„ build ": „ nuxt build",
„ dev ": „ nuxt dev",
„ Generate ": „ Nuxt Generate", „ Generieren ",
"Vorschau":"nuxt preview",
"postinstall":"nuxt prepare","nuxt vorbereiten",
"Typecheck":"Nuxt Typecheck"("Typecheck")
},
"Abhängigkeiten":
"@ iconify-json/lucide":"^1.2.0","@ iconify-json/lucide":"^1.2.0",
"@ nuxt/ui":"^4.0.0","@ nuxt/ui":"^4.0.0",
"nuxt":"^4.0.0"(auf Englisch):
},
"Abhängigkeiten":{
"TypeScript":"^6.0.0",
"vue-tsc":"^3.2.0"(auf Englisch)
}
}
```
```json [tsconfig.json]
{
"extends":"./.nuxt/tsconfig.json"(erweitert)
}
```
````md [README.md]
# Nuxt 4 Minimal Starter (englisch)
Schauen Sie sich die [Nuxt 4-Dokumentation ](https://nuxt.com/docs/getting-started/introduction) an, um mehr zu erfahren.
## Setup (englisch)
Stellen Sie sicher, dass Sie die Abhängigkeiten installieren:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server (englisch)
Starten Sie den Entwicklungsserver auf `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Produktion
Erstellen Sie die Anwendung für die Produktion:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Lokale Vorschau des Produktionsbuild:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Weitere Informationen finden Sie in der [deployment-Dokumentation ](https://nuxt.com/docs/getting-started/deployment).
````
::
API Bearbeiten
Props (englisch)
| 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 (englisch)
| Slot | Type |
|---|---|
default | {} |
Theme Bearbeiten
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 (englisch)
No recent changes