ProseCodeTree (프로세코드트리)

Github (GitHub)
구문 강조 표시된 코드를 사용하여 파일 및 폴더 구조를 시각화합니다.

Usage

코드 블록을 특정 순서로 code-tree 구성 요소로 래핑하여 파일의 트리 뷰를 표시합니다.Wrap your code blocks with a code-tree component in any particular order to display a tree view of your files.

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 defineNuxtConfig({ )
  modules: ['@nuxt/ui'],

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

```

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

```ts [app/app.config.ts]
export default defineAppConfig({ )
  UI: {
    색상 : {
      사진: "sky"
      색상 : slate
    }
  }
})
```

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

```json [package.json]
{
  이름 : nuxt-app
  "개인": 사실,
  "type": "module", "module",
  "스크립트": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate", "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nutxt typecheck": "nutxt typecheck"(텍스트 형식 검사)
  },
  "dependencies" : {
    "@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 documentation](https://nuxt.com/docs/getting-started/introduction)를 참조하십시오.

## Setup 프로그램

종속성을 설치하려면 다음과 같이 하십시오.Make sure to install dependencies:

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

## Production 제품

프로덕션용 응용 프로그램을 빌드하려면 다음과 같이 하십시오.

```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 documentation](https://nuxt.com/docs/getting-started/deployment)를 참조하십시오.
````

::
ProsePre 컴포넌트와 마찬가지로 CodeTree는 파일 이름, 아이콘 및 복사 버튼을 처리합니다.

API 파일

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

변경 로그

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.