> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend
> Guía introductoria para decidir cómo combinar Blade, Livewire, Inertia, React, Vue, Svelte, SPA y Vite en Laravel 13.
## Visión general
Laravel es un framework de backend, pero también da mucha importancia a la experiencia de desarrollo que incluye el frontend.\
En Laravel 13 se ofrecen tanto formas de trabajar centradas en PHP como formas que aprovechan frameworks de JavaScript como React, Vue o Svelte.
Para elegir el enfoque adecuado ayuda pensarlo en estos tres puntos:
* ¿Quieres escribir la UI principalmente en **PHP**?
* ¿Quieres escribir la UI principalmente en **JavaScript / TypeScript**?
* ¿Quieres tener todo en un solo repositorio, o separar API y SPA?
```mermaid theme={null}
flowchart TD
A["Aplicación Laravel"] --> B{"¿Dónde construyes la UI?"}
A --> G["Vite compila los assets"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + SPA independiente"]
C --> C1["El servidor devuelve HTML"]
D --> D1["UI dinámica impulsada por PHP"]
E --> E1["Experiencia tipo SPA en un solo repositorio"]
F --> F1["Integración con otro frontend o app móvil"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Enfoque desde PHP
### Blade
[Blade](/es/blade) es el motor de plantillas estándar de Laravel. Devuelves vistas desde controladores o rutas, y el navegador recibe el HTML generado en el servidor.
**Ventajas**
* Se integra de forma natural con el enrutamiento, la validación y la autenticación de Laravel
* Se puede resolver casi todo con solo PHP, con una curva de aprendizaje baja
* Va bien con páginas centradas en SEO o en la primera carga
**Desventajas**
* Es fácil que cada navegación o envío de formulario provoque un repintado completo de la página
* Las interacciones complejas requieren apoyarse en JavaScript
Blade es adecuado para paneles de administración, herramientas internas, pantallas centradas en contenido y aplicaciones basadas en formularios.
### Livewire
[Laravel Livewire](https://livewire.laravel.com) es un enfoque que, apoyándose en Blade, permite implementar UIs más dinámicas manteniéndose en PHP. Puedes construir interacciones como modales, búsquedas o edición en línea con una experiencia cercana a React o Vue.
**Ventajas**
* Se pueden crear UIs dinámicas como una extensión de PHP y Blade
* Se conecta bien con la gestión de estado y la validación de Laravel
* Se combina fácilmente con Alpine.js si solo quieres añadir un poco de JavaScript en puntos concretos
**Desventajas**
* No maneja tan bien como los frameworks JavaScript el estado complejo del lado del cliente
* Puede no ser adecuado para SPAs de gran tamaño con mucha lógica en el frontend
Si quieres profundizar en Livewire, consulta la [Introducción a Livewire](/es/blog/livewire-introduction).
### Starter kits centrados en PHP
Los [starter kits](/es/starter-kits) de Laravel 13 incluyen una opción basada en **Livewire** para equipos que quieren construir **UIs dinámicas** manteniéndose en PHP. También puedes empezar solo con Blade, pero la opción "PHP-first" preparada como starter kit es Livewire. Al traer ya listos autenticación, layout y la configuración de Vite, permite empezar a desarrollar en el menor tiempo posible.
## Uso de un framework JavaScript
### Inertia + React / Vue / Svelte
[Inertia](https://inertiajs.com) es el puente que te permite mantener las rutas, controladores y la autenticación de Laravel mientras construyes los componentes de página con React, Vue o Svelte. No se separan por completo el servidor API y la SPA; puedes construir una UI moderna dentro de una única aplicación Laravel.
**Ventajas**
* Puedes aprovechar el modelo de componentes de React / Vue / Svelte
* Enrutamiento y autenticación pueden dejarse del lado de Laravel
* Es fácil gestionar backend y frontend en un solo repositorio
**Desventajas**
* Hay más elementos que aprender que en una configuración solo con Blade
* Suele requerir conocimientos de la cadena de herramientas Node.js y de TypeScript
En los starter kits oficiales de Laravel 13 puedes elegir de entrada **React / Vue / Svelte + Inertia**.
Consulta la [Introducción a Inertia](/es/blog/inertia-introduction), la [Introducción a React](/es/blog/react-introduction), la [Introducción a Vue](/es/blog/vue-introduction) y la [Introducción a Svelte](/es/blog/svelte-introduction) para más detalles.
### Separar la API y una SPA independiente
También puedes elegir una configuración en la que el frontend está totalmente separado de Laravel y una SPA o app móvil consume la API. Es útil cuando varios clientes deben compartir el mismo backend.
En este escenario, Laravel se ocupa principalmente de:
* Exponer rutas de API
* Autenticación y autorización (por ejemplo, [Sanctum](/es/sanctum))
* Dar forma a las respuestas JSON (por ejemplo, con [Eloquent API Resources](/es/eloquent-resources))
**Ventajas**
* Es fácil desplegar hacia varios clientes: web, móvil, escritorio, etc.
* Puedes desacoplar la elección tecnológica del frontend respecto al núcleo Laravel
**Desventajas**
* Autenticación, obtención de datos y despliegue deben diseñarse por separado
* Suele ser más complejo que una configuración autocontenida en una sola aplicación Laravel
### Starter kits centrados en JavaScript
Al usar los [starter kits](/es/starter-kits) partes con Inertia, React / Vue / Svelte, Tailwind CSS y Vite ya integrados. Como también incluyen las pantallas de autenticación, es más fácil centrarse en el desarrollo de la UI.
## Empaquetar los assets con Vite
Elijas el enfoque que elijas, en Laravel 13 normalmente se compilan CSS y JavaScript con [Vite](/es/vite). Con Blade y Livewire lo usarás para scripts y estilos ligeros; con Inertia, para todo el código frontend de la aplicación.
Las ventajas de usar Vite son:
* HMR rápido durante el desarrollo local
* Empaquetado y versionado de los assets para producción
* Integración con la directiva `@vite()` de Laravel
Los starter kits de Laravel 13 vienen preconfigurados con una configuración frontend basada en Vite.
## Comparativa de enfoques
| Enfoque | Casos adecuados | Ventajas | Desventajas |
| ------------------------------ | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Blade | Páginas centradas en contenido, paneles de administración basados en formularios | Sencillo y fácil de aprender. Integración natural con las funciones estándar de Laravel | En UIs avanzadas aumentan los repintados de página completos |
| Livewire | Aplicaciones de negocio con UI dinámica manteniéndose en PHP | Permite construir UIs reactivas sin salir de PHP | El estado complejo del lado del cliente le cuesta más |
| Inertia + React / Vue / Svelte | Aplicaciones que quieren compatibilizar UI moderna y operación unificada con Laravel | Permite construir experiencias tipo SPA en un único repositorio | Requiere dominio de JavaScript / TypeScript |
| API + SPA independiente | Productos con varios clientes o integración móvil | Facilita desplegar el frontend de forma independiente | Autenticación, despliegue y operación tienden a volverse más complejos |
## Próximos pasos
Repasa los fundamentos del server-side rendering.
Compara las configuraciones iniciales de React, Vue, Svelte y Livewire.
Aprende el flujo del servidor de desarrollo, HMR y build de producción.
Descubre cómo Inertia conecta Laravel con los frameworks JavaScript.
## Related topics
- [Conocimientos necesarios antes de empezar con Laravel](/es/true-tutorial.md)
- [Cómo crear un starter kit de Laravel](/es/advanced/starter-kit-creation.md)
- [Construir una SPA con Inertia.js](/es/blog/inertia-introduction.md)
- [Bundling de assets con Vite](/es/vite.md)
- [Instalación](/es/installation.md)