chore: include guide/index code snippets

docs/.vitepress/theme/components/GuideLunchbox.md

@@ -0,0 +1,16 @@
+```ts
+// Example Vite setup
+import { createApp } from 'vue'
+import { createApp as createLunchboxApp } from 'lunchboxjs'
+import App from './App.vue'
+import LunchboxApp from './LunchboxApp.vue'
+
+// html app
+const app = createApp(App)
+app.mount('#app')
+
+// lunchbox app
+const lunchboxApp = createLunchboxApp(LunchboxApp)
+// assuming there's an element with ID `lunchbox` in your HTML app
+lunchboxApp.mount('#lunchbox')
+```

docs/.vitepress/theme/components/GuideVite.md

@@ -0,0 +1,12 @@
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+})
+```

docs/components.d.ts

@@ -22,6 +22,8 @@ declare module 'vue' {
     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']
+    GuideLunchbox: typeof import('./.vitepress/theme/components/GuideLunchbox.md')['default']
+    GuideVite: typeof import('./.vitepress/theme/components/GuideVite.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/guide/index.md

@@ -18,18 +18,7 @@ TresJS ist in Typescript geschrieben und vollständig typisiert. Installiere die
 
 Wenn du Vite verwendest, solltest du Folgendes zu deiner `vite.config.ts` hinzufügen:
 
-```ts
-import { templateCompilerOptions } from '@tresjs/core'
-
-export default defineConfig({
-  plugins: [
-    vue({
-      // Other config
-      ...templateCompilerOptions
-    }),
-  ],
-})
-```
+<GuideVite />
 
 Das ist notwendig, damit der Templatecompiler mit dem benutzerdefinierten Renderer funktioniert und keine Warnungen in der Konsole ausgibt. Für weitere Informationen siehe [hier](/de/guide/troubleshooting.html).
 
@@ -66,21 +55,6 @@ Auf der Suche nach etwas Ähnlichem im VueJS-Ökosystem fand ich eine erstaunlic
 
 Das einzige Problem ist, dass die Kombination von Compilern und Renderern in Vue3-Templates etwas ist, an dem die Vue-Community noch arbeitet. Mehr Informationen dazu findest du [hier](https://github.com/vuejs/vue-loader/pull/1645).
 
-```ts
-// Example Vite setup
-import { createApp } from 'vue'
-import { createApp as createLunchboxApp } from 'lunchboxjs'
-import App from './App.vue'
-import LunchboxApp from './LunchboxApp.vue'
-
-// html app
-const app = createApp(App)
-app.mount('#app')
-
-// lunchbox app
-const lunchboxApp = createLunchboxApp(LunchboxApp)
-// assuming there's an element with ID `lunchbox` in your HTML app
-lunchboxApp.mount('#lunchbox')
-```
+<GuideLunchbox />
 
 Von diesen beiden Bibliotheken inspiriert, entschied ich mich dazu einen eigenen Vue-Renderer für Three.js zu erstellen. Das ist **TresJS v2**.

docs/es/guide/index.md

@@ -18,18 +18,7 @@ TresJS está escrito en Typescript y está completamente tipado. Si estás utili
 
 Si estás utilizando Vite, debes agregar lo siguiente a tu `vite.config.ts`:
 
-```ts
-import { templateCompilerOptions } from '@tresjs/core'
-
-export default defineConfig({
-  plugins: [
-    vue({
-      // Other config
-      ...templateCompilerOptions
-    }),
-  ],
-}),
-```
+<GuideVite />
 
 Esto es necesario para que el compilador de plantillas funcione con el renderizador personalizado y no lance advertencias en la consola. Para obtener más información, consulta [aquí](/guide/troubleshooting.html).
 
@@ -65,22 +54,7 @@ En mi búsqueda de algo similar en el ecosistema de VueJS, encontré esta incre
 
 El único problema es que mezclar compiladores y renderizadores en Vue 3 es algo en lo que la comunidad de Vue todavía está trabajando. Puedes ver más información [aquí](https://github.com/vuejs/vue-loader/pull/1645).
 
-```ts
-// Example Vite setup
-import { createApp } from 'vue'
-import { createApp as createLunchboxApp } from 'lunchboxjs'
-import App from './App.vue'
-import LunchboxApp from './LunchboxApp.vue'
-
-// html app
-const app = createApp(App)
-app.mount('#app')
-
-// lunchbox app
-const lunchboxApp = createLunchboxApp(LunchboxApp)
-// assuming there's an element with ID `lunchbox` in your HTML app
-lunchboxApp.mount('#lunchbox')
-```
+<GuideLunchbox />
 
 Así que me inspiré en ambas bibliotecas para crear un renderizador personalizado de Vue para ThreeJS. Eso es **TresJS v2**.
 

docs/guide/index.md

@@ -18,18 +18,7 @@ TresJS is written in Typescript and it's fully typed. If you are using Typescrip
 
 If you are using Vite, you have add the following to your `vite.config.ts`:
 
-```ts
-import { templateCompilerOptions } from '@tresjs/core'
-
-export default defineConfig({
-  plugins: [
-    vue({
-      // Other config
-      ...templateCompilerOptions
-    }),
-  ],
-}),
-```
+<GuideVite />
 
 This is required to make the template compiler work with the custom renderer and not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
 
@@ -65,22 +54,7 @@ In my search for something similar in the VueJS ecosystem, I found this amazing
 
 The only problem is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
 
-```ts
-// Example Vite setup
-import { createApp } from 'vue'
-import { createApp as createLunchboxApp } from 'lunchboxjs'
-import App from './App.vue'
-import LunchboxApp from './LunchboxApp.vue'
-
-// html app
-const app = createApp(App)
-app.mount('#app')
-
-// lunchbox app
-const lunchboxApp = createLunchboxApp(LunchboxApp)
-// assuming there's an element with ID `lunchbox` in your HTML app
-lunchboxApp.mount('#lunchbox')
-```
+<GuideLunchbox />
 
 So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**.