Prosécurité CodeTree

GitHub à
Visualisez les structures de fichiers et de dossiers avec du code syntaxé.

Utilisation

Enveloppez vos blocs de code avec un composant code-tree dans un ordre particulier pour afficher une arborescence de vos fichiers.

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 default définition ({
  modules: ['@ nuxt/ui'],

  css: ['/assets/css/main.css']
})

```

```css [app/assets/css/main.css]
@ import "développeur";
@ import "@ nuxt/ui";
```

```ts [app/app.config.ts]
export default définition ({
  là:{
    couleurs: {
      Prénom:"Sky"
      Couleur: Slate
    }
  }
})
```

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

```json [package.json]
{
  "nom":"nuxt-app",
  "privé": vrai,
  "type":"module",
  "écrits":
    "build":"nuxt build",
    "dev":"nuxt dev",
    "générer":"nuxt générer",
    "preview":"nuxt preview",
    "postinstall":"nuxt prepare",
    "typecheck":"nuxt typecheck"
  },
  "dépendance":
    "@ iconify-json/lucide":"^1.2.0",
    "@ nuxt/ui":"^4.0.0",
    "nuxt":"^4.0.0"
  },
  "dépendances":{
    "typescript":"^6.0.0",
    "vue-tsc":"^3.2.0"
  }
}
```

```json [tsconfig.json]
{
  extends: ./.nuxt/tsconfig.json
}
```

````md [README.md]
# nuxt 4 démarreur minimal

Consultez la documentation [Nuxt 4 ](https://nuxt.com/docs/getting-started/introduction) pour en savoir plus.

## Réseau

Assurez-vous d'installer les dépendances:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Serveur de développement

Démarrez le serveur de développement sur `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Créer l'application pour la production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Prévisualisation de la production locale:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Consultez la documentation de déploiement [x](https://nuxt.com/docs/getting-started/deployment) pour plus d'informations.
````

::
Comme le composant ProsePre, le CodeTree gère les noms de fichiers, les icônes et le bouton de copie.

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
{}

Thème

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

CodePreview

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

Collapsible

Toggle content visibility with smooth expand and collapse animations.