ProseCode Tree

サイトマップ
構文ハイライトされたコードでファイルとフォルダ構造を視覚化します。

使用法

コードブロックを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]
export defineNuxtConfig {
  modules ['@ nuxt/ui']

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

```

```css [app/assets/css/main.css]
@ import“tailwindcss”；
@ import "@ nuxt/ui"；
```

```ts [app/app.config.ts]
export defineAppConfig {
  UI {
    色{
      主なものは「空」
      色'スレート'
    }
  }
})
```

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

```json [package.json]
{
  "name""nuxt—app"
  "private" true
  "type""module"
  "スクリプト"{
    "build""nuxt build"
    "dev""nuxt dev"
    "generate""nuxt generate"
    "preview""nuxt preview"
    "postinstall""nuxt prepare"
    "typecheck""nuxt typecheck"
  },
  "依存関係"{
    "@ iconify—json/lucide""^1.2.0"
    "@ nuxt/ui""^4.0.0"
    "nuxt""^4.0.0"
  },
  "devDependencies"{
    "typescript""^6.0.0"
    "vue—tsc""^3.2.0"
  }
}
```

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

````md [README.md]
# Nuxt 4最小スターター

詳細は[Nuxt 4ドキュメント](https://nuxt.com/docs/getting-started/introduction)をご覧ください。

## Setup

依存関係をインストールしてください：

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Developmentサーバ

`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
```

詳細は[deploymentドキュメント](https://nuxt.com/docs/getting-started/deployment)をご覧ください。
````

::
ProsePreコンポーネントと同様に、CodeTreeはファイル名、アイコン、コピーボタンを処理します。

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

スロット

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

CodePreview

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

Collapsible

Toggle content visibility with smooth expand and collapse animations.