Introducción
El uso de un framework nos facilita enormemente el trabajo a la hora de crear una aplicación. Vue.js es un framework de JavaScript utilizado para crear interfaces de usuario (UI) y aplicaciones web de una manera reactiva y eficiente. Vue se destaca por su facilidad de integración y su enfoque en el rendimiento y la simplicidad.
Algunas de las características principales de Vue son:
- Reactividad: Vue tiene un sistema de reactividad que facilita la actualización automática de la UI cuando los datos cambian.
- Componentes: Permite crear aplicaciones mediante la construcción de componentes reutilizables, lo que facilita la organización y el mantenimiento del código.
- Facilidad de integración: Vue se puede integrar de manera gradual con otros proyectos o usarse para crear aplicaciones completas desde el principio.
- Sintaxis sencilla: Su sintaxis es clara y fácil de aprender, lo que hace que sea ideal tanto para desarrolladores novatos como para experimentados.
Vue es muy popular debido a su enfoque flexible y escalable, lo que permite usarlo tanto para aplicaciones pequeñas como para aplicaciones grandes y complejas.
Mira el siguiente video:
Recuerda que puedes poner subtítulos en inglés y en español si lo necesitas.
Traducir páginas
Si no controlas mucho el inglés siempre puedes usar la extensión de DeepL para traducir textos. Con DeepL obtendrás mejores traducciones que con Google Translate.
Traducción con la extensión de DeepL
¿Qué hace Vue?
Si quieres conocer las principales características que proporciona Vue te recomiendo que hagas sigas el tutorial oficial de Vue. He preparado el artículo Tutorial: Vue donde he traducido todo el tutorial con DeepL.
¿Qué diferencia hay entre un framework y una librería?
Introducción a componentes Vue
Getting started en inglés
La forma más segura y actualizada de empezar con Vue es seguir el Quick Start de la documentación oficial de Vue. Por el momento no hay versión en español.
Getting started en español
Si prefieres leer la teoría directamente en español te dejo el índice con enlaces a diferentes artículos para que puedas acceder directamente:
Este material fue actualizado en enero de 2025.
- Conceptos básicos
- Directivas
- Componentes
- Peticiones Ajax: axios
- NOTA: Ya no es tan necesario usar axios. Se puede sustituir por
fetch.
- NOTA: Ya no es tan necesario usar axios. Se puede sustituir por
- SPA: vue-router
- Profundizando en Vue
- Pinia
- NOTA: para Vue 2 consultar Vuex
- Formularios
- Typescript
- Testeando componentes
- Y más…
- Composition API
¿Qué es Vite?
Vite es un constructor y servidor de desarrollo frontend ultrarrápido. Su objetivo es mejorar la experiencia de desarrollo con tiempos de inicio casi instantáneos y una recarga en caliente súper rápida.
¿Qué es el scaffold?
El scaffold (o scaffolding) es una técnica que permite generar automáticamente el código base para una aplicación o módulo. El término proviene de la palabra en inglés para “andamio”.
Comparativa entre Vue y Blade
Se va a hacer una comparativa entre Vue y Blade. Realmente la comparativa sería exactamente igual si cambiamos Blade con cualquier sistema de plantillas de backend (como JSP o Thymeleaf) y Vue con cualquier librearía para realizar SPAs (como React o Angular).
| Característica | Blade (Laravel) | Vue (SPA o híbrida) |
|---|---|---|
| Renderizado | Del lado del servidor (SSR) | Del lado del cliente (CSR), aunque admite SSR |
| Velocidad de carga inicial | Rápida (HTML directo) | Más lenta (JS necesita cargar primero) |
| Interactividad | Limitada (necesita JS externo) | Alta (reactivo, dinámico, componentes) |
| SEO | Excelente (HTML servido por Laravel) | Regular (salvo si usas SSR con Nuxt o similares) |
| Experiencia de usuario | Tradicional | Moderna y fluida (tipo app) |
| Curva de aprendizaje | Baja (si ya sabes PHP) | Media (requieres JS moderno, build tools…) |
| Escalabilidad | Menos flexible para apps complejas | Muy flexible para apps complejas |
| Desarrollo full-stack | Laravel controla todo (muy integrado) | Separa backend (Laravel) y frontend (Vue) |
Como se puede ver, las únicas desventajas de Vue sobre Blade son la curva de aprendizaje y el SEO. La parte del SEO se puede solucionar con Nuxt en el caso de Vue.
La principal ventaja de utilizar librerías como Vue es que se separa el backend del frontend, por lo que puede sería mucho más sencillo implementar una aplicación Android ya que podríamos reutilizar todo el backend sin modificación alguna.
¿Laravel implementa el MVC (Modelo Vista Contorlador)?
Si.
¿Vue implementa el MVC?
No. Por defecto Vue sigue una arquitectura orientada a componentes. Los principios del MVC siguen aplicándose pero de una forma diferente.
¿Qué es una arquitectura en el desarrollo de software?
Una arquitectura define cómo se organizan los ficheros y carpetas de una aplicación. Una arquitectura define:
- Como se mueve la información dentro del sistema. Es decir, como se comunican los diferentes componentes entre sí.
- Qué responsabilidad tiene cada parte del sistema.
El objetivo final de una arquitectura es que el código sea mantenible. Esto quiere decir que conforme crezca el proyecto un fichero no ocupe miles y miles de líneas de código.
Al usar un framework ya se nos “fuerza” a usar una estructura de carpetas inicial prefijada por alguien más inteligente que nosotros por lo que tampoco es algo que nos deba preocupar demasiado. Aunque nunca está de más entender por qué hacemos las cosas como las hacemos.
¿Qué es Vite?
Vite es una herramienta moderna de desarrollo frontend que sirve para crear, compilar y optimizar aplicaciones web.