Der ProsecodeTree

GitHub
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).
````

::
Wie die ProsePre-Komponente verarbeitet die CodeTree Dateinamen, Symbole und Kopierschaltflächen.

API Bearbeiten

Props (englisch)

Prop Default Type
items
TreeItem[]
modelValue
string

The selected path.

defaultValue
string

The 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