docs: translated guides to spanish

docs/es/guide/getting-started.md

@@ -1,6 +1,6 @@
-# Installation
+# Instalación
 
-Learn how to install TresJS
+Aprende cómo instalar TresJS
 
 ::: code-group
 
@@ -18,11 +18,11 @@ yarn add three @tresjs/core
 
 :::
 
-> Better use with Vue 3.x and composition API
+> Mejor usar con Vue 3.x y Composition API
 
 ## 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.
+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
 
@@ -40,15 +40,14 @@ pnpm add @types/three -D
 
 :::
 
-## Getting started
+## Empezando
 
-You can install TresJS as any other Vue plugin
+Puedes instalar TresJS como cualquier otro complemento de Vue
 
 ```ts
 import { createApp } from 'vue'
-import App from './App.vue'
-
 import Tres from '@tresjs/core'
+import App from './App.vue'
 
 export const app = createApp(App)
 
@@ -56,12 +55,13 @@ app.use(Tres)
 app.mount('#app')
 ```
 
-Or you can use it directly in your component
+O puedes usarlo directamente en tu componente
 
 ```vue
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 </script>
+
 <template>
   <TresCanvas>
     <!-- Your scene here -->
@@ -70,23 +70,24 @@ import { TresCanvas } from '@tresjs/core'
 ```
 
 ::: tip
-This is recommended for performance and bundle size reasons, tree-shaking will work better and you will only import the components that you use.
+Esto es recomendado por razones de rendimiento y tamaño del paquete, el tree-shaking funcionará mejor y solo importarás los componentes que uses.
 :::
 
 ## Vite
 
-Since v2 is a custom renderer, we need to let the `vue-compiler` of your app know that the components of Tres are ok to be included to avoid the `[Vue warn]: Failed to resolve component` warning.
+Dado que la versión 2 es un renderizador personalizado, necesitamos informar al `vue-compiler` de tu aplicación que los componentes de Tres están permitidos para ser incluidos y evitar la advertencia `[Vue warn]: Failed to resolve component`.
 
-You just need to add this to your `vite.config.ts` inside of the vue plugin:
+Solo necesitas agregar esto a tu archivo `vite.config.ts` dentro del plugin de Vue:
 
 ```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
 export default defineConfig({
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  }),
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ]
 })
 ```

docs/es/guide/index.md

@@ -1,4 +1,4 @@
-# Introduction
+# Introduccion
 
 <ClientOnly>
     <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
@@ -24,7 +24,7 @@ pnpm add @tresjs/core three
 
 ## 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.
+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
 
@@ -44,7 +44,7 @@ pnpm add @types/three -D
 
 ## Vite
 
-If you are using Vite, you have add the following to your `vite.config.ts`:
+Si estás utilizando Vite, debes agregar lo siguiente a tu `vite.config.ts`:
 
 ```ts
 import { templateCompilerOptions } from '@tresjs/core'
@@ -59,19 +59,19 @@ export default defineConfig({
 }),
 ```
 
-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).
+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).
 
-## Try it online
+## Pruébalo en línea
 
 ### Sandbox
 
-You can try TresJS online using the official [sandbox](https://play.tresjs.org/). Check it out:
+Puedes probar TresJS en línea utilizando el [sandbox](https://play.tresjs.org/) oficial. ¡Échale un vistazo:
 
 <iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
 
 ### StackBlitz
 
-We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS online. Check it out:
+Tenemos un nuevo inicio de [StackBlitz](https://stackblitz.com/) para probar TresJS en línea. ¡Échale un vistazo:
 
 ![](/stackblitz-starter.png)
 
@@ -79,19 +79,19 @@ We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS
 
 ## Playground
 
-We also have a playground where you can try TresJS online. Check it out [here](https://playground.tresjs.org/).
+También tenemos un playground donde puedes probar TresJS en línea. Échale un vistazo [aquí](https://playground.tresjs.org/).
 
 ![](/playground.png)
 
-## Motivation
+## Motivación
 
-[ThreeJS](https://threejs.org/) is a wonderful library to create awesome **WebGL** 3D websites. Is also a constantly updated library that makes hard for wrapper maintainers like [TroisJS](https://troisjs.github.io/) to keep up with all the enhancements.
+[ThreeJS](https://threejs.org/) es una maravillosa biblioteca para crear increíbles sitios web 3D con WebGL. También es una biblioteca constantemente actualizada que dificulta a los mantenedores de envoltorios como [TroisJS](https://troisjs.github.io/) mantenerse al día con todas las mejoras.
 
-React ecosystem has an impresive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state.
+El ecosistema de React tiene una solución impresionante de **renderizado personalizado** llamada [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) que te permite construir tus escenas de forma declarativa con componentes reutilizables y autocontenidos que reaccionan al estado.
 
-In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) which works with the same concept that R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
+En mi búsqueda de algo similar en el ecosistema de VueJS, encontré esta increíble biblioteca llamada [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) que funciona con el mismo concepto que R3F, proporciona un [renderizador personalizado de Vue3](https://vuejs.org/api/custom-renderer.html). También estoy contribuyendo para mejorar esta biblioteca y que sea tan madura y rica en características como R3F.
 
-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.
+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
@@ -110,5 +110,5 @@ const lunchboxApp = createLunchboxApp(LunchboxApp)
 lunchboxApp.mount('#lunchbox')
 ```
 
-So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**.
+Así que me inspiré en ambas bibliotecas para crear un renderizador personalizado de Vue para ThreeJS. Eso es **TresJS v2**.
 

docs/es/guide/migration-guide.md

@@ -1,6 +1,6 @@
-# Migration Guide
+# Guía de Migración
 
-This guide is intended to help you migrate from v1 to the newest versions of TresJS 🤩✨.
+Esta guía tiene como objetivo ayudarte a migrar de la versión 1 a las versiones más recientes de TresJS 🤩✨.
 
 ::: code-group
 
@@ -18,23 +18,23 @@ yarn upgrade @tresjs/core
 
 :::
 
-## What's new?
+## Novedades
 
 ### Vue Custom Renderer
 
-**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
+**TresJS** es ahora un [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 que se encuentra dentro de un componente envolvente `TresCanvas` que se encarga de crear el `WebGLRenderer` y la `Scene` por ti, y crear una **nueva instancia de la aplicación Vue** para renderizar la escena.
 
-### Typescript support and Intellisense 🦾
+### Soporte de TypeScript e Intellisense 🦾
 
 ![TresJS Intellisense](/v2-intellisense.gif)
 
-This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
+Esta fue probablemente la característica más **solicitada para TresJS**. Ahora los componentes de Tres funcionan con Volar y proporcionan intellisense de tipos.
 
-**TresJS** now generates type declaration on build time for all the components based of the catalog from ThreeJS. This means that you can use all the components from ThreeJS and get type intellisense for them.
+**TresJS** ahora genera declaraciones de tipos en tiempo de compilación para todos los componentes basados en el catálogo de ThreeJS. Esto significa que puedes usar todos los componentes de ThreeJS y obtener intellisense de tipos para ellos.
 
-### Tres Plugin is optional 👍
+### El plugin de Tres es opcional 👍
 
-The `TresPlugin` is now optional. You can use TresJS without it by importing the components directly from `tresjs/core`:
+El `TresPlugin` ahora es opcional. Puedes usar TresJS sin él importando los componentes directamente desde `tresjs/core`:
 
 ```vue
 <script setup lang="ts">
@@ -50,16 +50,19 @@ import { TresCanvas } from '@tresjs/core'
       :near="cameraNear"
       :far="cameraFar"
     />
-    <TresMesh :geometry="geometry" :material="material" />
+    <TresMesh
+      :geometry="geometry"
+      :material="material"
+    />
   </TresCanvas>
 </template>
 ```
 
 ::: info
-This is recommended for performance and bundle size reasons, tree-shaking will work better and you will only import the components that you use.
+Esto es recomendado por razones de rendimiento y tamaño del paquete, el tree-shaking funcionará mejor y solo importarás los componentes que uses.
 :::
 
-### TresScene no longer needed
+### TresScene ya no es necesario
 
 The `<TresScene />` component is now deprecated since the scene is now created by the `<TresCanvas />`.
 
@@ -77,23 +80,25 @@ You can now create a scene like this:
       :near="cameraNear"
       :far="cameraFar"
     />
-    <TresMesh :geometry="geometry" :material="material" />
+    <TresMesh
+      :geometry="geometry"
+      :material="material"
+    />
   </TresCanvas>
 </template>
 ```
 
-To migrate your code, you can just remove the `<TresScene />` component and move the children to the `<TresCanvas />` component.
+Para migrar tu código, simplemente puedes eliminar el componente `<TresScene />` y mover los hijos al componente `<TresCanvas />`.
 
-### `useCatalog` is now deprecated
+### `useCatalog` ahora está obsoleto
 
-The `useCatalog` function is now deprecated. You can now import the catalog directly from `@tresjs/core`
+La función `useCatalog` ahora está obsoleta. Ahora puedes importar el catálogo directamente desde `@tresjs/core`.
 
-You can read more about it here: [Extending](/advanced/extending.md)
+Puedes leer más al respecto aquí: [Extending](/advanced/extending.md)
 
-Change this:
+Cambia esto:
 
 ```ts {2,5,7}
-// Wrong ❌
 import { useCatalog } from '@tresjs/core'
 import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
@@ -102,25 +107,24 @@ const { extend } = useCatalog()
 extend({ TextGeometry })
 ```
 
-To this:
+Por esto:
 
 ```ts {2,6}
-// Correct ✅
+// Correcto ✅
 import { extend } from '@tresjs/core'
 import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
-// Add the element to the catalogue
 extend({ TextGeometry })
 ```
 
-### Model's ref value `getModel` is now deprecated
+### El valor de referencia del modelo `getModel` ahora está obsoleto
 
-The `getModel` function is now deprecated. You can now use the `model` property directly.
+La función `getModel` ahora está obsoleta. Ahora puedes usar directamente la propiedad `model`.
 
-Change this:
+Cambia esto:
 
 ```vue {7,9-12}
-// Wrong ❌
+// Incorrecto ❌
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 
@@ -133,6 +137,7 @@ watch(modelRef, ({ getModel }) => {
   model.position.set(0, 0, 0)
 })
 </script>
+
 <template>
   <primitive :object="nodes.MyModel" />
 </template>
@@ -141,7 +146,7 @@ watch(modelRef, ({ getModel }) => {
 To this:
 
 ```vue {7,9-12}
-// Correct ✅
+// Correcto ✅
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 
@@ -149,24 +154,25 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 const modelRef = ref()
 
-watch(modelRef, model => {
+watch(modelRef, (model) => {
   // Do something with the model
   model.position.set(0, 0, 0)
 })
 </script>
+
 <template>
   <primitive :object="nodes.MyModel" />
 </template>
 ```
 
-### Cameras need to be before any control 🎥
+### Las cámaras deben estar antes de cualquier control 🎥
 
-The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work.
+El componente `TresOrbitControls` debe estar después de la cámara en el árbol. Esto se debe a que los controles necesitan conocer la cámara para funcionar.
 
-Change this:
+Cambia esto:
 
 ```vue {3,5}
-// Wrong ❌
+// Incorrecto ❌
 <template>
   <TresCanvas>
     <TresOrbitControls />
@@ -175,10 +181,10 @@ Change this:
 </template>
 ```
 
-To this:
+Por esto:
 
 ```vue {3,5}
-// Correct ✅
+// Correcto ✅
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
@@ -187,18 +193,18 @@ To this:
 </template>
 ```
 
-## UseTres is now useTresContext <Badge type="warning" text="^3.0.0" />
+## UseTres ahora es useTresContext <Badge type="warning" text="^3.0.0" />
 
-For v3 we reworked the whole state logic to make it more flexible and easier to use for plugin authors and ecosystem packages. Instead of using a store like in v2, we now use a context provider based on `provide/inject`.
+Para la versión 3, reestructuramos toda la lógica de estado para que sea más flexible y fácil de usar para los autores de complementos y paquetes del ecosistema. En lugar de usar una tienda como en la versión 2, ahora usamos un proveedor de contexto basado en `provide/inject`.
 
-The `useTres` function is now an alias of the `useTresContext` function to avoid breaking demos and experiments out there, but consider using `useTresContext` from now on. 
+La función `useTres` ahora es un alias de la función `useTresContext` para evitar romper demos y experimentos existentes, pero considera usar `useTresContext` a partir de ahora.
 
-Instead of a big reactive object, you will now get the `scene` and `renderer` refs, between other properties, directly.
+En lugar de obtener un objeto reactivo grande, ahora obtendrás directamente las referencias `scene` y `renderer`, entre otras propiedades.
 
-Change this:
+Cambia esto:
 
 ```ts {2}
-// Wrong ❌
+// Incorrecto ❌
 import { useTres } from '@tresjs/core'
 
 const { state, setState } = useTres()
@@ -206,10 +212,10 @@ const { state, setState } = useTres()
 console.log(state.scene)
 ```
 
-To this:
+Por esto:
 
 ```ts {2}
-// Correct ✅
+// Correcto ✅
 import { useTresContext } from '@tresjs/core'
 
 const { scene, renderer } = useTresContext()
@@ -217,4 +223,4 @@ const { scene, renderer } = useTresContext()
 console.log(scene.value)
 ```
 
-For more detailed information about the new context provider system, you can read the [API DOCS](/api/composables.md) section.
+Para obtener información más detallada sobre el nuevo sistema de proveedor de contexto, puedes leer la sección [API DOCS](/api/composables.md).

docs/es/guide/nuxt.md

@@ -4,11 +4,11 @@
 
 <a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
 
-A official Nuxt module for TresJS is here 🎉. 
+¡Aquí está el módulo oficial de Nuxt para TresJS! 🎉.
 
-Repository is [here](https://github.com/Tresjs/nuxt)
+El repositorio está [aquí](https://github.com/Tresjs/nuxt)
 
-## Installation
+## Instalación
 
 ::: code-group
 
@@ -26,26 +26,26 @@ yarn add three @tresjs/nuxt
 
 :::
 
-## Features
+## Características
 
-- 🤓 Auto-import components and composables from the [TresJS ecosystem](https://github.com/orgs/Tresjs/repositories)
-- `TresCanvas` client only, you don't need to add `.client` to the component name or `<ClientOnly />`
-- Automatically configures vue compiler to support TresJS components, see [why](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
-- All the DX Magic that comes with Nuxt ✨
+- 🤓 Importación automática de componentes y composables del [ecosistema de TresJS](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` esta disponible solo en el cliente, no es necesario agregar `.client` al nombre del componente o `<ClientOnly />`
+- Configura automáticamente el compilador de Vue para admitir componentes de TresJS, consulta [por qué](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- Toda la magia de DX que viene con Nuxt ✨
 
-## Usage
+## Uso
 
- Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
+Agrega `@tresjs/nuxt` a la sección `modules` de `nuxt.config.ts`
 
 ```js
 export default defineNuxtConfig({
-  modules: ["@tresjs/nuxt"],
-});
+  modules: ['@tresjs/nuxt'],
+})
 ```
 
-That's it! You can now use `@tresjs/nuxt` in your Nuxt app ✨
+¡Eso es todo! Ahora puedes usar `@tresjs/nuxt` en tu aplicación Nuxt ✨
 
-If you want to use the any package from the TresJS ecosystem, you can install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.
+Si deseas utilizar cualquier paquete del ecosistema de TresJS, puedes instalar los paquetes que desees utilizar y serán importados automáticamente por el módulo 🧙🏼‍♂️.
 
 | Package                     | Version                                                                                            |
 | --------------------------- | :------------------------------------------------------------------------------------------------- |
@@ -53,6 +53,6 @@ If you want to use the any package from the TresJS ecosystem, you can install th
 | [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) |
 
 ```bash
-# Using pnpm
+# Usando pnpm
 pnpm add @tresjs/cientos @tresjs/post-processing
 ```

docs/es/guide/troubleshooting.md

@@ -1,28 +1,28 @@
-# The hilarious guide of common issues and how to solve them
+# La divertida guía de problemas comunes y cómo solucionarlos
 
-![Troubleshooting](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+![Solución de problemas](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
 
-Welcome to **TresJS v2 troubleshooting guide**. Where 3D stands for _"Dazzlingly Delightful Difficulties"_! We know 3D can be as complex as a tangled ball of yarn 🧶 or as unpredictable as a cat on a keyboard 🐈 ⌨️ , but fear not!
+Bienvenido a la guía de solución de problemas de **TresJS v2**. ¡Donde 3D significa _"Dificultades Deslumbrantemente Deliciosas"_! Sabemos que el 3D puede ser tan complejo como una bola de lana enredada 🧶 o tan impredecible como un gato en un teclado 🐈 ⌨️, ¡pero no temas!
 
-This guide is intended to help you solve the most common issues that you might encounter when using TresJS v2.
+Esta guía está destinada a ayudarte a resolver los problemas más comunes que puedes encontrar al usar TresJS v2.
 
-## I can't see my 3D scene 😭!
+## ¡No puedo ver mi escena 3D 😭!
 
-You followed the [Getting started guide](/guide/getting-started.md) but you still can see your scene rendered.
+Has seguido la [guía de inicio](/guide/getting-started.md) pero aún no puedes ver tu escena renderizada.
 
-These are the most common reasons why you might not be able to see your scene:
+Estas son las razones más comunes por las que es posible que no puedas ver tu escena:
 
-### Check the height of your canvas 📏
+### Verifica la altura de tu lienzo 📏
 
-Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.
+Otro problema común es que el componente `TresCanvas` crea por defecto un elemento `canvas` que toma el `width` y `height` del elemento padre. Si el elemento padre no tiene altura, el lienzo tampoco la tendrá.
 
-![No height found](/canvas-height.png)
+![No se encontró altura](/canvas-height.png)
 
-You will also see this error in the console:
+También verás este error en la consola:
 
-![Canvas height warning](/canvas-height-warning.png)
+![Advertencia de altura del lienzo](/canvas-height-warning.png)
 
-A easy way to fix this is to set the height of the parent element to `100%`:
+Una forma sencilla de solucionar esto es establecer la altura del elemento padre en `100%`:
 
 ```css
 html,
@@ -39,7 +39,7 @@ body {
 }
 ```
 
-Or you can set the `window-size` prop of the `TresCanvas` component:
+O también puedes establecer la propiedad `window-size` del componente `TresCanvas`:
 
 ```vue
 <TresCanvas window-size>
@@ -48,17 +48,17 @@ Or you can set the `window-size` prop of the `TresCanvas` component:
 </TresCanvas>
 ```
 
-## Failed resolve component: TresComponent... 🤔
+## Error al resolver el componente: TresComponent...
 
 ![](/failed-to-resolve-component.png)
 
-Since **TresJS v2** is using a Vue Custom Renderer inside of the main Vue App instance, the core Vue renderer that acts as parent is not going to recognize the components inside of `TresCanvas` component. Even if it doesn't affect the rendering, it will show a warning in the console.
+Dado que **TresJS v2** utiliza un Renderizador Personalizado de Vue dentro de la instancia principal de la aplicación Vue, el renderizador principal de Vue que actúa como padre no reconocerá los componentes dentro del componente `TresCanvas`. Aunque no afecta la representación, mostrará una advertencia en la consola.
 
 ![](/failed-to-resolve-component.png)
 
-At this moment, there is no native Vue support to define the renderer used on the `<template />` but there is a quick workaround to remove the warnings
+En este momento, no hay soporte nativo de Vue para definir el renderizador utilizado en la etiqueta `<template />`, pero hay una solución rápida para eliminar las advertencias.
 
-Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
+Ve a tu archivo `vite.config.ts` y agrega la siguiente configuración al `@vitejs/plugin-vue`:
 
 ```ts
 import { defineConfig } from 'vite'
@@ -75,17 +75,14 @@ export default defineConfig({
 })
 ```
 
-This will remove the warning from the console.
+Esto eliminará la advertencia de la consola.
 
-# Help Us Make TresJS Purr-fect! 😼
+# ¡Ayúdanos a hacer que TresJS sea purr-fecto! 😼
 
-We know that even the best cat nappers occasionally make mistakes, and we need you help to make TresJS even better! If you find a bug, please open a ticket at [the
-repo](https://github.com/Tresjs/playground) and **please provide a reproduction link**.
+Sabemos que incluso los mejores gatos dormilones ocasionalmente cometen errores, ¡y necesitamos tu ayuda para hacer que TresJS sea aún mejor! Si encuentras un error, por favor abre un ticket en [el repositorio](https://github.com/Tresjs/playground) y **por favor proporciona un enlace de reproducción**.
 
 ::: warning
-Tickets without a reproduction link will be closed.
+Los tickets sin un enlace de reproducción serán cerrados.
 :::
 
-Our team of coding cat lovers
-will jump into action to squash those pesky bugs and improve TresJS for everyone. Together, let's make TresJS the cat's
-meow of 3D rendering in Vue!
+Nuestro equipo de amantes de los gatos programadores se pondrá en acción para eliminar esos molestos errores y mejorar TresJS para todos. ¡Juntos, hagamos que TresJS sea el maullido del renderizado 3D en Vue!

docs/guide/getting-started.md

@@ -46,9 +46,8 @@ You can install TresJS as any other Vue plugin
 
 ```ts
 import { createApp } from 'vue'
-import App from './App.vue'
-
 import Tres from '@tresjs/core'
+import App from './App.vue'
 
 export const app = createApp(App)
 
@@ -62,6 +61,7 @@ Or you can use it directly in your component
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 </script>
+
 <template>
   <TresCanvas>
     <!-- Your scene here -->
@@ -80,13 +80,14 @@ Since v2 is a custom renderer, we need to let the `vue-compiler` of your app kno
 You just need to add this to your `vite.config.ts` inside of the vue plugin:
 
 ```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
 export default defineConfig({
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  }),
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ]
 })
 ```