Vue.js

Cuando se lanza una nueva versión principal, por ejemplo v3.yz, la última versión menor, por ejemplo 2.xy, se convertirá en una versión LTS durante 18 meses (correcciones de errores y parches de seguridad) y durante los siguientes 18 meses estará en modo de mantenimiento (solo parches de seguridad). ^{[ 42 ]}

Vue 3 se lanzó oficialmente en septiembre de 2020. Según el Informe sobre el estado de Vue.js 2025 , el 96 % de los desarrolladores encuestados informaron haber utilizado Vue 3.x. Sin embargo, el 35 % también indicó haber utilizado Vue 2.7.x en el último año, lo que refleja una dependencia continua de Vue 2 a pesar del fin de su soporte. ^{[ 43 ]} El informe también señaló que más de una cuarta parte de los encuestados encontraron dificultades al migrar de Vue 2 a Vue 3. ^{[ 44 ]}

• 2015 - Vuex se presenta como solución oficial de gestión estatal.
• 2021 - El desarrollo de Pinia comienza como experimento con Vuex 5.
• 2022 - Pinia se convierte en una recomendación oficial para nuevos proyectos.
• 2023 - El equipo de Vue anuncia la transición al modo de mantenimiento de Vuex.

Según el Informe sobre el estado de Vue.js 2025 , la recomendación del equipo principal de Vue se refleja en la adopción por parte de los desarrolladores: más del 80 % de los desarrolladores encuestados informaron usar Pinia, mientras que Vuex todavía tenía un 38,4 % de uso, lo que indica una dependencia continua de la biblioteca más antigua. ^{[ 45 ]}

Los componentes de Vue extienden los elementos HTML básicos para encapsular código reutilizable. En términos generales, los componentes son elementos personalizados a los que el compilador de Vue les asigna un comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. ^{[ 46 ]} El siguiente fragmento de código contiene un ejemplo de un componente de Vue. El componente agrega un botón e imprime la cantidad de veces que se hace clic en él:

<!-- ButtonClicked.vue --> < script setup lang = "ts" > import { ref , computed , watch , watchEffect , onMounted } from 'vue'const props = defineProps < { initialCount : number } > ()const count = ref ( 0 ) const doubleCount = computed (() => count . value * 2 )función handleClick ( ) : void { count.value + = 1 }watch ( count , ( newValue , oldValue ) => { console.log ( ` El valor de count ha cambiado de ${ oldValue } a ${ newValue } .` ) })watchEffect (() = > console.log ( ` El doble del valor de count es ${ doubleCount.value } ` ) )onMounted (() => { count . value = props . initialCount }) </ script ><template> < button @ click = " handleClick " > Se ha pulsado { { count } } veces </button> </template>​​

< !-- App.vue --> < script setup lang = "ts" > import ButtonClicked from './ButtonClicked.vue ' </script><template> < ButtonClicked : initial - count = " 0 " / > </template>​

// main.ts import { createApp } from 'vue' import App from './App.vue'createApp ( App ). mount ( '#app' )

Vue utiliza una sintaxis de plantillas basada en HTML que permite vincular el DOM renderizado a los datos de la instancia subyacente de Vue. Todas las plantillas de Vue son HTML válido que pueden ser analizados por navegadores y analizadores HTML compatibles con la especificación . Vue compila las plantillas en funciones de renderizado del DOM virtual . Un modelo de objeto de documento virtual (o "DOM") permite a Vue renderizar componentes en su memoria antes de actualizar el navegador. Combinado con el sistema de reactividad, Vue puede calcular el número mínimo de componentes a volver a renderizar y aplicar la cantidad mínima de manipulaciones del DOM cuando cambia el estado de la aplicación. ^{[ 47 ]} Los usuarios de Vue pueden usar la sintaxis de plantillas o elegir escribir directamente funciones de renderizado usando hyperscript ya sea a través de llamadas a funciones o JSX . ^{[ 48 ]} Las funciones de renderizado permiten construir aplicaciones a partir de componentes de software . ^{[ 49 ]}

Vue cuenta con un sistema de reactividad que utiliza objetos JavaScript simples y una renderización optimizada. Cada componente realiza un seguimiento de sus dependencias reactivas durante su renderización, por lo que el sistema sabe con precisión cuándo volver a renderizar y qué componentes volver a renderizar. ^{[ 50 ]}

Vue proporciona diversas formas de aplicar efectos de transición cuando se insertan, actualizan o eliminan elementos del DOM . Esto incluye herramientas para:

• Aplicar automáticamente clases para transiciones y animaciones CSS.
• Integrar bibliotecas de animación CSS de terceros, como Animate.css.
• Utilice JavaScript para manipular directamente el DOM durante los hooks de transición.
• Integrar bibliotecas de animación JavaScript de terceros, como Velocity.js.

Cuando se inserta o se elimina un elemento envuelto en un componente de transición, sucede lo siguiente:

1. Vue detectará automáticamente si el elemento de destino tiene transiciones o animaciones CSS aplicadas. En caso afirmativo, se añadirán o eliminarán clases de transición CSS en los momentos adecuados.
2. Si el componente de transición proporciona ganchos de JavaScript, estos ganchos se llamarán en los momentos adecuados.
3. Si no se detectan transiciones/animaciones CSS y no se proporcionan ganchos JavaScript, las operaciones DOM para inserción y/o eliminación se ejecutarán inmediatamente en el siguiente fotograma. ^{[ 51 ] [ 52 ]}

Una desventaja tradicional de las aplicaciones de una sola página (SPA) es la imposibilidad de compartir enlaces a subpáginas específicas dentro de una página web determinada. Dado que las SPA solo proporcionan a sus usuarios una única respuesta basada en URL desde el servidor (normalmente index.html o index.vue), guardar marcadores para ciertas pantallas o compartir enlaces a secciones específicas suele ser difícil, si no imposible. Para solucionar este problema, muchos enrutadores del lado del cliente delimitan sus URL dinámicas con un símbolo de almohadilla (#!), por ejemplo, page.com/#!/ . Sin embargo, con HTML5, la mayoría de los navegadores modernos admiten el enrutamiento sin este símbolo.

Vue proporciona una interfaz para cambiar lo que se muestra en la página según la ruta URL actual, independientemente de cómo se haya cambiado (ya sea mediante un enlace enviado por correo electrónico, una actualización o enlaces dentro de la página). Además, el uso de un enrutador de front-end permite la transición intencional de la ruta del navegador cuando ocurren ciertos eventos del navegador (por ejemplo, clics) en botones o enlaces. Vue en sí no incluye enrutamiento hash de front-end. Pero el paquete de código abierto "vue-router" proporciona una API para actualizar la URL de la aplicación, admite el botón de retroceso (historial de navegación) y enlaces de restablecimiento de contraseña o verificación por correo electrónico con parámetros de URL de autenticación. Admite el mapeo de rutas anidadas a componentes anidados y ofrece un control de transición preciso. Con Vue, los desarrolladores ya están componiendo aplicaciones con pequeños bloques de construcción que crean componentes más grandes. Con vue-router añadido, los componentes solo deben mapearse a las rutas a las que pertenecen, y las rutas padre/raíz deben indicar dónde deben renderizarse los hijos. ^{[ 53 ]}

< div id = "app" > < router-view ></ router-view > </ div > ... <script> ... const User = { template : '<div>Usuario {{ $route.params.id }}</div> ' } ;const router = new VueRouter ({ routes : [ { path : '/user/:id' , component : User } ] }); ... </ script >

El código anterior:

1. Establece una ruta de front-end en websitename.com/user/<id>.
2. Lo cual se mostrará en el componente User definido en (const User...)
3. Permite que el componente User pase el ID particular del usuario que se escribió en la URL usando la clave params del objeto $route: $route.params.id.
4. Esta plantilla (que varía según los parámetros pasados ​​al enrutador) se renderizará dentro <router-view></router-view>del div#app del DOM.
5. El código HTML que finalmente se generará para alguien que escriba: websitename.com/user/1será:

< div id = " app " > <div> <div> Usuario 1 </div> </div> </div>​​​​​​​

^{[ 54 ]}

• Devtools : extensión de herramientas para desarrolladores del navegador para depurar aplicaciones Vue.js.
• Vite : herramientas estándar para el desarrollo rápido de Vue.js.
• Vue Loader : un cargador de webpack que permite escribir componentes de Vue en un formato llamado Single-File Components (SFC).
• Colección de plugins de Vue.js : una colección de casi 100 plugins y bibliotecas del ecosistema en diversas categorías. ^{[ 55 ]}

• Vue Router : el enrutador oficial, adecuado para construir SPAs ^{[ 17 ]}
• Pinia – La solución oficial de gestión estatal

• Vue School – Cursos impartidos por expertos sobre Vue.js y su ecosistema. ^{[ 56 ]}

• El Informe sobre el Estado de Vue.js : una publicación exhaustiva sobre Vue.js creada desde 2017 por Monterail, socio oficial de Vue y Nuxt. Cada edición incluye datos únicos de encuestas a desarrolladores, tendencias clave del ecosistema y estudios de caso. La última edición, la quinta, publicada en marzo de 2025, fue creada en colaboración con Evan You y los equipos principales de Vue y Nuxt. ^{[ 60 ]}

Aunque el ecosistema de Vue.js está generalmente muy bien desarrollado, los desarrolladores señalan algunas deficiencias como una de las carencias más importantes (según la encuesta a desarrolladores de marzo de 2025 del Informe sobre el estado de Vue.js de 2025 ). ^{[ 61 ]} El 22 % de los encuestados mencionó la falta de bibliotecas de componentes oficiales y robustas como MUI o Radix, y la necesidad de mejores utilidades de prueba. También hubo demanda de soluciones más modulares y preparadas para empresas para paneles de control, comercio electrónico y bibliotecas de animación similares a Framer Motion. ^{[ 62 ]}