Características de un proyecto Laravel Inertia

▶

Si revisamos los controladores HTTP, ya tenemos todo listo para la autenticación. No hay mucho misterio, es muy similar a lo que teníamos, por ejemplo, con Breeze (que, por cierto, fue eliminado).

Esto es lo que tenemos: un poco de lógica y componentes de Inertia para renderizar vistas. Esto lo explicaremos un poco más adelante, pero por ahora vamos a hacer una revisión general.

Renderizado con Inertia

Alerta de spoiler: Inertia sirve para renderizar componentes en Vue (o React, si así lo decides). En este caso usamos Vue. Esto es el núcleo de Inertia: simplemente renderizar componentes en lugar de usar archivos Blade.

Lo mismo ocurre en todas las vistas que renderizamos, como puedes comprobar si inspeccionas los controladores. Los nombres son bastante descriptivos y reflejan bien la operación que realizan. Básicamente, tenemos un módulo completo de autenticación: login, registro, recuperación de contraseña, etc. Nada del otro mundo.

Vistas controladas por controladores

Algo importante es que, en Inertia, las vistas se renderizan mediante controladores, no directamente por componentes como podrías hacer en Laravel “puro” (o Blade). Si quieres renderizar algo, por defecto lo haces mediante controladores, como lo estamos haciendo aquí.

Middleware y mensajes globales

Este archivo también es importante, ya que actúa como un middleware, es decir, un intermediario. Lo utilizamos cuando queremos pasar algo a los componentes. Más adelante lo usaremos para enviar los mensajes flash, que son esos mensajes temporales que se muestran después de realizar alguna acción (por ejemplo, guardar un formulario con éxito).

Aquí es donde configuramos esos datos que queremos enviar de forma global a todas las vistas.

Modelo de usuario y autenticación

El modelo de usuario es totalmente básico, con los traits de Authenticatable, HasFactory, Notifiable, y alguno que otro más. También hay un Provider, que parece prestado, pero no hay mucho más misterio por aquí.

¿Dónde están las vistas?

Si revisamos la carpeta resources/views, verás que solo hay una vista. Hacemos una pausa aquí para explicar esto: ya te conté que usamos controladores y que renderizamos componentes Vue. Entonces, ¿dónde están las demás vistas?

Respuesta: ya te lo adelanté… ¡son componentes en Vue!

Solo tenemos una vista Blade, pero hay muchas vistas renderizadas a través de componentes Vue.

Por cada página que ves, hay un componente detrás. Y están organizados así:

Pages: contiene las páginas completas.

Components: contiene las piezas reutilizables con las que se arman esas páginas.

La estructura está bastante bien modularizada.

Layouts y estructura de la aplicación

También tenemos la carpeta Layouts, que contiene estructuras comunes para las páginas.

Si abrimos el archivo de arranque (app.ts o app.js), veremos cómo se inicializa la aplicación.

También tenemos el App.blade.php, que es el único archivo Blade, y lo estamos importando como plantilla principal. Inertia ya lo rastrea automáticamente, así que no debes moverlo ni cambiarle el nombre.

Inicialización de la app con Inertia

El arranque de la app es similar al de cualquier proyecto en Vue:

Usamos createApp, aunque aquí viene personalizado.

Se indica la ruta donde están nuestras páginas.

Se define dónde se van a montar los componentes.

Se configuran plugins personalizados (como la barra de progreso de navegación):

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(Oruga)
            .use(CkeditorPlugin)
            .use(ZiggyVue)
            .mount(el);

Todo esto ocurre en el archivo de arranque.

Ubicación y uso de los componentes

Como ya vimos, las páginas están en la carpeta Pages, y los elementos reutilizables están en Components. Puedes ver todo lo que se está utilizando y también puedes reutilizarlos tú mismo.

Manejo de formularios con Inertia

Una diferencia importante respecto a una aplicación Vue tradicional es el manejo de datos. Aquí no usamos axios directamente. En su lugar, usamos un mecanismo interno de Inertia llamado useForm.

Este useForm lo importamos y utilizamos directamente para manejar formularios y datos de manera más limpia. Aquí definimos los datos del formulario, el envío, y cualquier otra lógica relacionada.