chore: move code snippets to md components

docs/.vitepress/theme/components/DirectiveVAlwaysLookAtExampleCode.md

@@ -0,0 +1,29 @@
+```vue{4,6,20,23}
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+// here we update the position of the sphere and the camera will always follow the object
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
+  }
+})
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]"
+        v-always-look-at="sphereRef"
+      />
+      <Sphere
+        ref="sphereRef"
+        :scale="0.5"
+      />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVAlwaysLookAtUsageCode.md

@@ -0,0 +1,14 @@
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <Box
+        v-always-look-at="new Vector3(0, 0, 0)"
+      />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVDistanceToCode.md

@@ -0,0 +1,22 @@
+```vue{2,8,13}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphere1Ref"
+      :position="[-2, slider, 0]"
+      :scale="0.5"
+    />
+    <Sphere
+      v-distance-to="sphere1Ref"
+      :position="[2, 0, 0]"
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLightHelperUsageCode.md

@@ -0,0 +1,22 @@
+```vue{2,8,11,14,17}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresDirectionalLight
+      v-light-helper
+    />
+    <TresPointLight
+      v-light-helper
+    />
+    <TresSpotLight
+      v-light-helper
+    />
+    <TresHemisphereLight
+      v-light-helper
+    />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLogCode.md

@@ -0,0 +1,22 @@
+```vue
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+
+const sphereRef = shallowRef()
+
+watch(sphereRef, (value) => {
+  console.log(value) // Really for a log?!!! 😫
+})
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLogUsageCode.md

@@ -0,0 +1,17 @@
+```vue{2,10,12}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- will print just the material 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+

docs/.vitepress/theme/components/GuideInstall.md

@@ -0,0 +1,15 @@
+::: code-group
+
+```bash [npm]
+npm install @tresjs/core three 
+```
+
+```bash [yarn]
+yarn add @tresjs/core three 
+```
+
+```bash [pnpm]
+pnpm add @tresjs/core three 
+```
+
+:::

docs/.vitepress/theme/components/GuideInstallTypescript.md

@@ -0,0 +1,15 @@
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::

docs/components.d.ts

@@ -7,11 +7,21 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    DirectiveVAlwaysLookAtExampleCode: typeof import('./.vitepress/theme/components/DirectiveVAlwaysLookAtExampleCode.md')['default']
+    DirectiveVAlwaysLookAtUsageCode: typeof import('./.vitepress/theme/components/DirectiveVAlwaysLookAtUsageCode.md')['default']
+    DirectiveVDistanceToCode: typeof import('./.vitepress/theme/components/DirectiveVDistanceToCode.md')['default']
+    DirectiveVDistinceToCode: typeof import('./.vitepress/theme/components/DirectiveVDistinceToCode.md')['default']
+    DirectiveVLightHelperUsageCode: typeof import('./.vitepress/theme/components/DirectiveVLightHelperUsageCode.md')['default']
+    DirectiveVLogCode: typeof import('./.vitepress/theme/components/DirectiveVLogCode.md')['default']
+    DirectiveVLogUsageCode: typeof import('./.vitepress/theme/components/DirectiveVLogUsageCode.md')['default']
     DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
     EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
     ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']
     FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default']
     FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default']
+    GudeInstallTS: typeof import('./.vitepress/theme/components/GudeInstallTS.md')['default']
+    GuideInstall: typeof import('./.vitepress/theme/components/GuideInstall.md')['default']
+    GuideInstallTypescript: typeof import('./.vitepress/theme/components/GuideInstallTypescript.md')['default']
     HomeSponsors: typeof import('./.vitepress/theme/components/HomeSponsors.vue')['default']
     LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']

docs/de/directives/v-always-look-at.md

@@ -4,20 +4,7 @@ Mit der neuen Direktive `v-always-look-at`, die von **TresJS** bereitgestellt wi
 
 ## Benutzung
 
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtUsageCode />
 
 Egal, wohin sich die Box bewegt, sie wird immer auf die Position [0,0,0] ausgerichtet sein.
 
@@ -32,32 +19,4 @@ Ein weiterer Vorteil ist, dass du mit der Kamera auch nicht-stationäre Objekte
 
 Zum Beispiel:
 
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// Die Position der Kugel wird verändert, aber die Kamera folgt ihr.
-onLoop(({ elapsed }) => {
-  if (sphereRef.value) {
-    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
-  }
-})
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]"
-        v-always-look-at="sphereRef"
-      />
-      <Sphere
-        ref="sphereRef"
-        :scale="0.5"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtExampleCode />

docs/de/directives/v-distance-to.md

@@ -6,31 +6,10 @@ Mit der neuen Direktive `v-distance-to` ist es einfacher als je zuvor. Du musst
 
 Zusätzlich wird ein Pfeil zwischen den beiden Objekten erstellt.
 
-```vue{2,8,13}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphere1Ref"
-      :position="[-2, slider, 0]"
-      :scale="0.5"
-    />
-    <Sphere
-      v-distance-to="sphere1Ref"
-      :position="[2, 0, 0]"
-      :scale="0.5"
-    />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVDistanceToCode />
 
 Die Verwendung von `v-distance-to` ist reaktiv, sodass sie perfekt mit `@tres/leches` 🍰 funktioniert.
 
 ::: warning
 `v-distance-to` wird kein bewegtes Objekt innerhalb des RenderLoops messen.
-:::
+:::

docs/de/directives/v-light-helper.md

@@ -10,25 +10,4 @@ Die folgenden Lichter werden unterstützt:
 
 ## Usage
 
-```vue{2,8,11,14,17}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresDirectionalLight
-      v-light-helper
-    />
-    <TresPointLight
-      v-light-helper
-    />
-    <TresSpotLight
-      v-light-helper
-    />
-    <TresHemisphereLight
-      v-light-helper
-    />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLightHelperUsageCode />

docs/de/directives/v-log.md

@@ -4,28 +4,7 @@
 
 Wenn du deine Instanz loggen möchtest, musst du normalerweise die Template-Referenz verwenden und diese dann loggen:
 
-```vue
-<script setup lang="ts">
-import { shallowRef, watch } from 'vue'
-
-const sphereRef = shallowRef()
-
-watch(sphereRef, (value) => {
-  console.log(value) // Echt jetzt?!!! 😫
-})
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-    />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogCode />
 
 Das ist VIEL Code nur für ein einfaches Log, oder?
 
@@ -33,21 +12,6 @@ Das ist VIEL Code nur für ein einfaches Log, oder?
 
 Mit der neuen Direktive v-log, die von **TresJS** bereitgestellt wird, kannst du das gleiche tun, indem du einfach `v-log` zur Instanz hinzufügst.
 
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- wird nur das Material loggen 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogUsageCode />
 
 Du kannst auch einen Modifikator mit dem Namen einer Eigenschaft übergeben. Zum Beispiel `v-log:material`, damit direkt die `material` Eigenschaft gelogged wird 😍.

docs/de/guide/index.md

@@ -6,41 +6,13 @@
     </div>
 </ClientOnly>
 
-::: code-group
-
-```bash [npm]
-npm install @tresjs/core three
-```
-
-```bash [yarn]
-yarn add @tresjs/core three
-```
-
-```bash [pnpm]
-pnpm add @tresjs/core three
-```
-
-:::
+<GuideInstall />
 
 ## Typescript
 
 TresJS ist in Typescript geschrieben und vollständig typisiert. Installiere die Typdeklarationen für Three um alle Vorteile von Typescript zu genießen.
 
-::: code-group
-
-```bash [npm]
-npm install @types/three -D
-```
-
-```bash [yarn]
-yarn add @types/three -D
-```
-
-```bash [pnpm]
-pnpm add @types/three -D
-```
-
-:::
+<GuideInstallTypescript />
 
 ## Vite
 

docs/directives/v-always-look-at.md

@@ -1,23 +1,11 @@
 # v-always-look-at 👀
 
-With the new directive v-always-look-at provided by **TresJS**, you can add easily command an [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) to always look at a specific position, this could be passed as a Vector3 or an Array.
+With the new directive `v-always-look-at` provided by **TresJS**, you can add easily command an [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) to always look at a specific position, this could be passed as a Vector3 or an Array.
 
 ## Usage
 
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtUsageCode />
+
 No matter where the Box move will always look-at the position [0,0,0]
 
 ### Why not use the in built method look-at?
@@ -30,32 +18,4 @@ The answers is that with the method `:look-at` you will indicated to look at tha
 
 Another advantage is that you can look at an instance in movement, for example with the camera, like so:
 
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// here we update the position of the sphere and the camera will always follow the object
-onLoop(({ elapsed }) => {
-  if (sphereRef.value) {
-    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
-  }
-})
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]"
-        v-always-look-at="sphereRef"
-      />
-      <Sphere
-        ref="sphereRef"
-        :scale="0.5"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtExampleCode />

docs/directives/v-distance-to.md

@@ -6,28 +6,7 @@ With the new directive `v-distance-to` it's easier than ever, you should only in
 
 In addition, an arrow will be created to indicate which objects you're measuring.
 
-```vue{2,8,13}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphere1Ref"
-      :position="[-2, slider, 0]"
-      :scale="0.5"
-    />
-    <Sphere
-      v-distance-to="sphere1Ref"
-      :position="[2, 0, 0]"
-      :scale="0.5"
-    />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVDistanceToCode />
 
 The use of `v-distance-to` is reactive, so it works perfectly with @tres/leches 🍰.
 

docs/directives/v-light-helper.md

@@ -10,25 +10,4 @@ The following lights are supported:
 
 ## Usage
 
-```vue{2,8,11,14,17}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresDirectionalLight
-      v-light-helper
-    />
-    <TresPointLight
-      v-light-helper
-    />
-    <TresSpotLight
-      v-light-helper
-    />
-    <TresHemisphereLight
-      v-light-helper
-    />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLightHelperUsageCode />

docs/directives/v-log.md

@@ -4,28 +4,7 @@
 
 When you have to log your instance you have to use the template reference and then log them:
 
-```vue
-<script setup lang="ts">
-import { shallowRef, watch } from 'vue'
-
-const sphereRef = shallowRef()
-
-watch(sphereRef, (value) => {
-  console.log(value) // Really for a log?!!! 😫
-})
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-    />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogCode />
 
 And is A LOT of code just for a simple log right?
 
@@ -33,21 +12,6 @@ And is A LOT of code just for a simple log right?
 
 With the new directive v-log provided by **TresJS**, you can do this by just adding `v-log` to the instance.
 
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- will print just the material 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogUsageCode />
 
 Note that you can pass a modifier with the name of a property, for example `v-log:material`, and will log directly the `material` property 😍

docs/es/directives/v-always-look-at.md

@@ -1,23 +1,11 @@
 # v-always-look-at 👀
 
-Con la nueva directiva v-always-look-at proporcionada por **TresJS**, puedes agregar fácilmente un comando [Object3D](https://tresjs.org/docs/index.html?q=object#api/en /core/Object3D) para mirar siempre una posición específica, esto podría pasarse como Vector3 o Array.
+Con la nueva directiva `v-always-look-at` proporcionada por **TresJS**, puedes agregar fácilmente un comando [Object3D](https://tresjs.org/docs/index.html?q=object#api/en /core/Object3D) para mirar siempre una posición específica, esto podría pasarse como Vector3 o Array.
 
 ## Uso
 
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtUsageCode />
+
 No importa dónde se mueva la caja, siempre se observará la posición [0,0,0]
 
 ### ¿Por qué no utilizar el método integrado de revisión?
@@ -30,32 +18,4 @@ La respuesta es que con el método `:look-at` se te indicará mirar esa posició
 
 Otra ventaja es que puedes observar una instancia en movimiento, por ejemplo con la cámara, así:
 
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// here we update the position of the sphere and the camera will always follow the object
-onLoop(({ elapsed }) => {
-  if (sphereRef.value) {
-    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
-  }
-})
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]"
-        v-always-look-at="sphereRef"
-      />
-      <Sphere
-        ref="sphereRef"
-        :scale="0.5"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtExampleCode />

docs/es/directives/v-distance-to.md

@@ -6,28 +6,7 @@ Con la nueva directiva `v-distance-to` es más fácil que nunca, solo debes indi
 
 Además, se creará una flecha para indicar qué objetos estás midiendo.
 
-```vue{2,8,13}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphere1Ref"
-      :position="[-2, slider, 0]"
-      :scale="0.5"
-    />
-    <Sphere
-      v-distance-to="sphere1Ref"
-      :position="[2, 0, 0]"
-      :scale="0.5"
-    />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVDistanceToCode />
 
 El uso de `v-distance-to` es reactivo, por lo que funciona perfectamente con @tres/leches 🍰.
 

docs/es/directives/v-light-helper.md

@@ -10,25 +10,4 @@ Se admiten las siguientes luces:
 
 ## Uso
 
-```vue{2,8,11,14,17}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresDirectionalLight
-      v-light-helper
-    />
-    <TresPointLight
-      v-light-helper
-    />
-    <TresSpotLight
-      v-light-helper
-    />
-    <TresHemisphereLight
-      v-light-helper
-    />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLightHelperUsageCode />

docs/es/directives/v-log.md

@@ -4,28 +4,7 @@
 
 Cuando tenga que registrar su instancia, debe usar la referencia de la plantilla y luego registrarla:
 
-```vue
-<script setup lang="ts">
-import { shallowRef, watch } from 'vue'
-
-const sphereRef = shallowRef()
-
-watch(sphereRef, (value) => {
-  console.log(value) // Really for a log?!!! 😫
-})
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-    />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogCode />
 
 ¿Y hay MUCHO código solo para un simple registro, verdad?
 
@@ -33,21 +12,6 @@ watch(sphereRef, (value) => {
 
 Con la nueva directiva v-log proporcionada por **TresJS**, puedes hacer esto simplemente agregando `v-log` a la instancia.
 
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- will print just the material 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogUsageCode />
 
 Tenga en cuenta que puede pasar un modificador con el nombre de una propiedad, por ejemplo `v-log:material`, y registrará directamente la propiedad `material` 😍

docs/es/guide/index.md

@@ -6,41 +6,13 @@
     </div>
 </ClientOnly>
 
-::: code-group
-
-```bash [npm]
-npm install @tresjs/core three 
-```
-
-```bash [yarn]
-yarn add @tresjs/core three 
-```
-
-```bash [pnpm]
-pnpm add @tresjs/core three 
-```
-
-:::
+<GuideInstall />
 
 ## Typescript
 
 TresJS está escrito en Typescript y está completamente tipado. Si estás utilizando Typescript, obtendrás todos los beneficios de los tipos. Solo asegúrate de instalar los tipos para three.
 
-::: code-group
-
-```bash [npm]
-npm install @types/three -D
-```
-
-```bash [yarn]
-yarn add @types/three -D
-```
-
-```bash [pnpm]
-pnpm add @types/three -D
-```
-
-:::
+<GuideInstallTypescript />
 
 ## Vite
 

docs/guide/index.md

@@ -6,41 +6,13 @@
     </div>
 </ClientOnly>
 
-::: code-group
-
-```bash [npm]
-npm install @tresjs/core three 
-```
-
-```bash [yarn]
-yarn add @tresjs/core three 
-```
-
-```bash [pnpm]
-pnpm add @tresjs/core three 
-```
-
-:::
+<GuideInstall />
 
 ## Typescript
 
 TresJS is written in Typescript and it's fully typed. If you are using Typescript, you will get the full benefit of the typings. Just make sure you install the types for three.
 
-::: code-group
-
-```bash [npm]
-npm install @types/three -D
-```
-
-```bash [yarn]
-yarn add @types/three -D
-```
-
-```bash [pnpm]
-pnpm add @types/three -D
-```
-
-:::
+<GuideInstallTypescript />
 
 ## Vite