Hesoyam

File Tree

A nested directory: expandable Folder rows and File leaves, indented by depth.

Default

Tree provides depth. Folder toggles its children. default-open expands a branch on first paint.

      • .vc-config.json
      • index.js

        

          1
          
          <Tree>
        

          2
          
            <Folder name=".vercel" default-open>
        

          3
          
              <Folder name="output" default-open>
        

          4
          
                <File name=".vc-config.json" />
        

          5
          
                <File name="index.js" />
        

          6
          
              </Folder>
        

          7
          
            </Folder>
        

          8
          
            <Folder name="app">
        

          9
          
              <File name="main.ts" />
        

          10
          
              <File name="dashboard.ts" />
        

          11
          
            </Folder>
        

          12
          
          </Tree>

File types

type is edge-function, lambda, or middleware. Each paints a badge and a tinted icon.

    • main.tsEdge
    • dashboard.tsλ
    • middleware.tsMW
    • README.md

        

          1
          
          <Tree>
        

          2
          
            <Folder name="app" default-open>
        

          3
          
              <File name="main.ts" type="edge-function" />
        

          4
          
              <File name="dashboard.ts" type="lambda" />
        

          5
          
              <File name="middleware.ts" type="middleware" />
        

          6
          
              <File name="README.md" />
        

          7
          
            </Folder>
        

          8
          
          </Tree>

Links

href turns the file row into an anchor. Use it when the name should open a source file or docs page.


        

          1
          
          <Tree>
        

          2
          
            <Folder name="docs" default-open>
        

          3
          
              <File name="drawer.vue" href="/drawer" />
        

          4
          
              <File name="fieldset.vue" href="/fieldset" />
        

          5
          
              <File name="file-tree.vue" />
        

          6
          
            </Folder>
        

          7
          
          </Tree>

Best practices

  • File Tree illustrates a layout in docs or a deploy artifact. It is not a full IDE explorer — no multi-select, rename, or drag.
  • Always wrap rows in Tree. Depth indent comes from provide/inject; a Folder or File rendered alone sits at the root.
  • Open the branches the reader must see with default-open. Leave the rest collapsed so the example stays short.
  • type is only edge-function, lambda, or middleware. Regular files omit it.
  • Set href when the name is a destination. Plain files stay a non-interactive span.