Laravel 12 Starter Kits Explicado: React, Vue y Livewire

Cuando se inicia un nuevo proyecto Laravel, usted no tiene que construir todo desde cero. Laravel proporciona kits de inicio. Se encargan de lo básico, como rutas, controladores, autenticación y código boilerplate de andamiaje front-end.

Con Laravel 12estos kits de inicio se han modernizado para admitir dos de las opciones de frontend de aplicaciones de una sola página de JavaScript más populares de la actualidad: React y Vuea la vez que ofrecen la opción de utilizar el enfoque más sencillo con las plantillas plantillas Bladejunto con Livewire . Cada uno de estos kits de inicio adopta un enfoque ligeramente diferente para crear tu aplicación:

• React si prefiere construir con un enfoque más basado en componentes

• Vue si prefiere algo más parecido al JavaScript tradicional (sin JSX, por ejemplo)

• Livewire si prefiere mantener las cosas principalmente en PHP y Blade sin JavaScript pesado

En este post, veremos qué ofrece cada kit, en qué se diferencian y cuál tiene más sentido para tu próximo proyecto Laravel 12.

Kit de inicio de React

Si está creando una aplicación web muy interactiva, como Trello, Slacko GitHub y te gusta trabajar con componentes de interfaz de usuario reutilizables, el React starter kit es perfecto. En React, estas piezas se llaman componentesbloques de construcción autónomos que pueden gestionar su propio estado, recibir datos de componentes padre y reutilizarse en toda la aplicación.

El kit de inicio utiliza Inertia.js para conectar React con las rutas y controladores de Laravel. En términos simples, se obtienen los beneficios de ambos backend y frontend trabajando juntos. Laravel maneja toda la lógica de backend, incluyendo enrutamiento, autenticación y operaciones de base de datos. Mientras tanto, React maneja el frontend interactivo, permitiendo que tus páginas se actualicen automáticamente sin tener que recargar la página completa. No es necesario crear una API personalizada, lo que simplifica y agiliza las cosas. Además, el kit incluye TypeScript para seguridad de tipos, TailwindCSS para un estilo rápido, y shadcn/ui para componentes de interfaz de usuario predefinidos. Esto le proporciona una base sólida y flexible para la construcción de interfaces de usuario sensibles.

Diseños y variantes

Una vez que haya instalado el kit de inicio de React, la mayor parte de su código frontend vive en resources/js. Por defecto, tu aplicación utiliza un diseño de barra lateral, pero puedes cambiar fácilmente a un diseño de cabecera cambiando la importación en la parte superior de . resources/js/layouts/app-layout.tsx.

El propio diseño de la barra lateral tiene tres variantes: la predeterminada, "insertada" y "flotante". Puedes elegir la que mejor se adapte a tu aplicación actualizando el parámetro variant prop en resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Las variantes de diseño de las páginas de autenticación, como inicio de sesión, registro y restablecimiento de contraseña, vienen con tres opciones de diseño: simple, tarjeta y dividido.

Puede cambiar fácilmente entre ellos actualizando la importación en la parte superior de resources/js/layouts/auth-layout.tsx.

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Kit de inicio Vue

Si desea una interfaz flexible y fácil de usar, el kit de inicio de kit de inicio de Vue es una buena elección. De nuevo, utiliza Inertia.js para conectar Vue con las rutas y controladores de Laravel, para que puedas construir páginas interactivas que se sientan como una aplicación de una sola página sin necesidad de una API personalizada. Esto significa que obtienes las características reactivas del frontend de Vue mientras Laravel maneja toda la lógica del backend.

El kit incluye la Vue 3 API de composición, TypeScript para un código más seguro, TailwindCSS para un estilo rápido, y shadcn/ui para componentes de interfaz de usuario reutilizables. Juntos, te dan una configuración limpia que hace que la construcción de interfaces responsivas sea sencilla y flexible.

Diseños y variantes

La mayor parte del código frontend de Vue vive en resources/jsorganizado para facilitar la búsqueda y personalización de componentes, páginas, diseños y hooks. Por defecto, la aplicación utiliza un diseño de barra lateral, pero puedes cambiar a un diseño de cabecera cambiando la importación en la parte superior de resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

El diseño de la barra lateral tiene tres variantes: predeterminada, insertada y flotante. Puede elegir la que mejor funcione actualizando el parámetro variant prop en resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Las páginas de autenticación -como inicio de sesión, registro y restablecimiento de contraseña- también tienen tres opciones de diseño: simple, tarjeta y dividida. Para cambiar entre ellas, basta con actualizar la importación en la parte superior de resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Al igual que React, los componentes son reutilizables, por lo que cambiar el diseño o los elementos de la interfaz de usuario no requiere reescribir las páginas.

Kit de inicio Livewire

Si prefiere un Modelo-Vista-Controlador utilizando el motor de plantillas Blade de Laravel, el kit de inicio Livewire starter kit es una buena opción. Livewire contiene un poco de magia salpicada en sus plantillas, en el sentido de que hará que su JavaScript de acuerdo a Componentes Laravel Livewire (esencialmente un controlador con el estado y un conjunto integrado de métodos de la API para instruir al DOM cuando actualizar). Esto mantiene su código más simple al tiempo que permite a sus páginas para responder a la entrada del usuario en tiempo real. El kit también incluye TailwindCSS para estilizar y el Flux UI para elementos de interfaz reutilizables.

La mayor parte del código del frontend está en resources/viewsmientras que la lógica backend de los componentes Livewire está en app/Livewire. Encontrarás componentes Blade reutilizables, componentes Flux, componentes Livewire específicos de página y parciales, todos organizados para que puedas modificarlos o ampliarlos fácilmente.

Diseños y variantes

El kit de inicio de Livewire viene con dos diseños principales: barra lateral (por defecto) y cabecera. Puede cambiar entre ellos actualizando el componente Blade utilizado en resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

Las páginas de autenticación (inicio de sesión, registro y restablecimiento de contraseña) también incluyen tres opciones de diseño: simple, tarjeta y dividida. Para pasar de una a otra, basta con cambiar el componente Blade de la etiqueta resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

Al igual que React y Vue, los componentes reutilizables y los diseños modulares de Livewire facilitan la experimentación con diferentes aspectos sin tener que reescribir las páginas desde cero.

Conclusión

Los kits de inicio de Laravel 12 te ofrecen una base sólida, independientemente del frontend que elijas. React es ideal para aplicaciones completas de una sola página, Vue es flexible y fácil de usar para principiantes, y Livewire mantiene las cosas principalmente en PHP y Blade sin dejar de soportar interfaces dinámicas y reactivas. Los tres kits incluyen componentes reutilizables, diseños modulares y estilos integrados, lo que facilita la experimentación con diseños sin tener que reescribir las páginas. Para los que realmente no les gusta escribir código frontend y han optado por Livewire, también pueden añadir Laravel Echo y Reverb para iniciar tus propios servidores Websocket.

Si estás empezando con Laravel, hay un montón de recursos disponibles para principiantes. Escuche a los miembros de la comunidad Laravel compartir sus recomendaciones favoritas.