docs(VTreeview): dedicated example for item-registration

Author: J-Sek

packages/docs/src/examples/v-treeview/prop-items-registration.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-sheet class="overflow-y-auto" max-height="300">
+    <v-treeview
+      :items="items"
+      items-registration="props"
+      open-on-click
+    ></v-treeview>
+  </v-sheet>
+</template>
+
+<script setup>
+  const items = Array.from({ length: 5 })
+    .map((_, i) => ({
+      id: i,
+      title: `Example item #${i} with 200 children`,
+      children: Array.from({ length: 200 })
+        .map((_, ci) => ({
+          id: `${i}-${ci}`,
+          title: `Example child item #${i}-${ci}`,
+        })),
+    }))
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      items: Array.from({ length: 100 })
+        .map((_, i) => ({
+          id: i,
+          title: `Example item ${i}`,
+          children: Array.from({ length: 100 })
+            .map((_, ci) => ({
+              id: `${i}-${ci}`,
+              title: `Example child item ${ci}`,
+            })),
+        })),
+    }),
+  }
+</script>

packages/docs/src/pages/en/components/treeview.md

@@ -68,12 +68,18 @@ You can control the text and background color of the active treeview node.
 
 <ExamplesExample file="v-treeview/prop-color" />
 
-#### Dense mode
+#### Density
 
 Dense mode provides more compact layout with decreased heights of the items.
 
 <ExamplesExample file="v-treeview/prop-dense" />
 
+#### Items registration
+
+When working with large trees it is recommended to include `items-registration="props"` to ensure faster loading and interactions.
+
+<ExamplesExample file="v-treeview/prop-items-registration" />
+
 <!-- #### Hoverable
 
 Treeview nodes can have a hover effect.