lunes 18 noviembre 2024

Cómo usar Inertia.js en Laravel para construir aplicaciones web modernas

Inertia.js es una biblioteca que permite construir aplicaciones web de una sola página (SPA) usando servidores tradicionales. En Laravel, Inertia actúa como un puente entre las rutas del backend y los componentes de frontend, simplificando el desarrollo de aplicaciones modernas sin necesidad de configurar APIs complejas.

¿Qué es Inertia.js?

Inertia.js permite utilizar frameworks de frontend como Vue, React o Svelte junto con Laravel, sin la necesidad de una API REST o GraphQL. En lugar de retornar vistas Blade, las rutas de Laravel devuelven componentes de frontend, permitiendo una experiencia de SPA con navegación fluida.

Instalación de Inertia.js en Laravel

1. Instalar Inertia.js y configuraciones iniciales

1. Instalar Laravel Breeze o Jetstream

Para empezar con Inertia.js de forma sencilla, puedes usar Laravel Breeze o Jetstream, que incluyen Inertia.js preconfigurado:

composer require laravel/breeze --dev
   php artisan breeze:install vue --inertia
   npm install && npm run dev
   php artisan migrate

Esto configura Laravel con Vue e Inertia.js.

2. Instalar Inertia.js manualmente

Si prefieres agregar Inertia.js a un proyecto existente:

Instala la librería de Laravel:

composer require inertiajs/inertia-laravel

Instala el cliente de frontend:

npm install @inertiajs/inertia @inertiajs/inertia-vue3

2. Configurar middleware

Agrega el middleware de Inertia a la pila de middleware en app/Http/Kernel.php:

protected $middlewareGroups = [
    'web' => [
        // Otros middlewares...
        \Inertia\Middleware::class,
    ],
];

3. Configurar el frontend

Configura tu archivo principal de JavaScript para inicializar Inertia:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
    resolve: name => require(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

Asegúrate de que las vistas de Laravel apunten a un archivo Blade con el contenedor de Inertia, como resources/views/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inertia App</title>
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
    @inertia
</body>
</html>

Cómo usar Inertia.js

Enviar una vista desde Laravel

En lugar de retornar una vista Blade, usa el helper Inertia::render para devolver un componente de frontend:

use Inertia\Inertia;

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard', [
        'user' => Auth::user(),
    ]);
});

Este ejemplo devuelve un componente Vue ubicado en resources/js/Pages/Dashboard.vue.

Pasar datos al componente

Puedes pasar datos desde el backend al componente como parte del segundo argumento de Inertia::render:

return Inertia::render('Posts/Index', [
    'posts' => Post::latest()->get(),
]);

En el componente Vue, estos datos estarán disponibles como props:

<template>
    <div>
        <h1>Lista de Posts</h1>
        <ul>
            <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        posts: Array,
    },
};
</script>

Redirecciones y mensajes flash

Para redirigir o agregar mensajes flash desde el backend, usa los helpers estándar de Laravel:

return redirect()->route('posts.index')->with('success', 'Post creado con éxito');

En el frontend, puedes acceder a los mensajes flash usando $page.props:

<template>
    <div>
        <p v-if="success">{{ success }}</p>
    </div>
</template>

<script>
export default {
    props: {
        success: String,
    },
};
</script>

Ventajas de usar Inertia.js en Laravel

1. Sin necesidad de APIs complejas: No necesitas crear una API REST, ya que Inertia usa las rutas del servidor directamente.

2. Experiencia fluida de SPA: La navegación entre páginas es rápida y fluida, similar a una aplicación de frontend moderna.

3. Compatibilidad con Vue, React y Svelte: Elige el framework de frontend que prefieras.

4. Organización del código: Permite dividir el frontend en componentes reutilizables y bien estructurados.

Referencias oficiales

Para más detalles, visita la documentación oficial de Inertia.js y la guía de integración con Laravel.

Etiquetas:

php javascript vue laravel

Creado por:

Jorge García

Fullstack developer