ProseCodeTree

GitHub
Visualiseer bestands- en mapstructuren met syntaxis-gemarkeerde code.

Gebruik

Wikkel uw codeblokken met een code-tree-component in een bepaalde volgorde om een boomstructuur van uw bestanden weer te geven.

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})

::code-tree{defaultValue="app/app.config.ts"}

```ts [nuxt.config.ts]
export standaard defineNuxtConfig ({
modules: ['@ nuxt / ui'],

css: ['~ / assets / css / hoofd.css']
})

```

```css [app/assets/css/main.css]
@ import "staartwindcss";
@ import "@ nuxt / ui";
```

```ts [app/app.config.ts]
export standaard defineAppConfig ({
ui: {
kleuren: {
primair: 'lucht',
kleuren: 'lei'
    }
  }
})
```

```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```

```json [package.json]
{
"naam": "nuxt-app",
"privé": waar,
"type": "module",
"scripts": {
"bouwen": "nuxt bouwen",
"dev": "nieuwe ontwikkelaar",
"genereren": "nuxt genereren",
"preview": "nuxt preview",
"postinstall": "nuxt voorbereiden",
"typecheck": "nieuwe typecheck"
  },
"afhankelijkheden": {
"@ iconify-json / lucide": "^1.2.0",
"@ nuxt / ui": "^4.0.0",
"nuxt": "^4.0.0"
  },
"devDependencies": {
"typoscript": "^6.0.0",
"vue-tsc": "^3.2.0"
  }
}
```

```json [tsconfig.json]
{
"breidt uit": ". / .nuxt / tsconfig.json"
}
```

````md [README.md]
# Nuxt 4 Minimale aanzet

Bekijk de [Nuxt 4 documentation](https://nuxt.com/docs/getting-started/introduction) voor meer informatie.

## Opstelling

Zorg ervoor dat u de afhankelijkheden installeert:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Ontwikkelingsserver

Start de ontwikkelserver op `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Productie

Bouw de applicatie voor productie:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Lokaal preview productie bouwen:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Bekijk de documentation](https://nuxt.com/docs/getting-started/deployment) voor meer informatie.
````

::
Net als de ProsePre-component verwerkt de CodeTree bestandsnamen, pictogrammen en kopieerknop.

API

Props

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

Slot Type
default
{}

Thema

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'
                  ]
                }
              }
            }
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

CodePreview

Display code examples with a preview and their source for clearer documentation.

Collapsible

Toggle content visibility with smooth expand and collapse animations.