Vue.js: guía práctica para tu primer proyecto real

Vue.js: guía práctica para tu primer proyecto real

Vue.js es uno de los frameworks JavaScript más populares del mundo. Destaca por su curva de aprendizaje suave, su documentación excelente y su productividad. En esta guía te llevaremos paso a paso desde la instalación hasta una aplicación funcional con enrutamiento, gestión de estado y consumo de APIs.

¿Por qué Vue.js?

• Progresivo: puedes usarlo como una librería ligera o como un framework completo.
• Composition API: la forma moderna de estructurar componentes con lógica reutilizable.
• Reactividad: el sistema reactivo de Vue actualiza la UI automáticamente cuando cambian los datos.
• Ecosistema maduro: Vue Router, Pinia, Nuxt, Vite, Vitest, DevTools.
• Alta demanda en España: segundo framework frontend más solicitado en ofertas de empleo.

Paso 1: Crear el proyecto

Con Node.js instalado, crea tu proyecto Vue con el CLI oficial:

npm create vue@latest mi-proyecto
cd mi-proyecto
npm install
npm run dev

Selecciona las opciones: TypeScript, Vue Router, Pinia, ESLint. Tu aplicación estará corriendo en localhost:5173.

Paso 2: Estructura del proyecto

Paso 3: Tu primer componente

Un componente Vue con Composition API:

<script setup lang="ts">
import { ref } from 'vue'

const contador = ref(0)
const incrementar = () => contador.value++
</script>

<template>
  <button @click="incrementar">
    Clicks: {{ contador }}
  </button>
</template>

La directiva ref() crea una variable reactiva. Cuando cambia, la UI se actualiza automáticamente.

Paso 4: Vue Router (enrutamiento)

Vue Router permite crear una SPA (Single Page Application) con navegación entre páginas sin recargar:

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/about', component: () => import('../views/AboutView.vue') }
  ]
})

export default router

Paso 5: Pinia (gestión de estado)

Pinia es el store oficial de Vue 3. Ligero, tipado y fácil de usar:

// src/stores/counter.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
})

Paso 6: Consumir una API REST

Usa fetch o axios dentro de un composable para consumir APIs:

// src/composables/useUsers.ts
import { ref, onMounted } from 'vue'

export function useUsers() {
  const users = ref([])
  const loading = ref(true)

  onMounted(async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    users.value = await res.json()
    loading.value = false
  })

  return { users, loading }
}

Paso 7: Despliegue

Para producción:

1. npm run build → genera los archivos estáticos en dist/.
2. Sube dist/ a cualquier hosting estático: Netlify, Vercel, GitHub Pages o tu propio servidor.
3. Si usas Vue Router en modo history, configura el servidor para redirigir todo a index.html.

Errores comunes de principiante

• Olvidar .value: en Composition API, las refs necesitan .value en el script (no en el template).
• Mutar props: las props son solo lectura. Usa emit para comunicar cambios al padre.
• No usar key en v-for: siempre añade :key para que Vue rastree los elementos correctamente.
• Componentes gigantes: mantén los componentes pequeños y reutilizables.

Conclusión

Vue.js es el framework ideal para empezar con el desarrollo web moderno: productivo, bien documentado y con una comunidad enorme. Si sigues este tutorial y construyes tu propio proyecto, tendrás una base sólida para seguir aprendiendo y buscar tu primer empleo como developer.