Presentación

Vue.js es un framework JavaScript open source destinado a crear interfaces Web.

Creado por Evan You, se distingue por su enfoque progresivo: Vue puede servir para enriquecer una página existente con algunos componentes o constituir la base de una aplicación de una sola página completa.

El framework se basa en un sistema de componentes, templates declarativos y una capa de reactividad que actualiza automáticamente la interfaz cuando cambian los datos utilizados.

Vue propone dos estilos principales de API: Options API y Composition API. Composition API, asociada a la sintaxis <script setup>, constituye actualmente un enfoque habitual para nuevos proyectos y facilita especialmente la organización de componentes complejos y el uso de TypeScript.

El ecosistema oficial sigue siendo deliberadamente modular. Vue Router se encarga de la navegación, Pinia de la gestión de estado y Vite constituye la herramienta recomendada para crear y compilar nuevos proyectos.

A 3 de octubre de 2026, Vue 3.5.43 es la última versión estable. Vue 3.6 todavía se encuentra en fase release candidate.

Funcionalidades

Componentes y templates

Una aplicación Vue se construye a partir de componentes reutilizables.

Cada componente puede recibir datos, gestionar su propio estado, emitir eventos e integrar otros componentes.

Los templates utilizan una sintaxis cercana a HTML enriquecida con expresiones JavaScript y directivas.

Directivas como v-if, v-for, v-bind o v-on permiten respectivamente controlar la visualización, recorrer colecciones, enlazar atributos o reaccionar a eventos.

Este enfoque declarativo evita manipular directamente el DOM en la mayoría de interacciones habituales.

Reactividad

Vue dispone de un sistema de reactividad integrado.

ref() permite crear un valor reactivo, mientras que reactive() transforma un objeto en estado reactivo.

Los valores calculados pueden declararse con computed(), y watch() permite activar una lógica cuando determinados datos cambian.

Cuando cambia un valor utilizado por un componente, Vue identifica las partes de la interfaz afectadas y actualiza su renderizado.

Este sistema también puede utilizarse independientemente de los componentes en determinadas lógicas de aplicación.

Composition API

La Composition API permite organizar la lógica de un componente alrededor de funciones y funcionalidades en lugar de categorías de opciones.

Utiliza especialmente ref, reactive, computed, watch y hooks del ciclo de vida.

La lógica reutilizable puede extraerse en funciones llamadas composables, que después pueden compartirse entre varios componentes.

Este enfoque resulta especialmente adecuado para componentes complejos y suele mejorar la inferencia de tipos con TypeScript.

Options API

Vue también continúa ofreciendo la Options API.

Organiza un componente en secciones como data, methods, computed, watch y hooks del ciclo de vida.

Esta sintaxis sigue siendo totalmente compatible y puede resultar más accesible para determinados proyectos o desarrolladores principiantes.

Options API y Composition API se basan en el mismo sistema subyacente y pueden coexistir dentro del mismo ecosistema.

Single-File Components

Los Single-File Components — SFC agrupan normalmente el template, la lógica JavaScript o TypeScript y los estilos de un componente dentro de un archivo .vue.

Un componente puede contener así bloques <template>, <script> y <style> claramente separados.

La sintaxis <script setup> simplifica Composition API al hacer directamente accesibles en el template las variables, funciones e imports declarados en el script.

Los SFC requieren una etapa de compilación y están especialmente adaptados a proyectos que utilizan Vite.

Props, eventos y v-model

Las props permiten a un componente padre transmitir datos a un componente hijo.

Los eventos permiten al componente hijo comunicar una acción o cambio hacia su padre.

Vue también admite v-model para crear enlaces bidireccionales adaptados especialmente a campos de formulario y componentes personalizados.

Esta circulación explícita de datos ayuda a estructurar las relaciones entre componentes.

TypeScript

Vue dispone de un soporte avanzado para TypeScript.

Props, eventos, refs, composables y otros elementos pueden beneficiarse del tipado estático y de la inferencia.

La extensión oficial de Vue para editores también proporciona análisis de archivos .vue, incluidas las expresiones presentes en los templates.

vue-tsc permite realizar estas comprobaciones de tipos desde la línea de comandos.

Sin embargo, TypeScript sigue siendo opcional: Vue puede utilizarse con JavaScript clásico.

Vue Router

Vue Router es el router oficial de Vue.

Permite asociar diferentes URL a los componentes de una aplicación y gestionar parámetros, rutas anidadas, redirecciones y navegación programática.

Es compatible tanto con Composition API como con Options API.

Para una SPA de tamaño real, Vue recomienda generalmente Vue Router en lugar de una implementación manual de la navegación.

Pinia

Pinia es la solución de gestión de estado recomendada para aplicaciones Vue.

Un store puede agrupar estado, valores derivados y acciones accesibles desde varios componentes.

Pinia también ofrece integración con Vue DevTools, TypeScript, Hot Module Replacement y renderizado servidor.

Vuex, el antiguo gestor de estado oficial del ecosistema Vue, sigue siendo utilizable pero se encuentra actualmente en modo mantenimiento; Pinia se recomienda para nuevos proyectos.

Vite y create-vue

Los nuevos proyectos Vue se crean generalmente con create-vue, la herramienta oficial de scaffolding.

Genera un proyecto basado en Vite y permite activar según las necesidades TypeScript, Vue Router, Pinia, tests u otras funciones.

Vite proporciona un servidor de desarrollo rápido, Hot Module Replacement y compilación de producción.

El antiguo Vue CLI basado en webpack sigue disponible para proyectos existentes, pero se encuentra en modo mantenimiento. Vue recomienda Vite para nuevos proyectos.

Renderizado servidor e hidratación

Vue admite Server-Side Rendering — SSR.

Un servidor puede generar el HTML inicial a partir de componentes Vue, y después el navegador hidrata la página para hacerla interactiva.

Este enfoque puede mejorar el tiempo de acceso al contenido y resultar adecuado para páginas públicas que necesitan una buena indexación.

Vue también puede utilizarse para Static Site Generation — SSG, cuando las páginas pueden generarse previamente.

Para proyectos SSR importantes, la documentación recomienda generalmente utilizar un framework Vue que ya disponga de esta infraestructura, especialmente Nuxt.

Hidratación diferida

Vue 3.5 añadió estrategias de lazy hydration para componentes asíncronos utilizados con SSR.

Un componente puede esperar antes de hidratarse en el navegador según distintos criterios, por ejemplo cuando se vuelve visible o cuando el navegador está disponible.

Este enfoque puede reducir la cantidad de JavaScript ejecutada inmediatamente durante la carga de una página.

Está dirigido principalmente a arquitecturas que utilizan renderizado servidor o generación híbrida.

Transition, Teleport y Suspense

Vue proporciona varios componentes integrados para necesidades habituales de interfaz.

Transition y TransitionGroup facilitan la animación de la aparición, desaparición o desplazamiento de elementos.

Teleport permite renderizar parte de un componente en otra zona del DOM, lo que resulta especialmente útil para modales y overlays.

Suspense puede coordinar determinados componentes asíncronos y mostrar contenido temporal durante su carga.

Estas funciones evitan añadir inmediatamente una biblioteca externa para varias necesidades habituales.

Modelo de proyecto progresivo

Vue puede utilizarse sin sistema de build cargando directamente el framework desde un CDN.

Esta posibilidad resulta adecuada para añadir progresivamente componentes interactivos a una aplicación existente.

Para aplicaciones más importantes, suele ser preferible utilizar SFC, Vite y herramientas de build.

Esta capacidad para pasar de una integración ligera a una aplicación completa explica el calificativo de framework progresivo utilizado por Vue.

Tests y DevTools

El ecosistema Vue proporciona varias herramientas para desarrollo y pruebas.

La documentación recomienda Vitest para tests unitarios en proyectos basados en Vite.

Cypress puede utilizarse para tests end-to-end y tests de componentes.

Vue DevTools permite inspeccionar el árbol de componentes, su estado, Pinia y distinta información de rendimiento directamente desde las herramientas de desarrollo.

Casos de uso

Construir una SPA

Vue Router, Pinia y los componentes Vue permiten construir una aplicación de una sola página completa.

La interfaz puede evolucionar según la navegación y el estado sin recargar completamente cada página.

Añadir interactividad a un sitio existente

Vue puede introducirse progresivamente dentro de una página ya producida por un backend clásico.

Un formulario, configurador o tabla interactiva puede utilizar Vue sin reescribir inmediatamente todo el sitio.

Desarrollar una aplicación con TypeScript

Los SFC y Composition API funcionan estrechamente con TypeScript.

Esta combinación resulta adecuada para aplicaciones donde componentes y lógica de negocio requieren mayor control sobre los tipos.

Construir un sitio con SSR

Vue puede producir el HTML inicial en el servidor y después hidratar la interfaz dentro del navegador.

Para proyectos importantes, Nuxt puede gestionar routing, recuperación de datos, SSR y distintas estrategias de renderizado alrededor de Vue.

Crear una biblioteca de componentes

Los Single-File Components permiten construir un design system compuesto por botones, campos, tarjetas, modales y otros elementos reutilizables.

Los mismos componentes pueden integrarse después en varias aplicaciones Vue.

Conclusión

Vue.js combina facilidad de adopción y una arquitectura capaz de aumentar progresivamente en complejidad.

Su sistema de componentes y reactividad permite construir interfaces con relativamente poco código, mientras que Composition API y <script setup> ofrecen una organización adaptada a proyectos más grandes.

Vue Router, Pinia y Vite completan el framework con herramientas oficiales coherentes sin imponer desde el principio una arquitectura excesivamente pesada.

Vue puede tanto enriquecer una página existente como servir de base para una SPA o una aplicación renderizada del lado servidor mediante un framework como Nuxt.

Sin embargo, esta flexibilidad implica tener que elegir varios elementos de arquitectura cuando el proyecto crece, mientras que un framework más integrado como Angular proporciona más decisiones predeterminadas.

Para crear interfaces Web modernas con una sintaxis accesible, reactividad integrada y un ecosistema modular, Vue.js constituye una solución especialmente equilibrada.

Puntos de atención

  • Vue 3.5.43 es la versión estable actual a 3 de octubre de 2026, publicada el 17 de septiembre de 2026.

  • Vue 3.6 sigue siendo una versión preliminar. La rama ha alcanzado la fase release candidate, pero todavía no debe considerarse la referencia estable de producción.

  • Vue.js es gratuito y open source bajo licencia MIT, incluido para uso comercial.

  • Vue 3 es la rama moderna de referencia. Vue 2 alcanzó su final de vida oficial el 31 de diciembre de 2023.

  • Composition API no ha sustituido a Options API. Ambos estilos siguen teniendo soporte oficial, aunque Composition API con <script setup> está muy presente en nuevos proyectos.

  • Vue no proporciona directamente todas las funciones de una aplicación completa. Vue Router, Pinia o un framework como Nuxt suelen complementar el núcleo del framework.

  • Vue Router se recomienda para SPA con una necesidad real de navegación. Una implementación manual solo resulta adecuada para casos muy simples.

  • Pinia se recomienda para nuevos proyectos que necesitan gestión global de estado. Vuex se encuentra actualmente en modo mantenimiento.

  • Vue CLI está en modo mantenimiento. Los nuevos proyectos deberían utilizar generalmente create-vue y Vite.

  • SSR añade complejidad a la arquitectura. Código específico del navegador, estado compartido entre peticiones y dependencias de terceros deben gestionarse con precaución.

  • El contenido HTML proporcionado por usuarios no debe inyectarse sin saneamiento. El uso imprudente de HTML o templates no fiables puede introducir vulnerabilidades XSS.

  • Las bibliotecas de terceros tienen sus propias licencias y ciclos de mantenimiento. Conviene comprobar su compatibilidad con las versiones recientes de Vue durante las actualizaciones.