Montá tu Proyecto Vue 3 Moderno: Vite y TypeScript Paso a Paso

¡Che, desarrollador! ¿Andás buscando armar un proyecto frontend con las últimas herramientas y que te dé una base sólida para crecer? Si la respuesta es sí, entonces llegaste al lugar indicado. En este tutorial, vamos a meternos de lleno en la creación de una aplicación Vue 3 utilizando Vite como motor de desarrollo y compilación, y TypeScript para darle robustez y tipado a nuestro código.

1. Introducción: El Trío Dinámico para el Desarrollo Frontend

El desarrollo frontend evoluciona a un ritmo vertiginoso. Elegir las herramientas correctas desde el principio puede significar la diferencia entre un proyecto ágil y mantenible, o uno lleno de dolores de cabeza. Para los que ya laburan con Vue, o los que recién empiezan y quieren subirse a lo último, la combinación de Vue 3, Vite y TypeScript es, hoy por hoy, un estándar de oro.

¿A quién está dirigido este artículo?

Este post es para vos si:

• Sos un desarrollador frontend que quiere empezar un nuevo proyecto Vue 3 desde cero.
• Estás familiarizado con JavaScript y querés dar el salto a TypeScript.
• Ya usaste Vue 2 o Vue CLI y querés entender las ventajas de Vite y el setup moderno de Vue 3.
• Buscás una guía práctica y detallada para configurar un entorno de desarrollo eficiente.

¿Qué vas a aprender acá?

Al terminar de leer y seguir los pasos, vas a tener tu proyecto Vue 3 funcionando con Vite y TypeScript, vas a entender la estructura básica, cómo funciona la reactividad con TypeScript y cuáles son las mejores prácticas para mantener tu codebase impecable. ¡Vamos a arrancar!

2. ¿Por Qué Elegir Vue 3, Vite y TypeScript?

Antes de meternos a fondo con el código, entendamos por qué esta combinación es tan potente y por qué la vas a amar en tu día a día.

Vue 3: La Evolución de un Framework Amigable

Vue.js se ganó el corazón de muchos por su facilidad de aprendizaje y su flexibilidad. Vue 3 llevó esto un paso más allá, ofreciendo mejoras significativas:

• Composition API: Una forma más potente y flexible de organizar la lógica de tus componentes, especialmente en aplicaciones grandes. Permite encapsular y reutilizar la lógica reactiva de manera más limpia que la Options API.
• Mayor Rendimiento: Con un nuevo motor de reactividad y optimizaciones en el compilador, Vue 3 es más rápido y liviano.
• Mejor Soporte para TypeScript: Desde su diseño, Vue 3 fue pensado para trabajar de maravilla con TypeScript, ofreciendo una inferencia de tipos excelente y una experiencia de desarrollo más segura.
• Tamaño Más Pequeño: La capacidad de "tree-shaking" mejorada hace que tus builds finales sean más chicos, ya que solo se incluye el código que realmente usás.

Vite: El Compilador Frontend de Nueva Generación

Vite (pronunciado "vit", como la palabra francesa para "rápido") es un "build tool" que te cambia la forma de desarrollar frontend. A diferencia de herramientas como Webpack (que compilan todo tu código antes de servirlo), Vite aprovecha los módulos ES nativos del navegador:

• Servidor de Desarrollo Ultrarrápido: Inicia instantáneamente. Cuando modificás un archivo, solo el módulo afectado se recarga en el navegador, gracias al Hot Module Replacement (HMR) basado en ES modules, sin necesidad de recompilar todo.
• Bundling Optimizado para Producción: Aunque en desarrollo usa ES modules, para producción, Vite utiliza Rollup internamente para generar bundles optimizados y listos para desplegar.
• Configuración Mínima: Sale de la caja con una configuración sensata, lo que reduce drásticamente el tiempo de setup.

TypeScript: Sumando Robustez y Claridad a tu Código

TypeScript es un superset de JavaScript que agrega tipado estático. Esto significa que podés definir los tipos de tus variables, parámetros de funciones, y más. ¿Por qué es crucial?

• Detección Temprana de Errores: Muchos errores comunes se detectan en tiempo de compilación (antes de que tu código se ejecute), no en tiempo de ejecución. Esto ahorra muchísimo tiempo de depuración.
• Mejor Mantenibilidad: Un código tipado es más fácil de entender y mantener, especialmente en proyectos grandes con equipos de trabajo.
• Autocompletado y Refactoring Mejorados: Los IDEs (como VS Code) pueden ofrecer autocompletado inteligente, navegación de código y refactoring seguros, lo que aumenta tu productividad.
• Documentación Implícita: Los tipos actúan como una forma de documentación, dejando claro qué tipo de datos espera una función o qué estructura tiene un objeto.

Ahora que entendemos por qué esta combinación es ganadora, ¡manos a la obra!

3. Requisitos Previos

Antes de empezar, asegurate de tener instaladas las siguientes herramientas en tu máquina:

• Node.js: Se recomienda usar la versión LTS (Long Term Support). Podés descargarla desde la web oficial. Verificá tu versión ejecutando node -v en la terminal.
• Un Editor de Código: VS Code es la opción más popular y recomendada por su excelente soporte para TypeScript y Vue.js. Podés descargarlo desde aquí.
• Terminal: Cualquier terminal moderna (Git Bash, iTerm2, PowerShell, CMD) servirá.

4. Iniciando Nuestro Proyecto: create-vue

Vue ofrece una herramienta oficial, create-vue, para iniciar proyectos. Es la forma más sencilla de empezar con Vue 3, Vite y TypeScript, y nos va a guiar a través de una serie de preguntas para configurar nuestro entorno. Abrí tu terminal y ejecutá el siguiente comando:

npm create vue@latest

La herramienta te va a hacer una serie de preguntas interactivas. Te muestro las preguntas y mis respuestas recomendadas para este tutorial, junto con la salida esperada:

? Project name: » <tu-proyecto>
# Podés ponerle el nombre que quieras, por ejemplo: mi-app-vue-ts

? Add TypeScript? » Yes
# ¡Fundamental para este tutorial! Elegí 'Yes'.

? Add JSX Support? » No
# A menos que tengas razones específicas para usar JSX (como si vinieras de React), con Vue no lo necesitamos.

? Add Vue Router for Single Page Application development? » Yes
# Si planeás una SPA (Single Page Application) con varias vistas, el router es clave. Recomendado 'Yes'.

? Add Pinia for state management? » Yes
# Pinia es la solución oficial de gestión de estado para Vue 3. Es liviana e intuitiva. Recomendado 'Yes'.

? Add Vitest for Unit Testing? » Yes
# Para test unitarios, Vitest es excelente, rápido y se integra con Vite. Recomendado 'Yes'.

? Add an End-to-End Testing Solution? » No
# Las pruebas E2E (como Cypress o Playwright) son más avanzadas. Para este setup inicial, no las incluiremos. Podés agregarlas después.

? Add ESLint for code quality? » Yes
# ESLint te ayuda a mantener un código limpio y consistente, detectando errores y problemas de estilo. ¡Siempre 'Yes'!

? Add Prettier for code formatting? » Yes
# Prettier formatea tu código automáticamente para que siempre tenga un estilo uniforme. ¡Altamente recomendado 'Yes'!

# La salida final debería ser algo similar a esto:

Scaffolding project in /Users/tu-usuario/mi-app-vue-ts...

Done. You can now run:

  cd mi-app-vue-ts
  npm install
  npm run dev

Una vez que termine, la herramienta te va a dar las instrucciones para navegar a la carpeta del proyecto e instalar las dependencias. ¡Seguílas!

cd mi-app-vue-ts
npm install

npm install puede tardar un ratito, dependiendo de tu conexión y máquina, ya que descarga todas las librerías necesarias para el proyecto.

5. Estructura de Carpetas del Proyecto Base

Una vez instalado, abrí la carpeta mi-app-vue-ts con tu editor de código (por ejemplo, VS Code). Vas a ver una estructura de directorios similar a esta:

mi-app-vue-ts/
├── node_modules/             # Dependencias del proyecto
├── public/                   # Archivos estáticos (ej. favicon.ico)
├── src/                      # Código fuente de tu aplicación
│   ├── assets/               # Recursos estáticos (imágenes, CSS global)
│   ├── components/           # Componentes Vue reutilizables
│   │   └── HelloWorld.vue    # Un componente de ejemplo
│   ├── router/               # Configuración de Vue Router (index.ts)
│   │   └── index.ts
│   ├── stores/               # Módulos de Pinia para gestión de estado
│   │   └── counter.ts
│   ├── views/                # Componentes que representan páginas/vistas
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue               # Componente raíz de tu aplicación
│   ├── main.ts               # Punto de entrada de la aplicación (donde se monta Vue)
│   └── env.d.ts              # Declaraciones de tipos para variables de entorno
├── .eslintrc.cjs             # Configuración de ESLint
├── .gitignore                # Archivos y carpetas a ignorar por Git
├── index.html                # El archivo HTML principal (entry point de Vite)
├── package.json              # Metadatos del proyecto y scripts NPM
├── tsconfig.json             # Configuración de TypeScript
├── tsconfig.app.json         # Configuración de TypeScript para la aplicación
├── tsconfig.vitest.json      # Configuración de TypeScript para Vitest
├── vite.config.ts            # Configuración de Vite
└── README.md                 # Archivo README del proyecto

Archivos Clave a Entender:

• main.ts: Es el corazón de tu aplicación. Acá es donde se inicializa la instancia de Vue, se monta en el index.html y se integran plugins como Vue Router y Pinia.

  // src/main.ts
  import './assets/main.css'
  
  import { createApp } from 'vue'
  import { createPinia } from 'pinia'
  
  import App from './App.vue'
  import router from './router'
  
  const app = createApp(App)
  
  app.use(createPinia())
  app.use(router)
  
  app.mount('#app')

• App.vue: El componente raíz de tu aplicación. Generalmente contiene el <router-view> para que Vue Router inyecte los componentes de las diferentes rutas, y el <router-link> para la navegación.
• index.html: En Vite, este es tu archivo HTML principal. Notá que no hay <script type="module" src="./src/main.ts"></script> en el <body>. Vite inyecta automáticamente el script de tu main.ts cuando servís la aplicación.
• vite.config.ts: Archivo de configuración para Vite. Acá podés ajustar plugins, alias, y otras opciones de compilación.
• tsconfig.json: Configuración global de TypeScript para tu proyecto. Define cómo TypeScript debe compilar tu código.

6. Corriendo y Entendiendo el Proyecto

¡Es hora de ver nuestra aplicación en acción! En la terminal, dentro de la carpeta de tu proyecto, ejecutá:

npm run dev

Vas a ver una salida similar a esta:

  VITE v4.5.3  ready in 276 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Abrí tu navegador y andá a http://localhost:5173/ (o el puerto que te indique Vite). ¡Vas a ver la aplicación de Vue por defecto funcionando!

Este comando inicia el servidor de desarrollo de Vite. Cada vez que guardes un cambio en tus archivos .vue o .ts, Vite va a actualizar automáticamente el navegador, brindándote una experiencia de desarrollo rapidísima gracias al HMR (Hot Module Replacement).

Para detener el servidor, presioná Ctrl + C en la terminal.

Otros Scripts Útiles:

• npm run build: Compila tu aplicación para producción. Genera una carpeta dist/ con todos los archivos optimizados y listos para ser desplegados en un servidor estático.
• npm run preview: Sirve los archivos generados por npm run build para que puedas probar cómo se verá tu aplicación en producción antes de desplegarla.
• npm run test: Ejecuta los tests unitarios con Vitest.
• npm run lint: Ejecuta ESLint para revisar la calidad y estilo de tu código.

7. Sumando TypeScript a Componentes Vue

Ahora, vamos a ver cómo usar TypeScript directamente en tus componentes Vue para aprovechar todo su potencial. La clave está en el bloque <script setup lang="ts">.

<script setup lang="ts">: La Forma Moderna y Tipada

Vue 3 introdujo <script setup>, que simplifica enormemente la escritura de componentes. Al agregar lang="ts", indicamos que estamos usando TypeScript. Esto permite una inferencia de tipos increíblemente buena y un código más conciso.

Vamos a crear un componente de ejemplo llamado UserCard.vue que reciba props y maneje un estado reactivo, todo tipado.

Creá un archivo UserCard.vue dentro de src/components/.

<!-- src/components/UserCard.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

// 1. Definimos las interfaces para las props
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

interface UserCardProps {
  user: User;
  initialLikes?: number; // Prop opcional
}

// 2. Usamos defineProps para tipar las props
// withDefaults nos permite definir valores por defecto para props opcionales
const props = withDefaults(defineProps<UserCardProps>(), {
  initialLikes: 0
});

// 3. Definimos un estado reactivo tipado
const likes = ref<number>(props.initialLikes);

// 4. Definimos emits tipados
const emit = defineEmits<{ 
  (event: 'toggle-status', userId: number): void;
  (event: 'increment-likes', userId: number, newLikes: number): void;
}>();

// Funciones
const incrementLikes = () => {
  likes.value++;
  emit('increment-likes', props.user.id, likes.value);
};

const toggleUserStatus = () => {
  // Emitimos un evento, el componente padre se encargará de cambiar el estado del usuario
  emit('toggle-status', props.user.id);
};

// Computed property tipada
const statusText = computed<string>(() => {
  return props.user.isActive ? 'Activo' : 'Inactivo';
});

</script>

<template>
  <div class="user-card" :class="{ 'is-active': user.isActive }">
    <h3>{{ user.name }}</h3>
    <p>Email: {{ user.email }}</p>
    <p>Estado: {{ statusText }}</p>
    <p>Likes: {{ likes }}</p>

    <button @click="incrementLikes">Dar Like</button>
    <button @click="toggleUserStatus">Alternar Estado</button>
  </div>
</template>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.user-card.is-active {
  border-color: #42b983;
  background-color: #e6ffee;
}

button {
  margin-right: 8px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
}

button:hover {
  background-color: #2980b9;
}
</style>

Ahora, vamos a integrar este componente en App.vue para ver cómo funciona. Modificá src/App.vue de la siguiente manera:

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import UserCard from './components/UserCard.vue'; // Importamos nuestro nuevo componente
import HelloWorld from './components/HelloWorld.vue'; // Componente por defecto

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const users = ref<User[]>([
  { id: 1, name: 'Juan Pérez', email: 'juan.perez@example.com', isActive: true },
  { id: 2, name: 'María García', email: 'maria.garcia@example.com', isActive: false },
  { id: 3, name: 'Pedro López', email: 'pedro.lopez@example.com', isActive: true },
]);

const handleToggleStatus = (userId: number) => {
  const user = users.value.find(u => u.id === userId);
  if (user) {
    user.isActive = !user.isActive;
    console.log(`Usuario ${user.name} ahora está ${user.isActive ? 'activo' : 'inactivo'}`);
  }
};

const handleIncrementLikes = (userId: number, newLikes: number) => {
  const user = users.value.find(u => u.id === userId);
  if (user) {
    console.log(`El usuario ${user.name} tiene ahora ${newLikes} likes.`);
  }
};

const pageTitle = ref('Gestión de Usuarios con Vue 3 y TypeScript');

</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld :msg="pageTitle" />
    </div>
  </header>

  <main>
    <h2>Nuestros Usuarios:</h2>
    <div class="user-cards-container">
      <UserCard 
        v-for="user in users" 
        :key="user.id" 
        :user="user" 
        :initial-likes="user.id * 5" 
        @toggle-status="handleToggleStatus"
        @increment-likes="handleIncrementLikes"
      />
    </div>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

.wrapper {
  text-align: center;
}

main {
  padding: 2rem;
}

.user-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

Si tenés el servidor de desarrollo (npm run dev) corriendo, vas a ver los cambios inmediatamente en el navegador. Proba interactuar con los botones de "Dar Like" y "Alternar Estado" para ver cómo se actualiza la interfaz y la consola.

Tipado de la Reactividad (ref y reactive)

• ref<Type>(): Se usa para tipos primitivos (string, number, boolean) o cuando querés que la variable sea reemplazada completamente. ref devuelve un objeto con una propiedad .value que contiene el valor reactivo.

  import { ref } from 'vue';
  
  const count = ref<number>(0);
  const name = ref<string | null>(null);
  
  // Para acceder y modificar el valor:
  count.value++;
  name.value = 'Juan';

• reactive<Type>(): Se usa para objetos o arrays. Permite que Vue rastree cambios profundos dentro del objeto. No necesitás .value para acceder a sus propiedades.

  import { reactive } from 'vue';
  
  interface TodoItem {
    id: number;
    text: string;
    completed: boolean;
  }
  
  const todo = reactive<TodoItem>({ id: 1, text: 'Aprender Vue', completed: false });
  const todos = reactive<TodoItem[]>([]);
  
  // Para acceder y modificar propiedades:
  todo.completed = true;
  todos.push({ id: 2, text: 'Hacer ejercicio', completed: false });

8. Configuración de Vite (vite.config.ts) y TypeScript (tsconfig.json)

Entender estos archivos te da control sobre cómo se construye y compila tu proyecto.

vite.config.ts

Este archivo define cómo Vite se comporta. La configuración por defecto que create-vue te da es excelente, pero a veces vas a querer ajustarla.

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // Solo si elegiste soporte para JSX
  ],
  resolve: {
    alias: {
      // Esto configura un alias para @ que apunta a la carpeta src/
      // Te permite usar rutas absolutas como `@/components/UserCard.vue`
      // en lugar de rutas relativas como `../../components/UserCard.vue`
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Puntos Clave:

• defineConfig: Es una función auxiliar de Vite que te da autocompletado para la configuración y asegura que tus opciones sean válidas.
• plugins: Acá agregás los plugins de Vite. vue() es esencial para que Vite entienda los archivos .vue.
• resolve.alias: Permite definir alias para rutas, lo que hace tus imports más limpios. @ a src/ es el más común.

tsconfig.json

Este es el archivo de configuración principal de TypeScript. Define cómo el compilador de TypeScript va a interpretar y compilar tus archivos .ts y .vue.

La configuración por defecto generada por create-vue es bastante completa. Vas a ver varios tsconfig.*.json porque es una buena práctica separar la configuración base de la específica para la app y los tests.

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// tsconfig.app.json (extendido de tsconfig.json)
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "noEmit": true,
    "moduleResolution": "bundler",
    "types": ["node", "vue/ref-transform"], // Añadido para transformar ref sin .value
    "jsx": "preserve", // Si elegiste JSX
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

// ... y otros como tsconfig.vitest.json

**Puntos Clave en compilerOptions (pueden variar según la versión y lo que elijas en create-vue):
**

• extends: Permite heredar una configuración base, como @vue/tsconfig/tsconfig.dom.json, que ya tiene optimizaciones para aplicaciones web.
• include / exclude: Le dicen a TypeScript qué archivos debe procesar y cuáles ignorar.
• composite: true: Habilita el modo de compilación compuesto, útil para monorepos.
• baseUrl: ".": Define la base para la resolución de módulos no relativos.
• paths: Similar al alias de Vite, pero para TypeScript. Permite que el compilador resuelva @/* a src/*.
• strict: true (implícito en la configuración base): Esto es crucial. Habilita todas las opciones de verificación de tipos estrictas de TypeScript, forzando un código más seguro y robusto. ¡No lo desactives!
• lib: Define las bibliotecas de tipos que TypeScript va a incluir. Por ejemplo, DOM para trabajar con el DOM del navegador.
• moduleResolution: Indica cómo TypeScript va a resolver los módulos. bundler es el recomendado para proyectos modernos con Vite/Rollup.
• noEmit: true: Vite se encarga de la transpilación a JavaScript, por lo que no queremos que TypeScript genere archivos JavaScript .js intermedios.

9. Buenas Prácticas y Errores Comunes

Para que tu proyecto no solo funcione, sino que sea un placer trabajar en él a largo plazo, tené en cuenta estas recomendaciones:

Organización de Archivos y Carpetas

• Por Tipo: La estructura por defecto (components/, views/, stores/) funciona bien para proyectos pequeños y medianos.
• Por Feature/Dominio: Para aplicaciones más grandes, considerá organizar tus componentes, stores, rutas y servicios relacionados con una funcionalidad específica dentro de una misma carpeta (ej: src/features/auth/, src/features/products/).
• Módulos CSS/SCSS: Usá <style scoped> en tus componentes Vue para encapsular estilos. Para estilos globales o variables, podés usar src/assets/main.css o importar archivos SCSS globales si configurás Vite para ello.

Aprovechando al Máximo TypeScript

• Sé Explícito con los Tipos: Aunque TypeScript puede inferir muchos tipos, ser explícito (especialmente con interfaces para objetos complejos) mejora la legibilidad y la seguridad. Por ejemplo, usá interfaces para las props de tus componentes, para los payloads de tus stores de Pinia o para las respuestas de tus APIs.
• No Tengas Miedo a any: Si bien any te saca de un apuro, abusar de él es como desactivar TypeScript. Intentá siempre tipar tus datos. Si no conocés el tipo exacto, podés usar unknown y luego refinar el tipo (as Type) cuando tengas más información, o crear interfaces más flexibles.
• Archivos de Declaración (.d.ts): Para librerías JS sin tipos o para declarar variables globales (como las variables de entorno), usá archivos .d.ts. El env.d.ts es un ejemplo de esto.

Rendimiento con Vite

• Optimización de Imagenes: Vite puede manejar la importación de imágenes. Considerá optimizar el tamaño de tus imágenes para la web.
• Lazy Loading de Rutas: Con Vue Router, usá el lazy loading (component: () => import('./views/AboutView.vue')) para que los componentes de las rutas solo se carguen cuando sean necesarios, reduciendo el tamaño del bundle inicial.

Gestión de Estado con Pinia

• Divide tus Stores: Evitá tener un único store gigante. Dividí tu estado en módulos de Pinia (stores) lógicos (ej: userStore, productStore, authStore).
• Usa Actions para Lógica Compleja: Mové la lógica asíncrona o compleja a las actions de Pinia para mantener tus componentes limpios.

Testing

• Escribe Tests Unitarios: Aprovechá Vitest para testear la lógica de tus componentes y stores de Pinia de forma aislada. Esto te da confianza para refactorizar y añadir nuevas funcionalidades.
• Test de Integración/E2E: Para funcionalidades críticas, considerá añadir tests de integración o end-to-end con Cypress o Playwright, que, aunque no los incluimos en el setup inicial, son herramientas muy valiosas.

Consistencia de Código

• ESLint y Prettier: Mantenelos siempre activos. Configura tu editor de código para que formateé y lintée al guardar. Esto asegura que todo el equipo siga las mismas reglas de estilo y ayuda a evitar errores.

10. Conclusión

¡Felicitaciones! Acabás de configurar una base sólida para tu proyecto Vue 3 utilizando las herramientas más modernas y eficientes del ecosistema frontend: Vite para un desarrollo rapidísimo y TypeScript para una codebase robusta y mantenible.

Con este setup, tenés todo lo necesario para empezar a construir aplicaciones increíbles. Ya podés enfocarte en la lógica de tu negocio y en la experiencia de usuario, sabiendo que tu pila tecnológica es moderna, performante y, lo más importante, segura gracias al tipado.

¿Cuáles son los próximos pasos?

• Explorá la Composition API: Sumergite en ella. Practicá la creación de composables (funciones reutilizables que encapsulan lógica reactiva) para ver su verdadero poder.
• Profundizá en Pinia: Aprende a manejar el estado global de tu aplicación de forma eficiente y elegante.
• Dominá Vue Router: Entendé las rutas anidadas, la navegación programática y los guardias de ruta.
• Escribí Tests: Empezá a escribir tests unitarios con Vitest para los componentes clave y la lógica de tus stores. Te va a ahorrar muchos dolores de cabeza.

¡Ahora salí a construir algo genial! Si tenés dudas o querés compartir tu experiencia, dejame un comentario. ¡Nos vemos en el próximo post!