2. Instalación y configuración inicial

Instalación y configuración inicial

En esta guía, aprenderemos a configurar Inertia.js con Laravel y Vue 3 desde cero. Seguiremos un proceso paso a paso para asegurarnos de que todos los componentes estén correctamente integrados.

Requisitos previos: Laravel y Vue 3

Antes de comenzar con la instalación de Inertia.js, necesitamos asegurarnos de tener los siguientes requisitos:

Laravel

Necesitas tener instalado Laravel 8.x o superior. Puedes crear un nuevo proyecto de Laravel con:

composer create-project laravel/laravel nombre-proyecto
cd nombre-proyecto

Node.js y NPM

Asegúrate de tener Node.js (v14 o superior) y npm instalados en tu sistema:

node -v
npm -v

Vue 3

Inertia.js funciona con varios frameworks frontend, pero en esta guía nos centraremos en Vue 3. Para instalar Vue 3 en tu proyecto Laravel:

npm install vue@next

Instalación de paquetes de Inertia (Laravel Adapter y Vue Adapter)

Inertia.js requiere dos componentes principales: un adaptador para el servidor (Laravel) y otro para el cliente (Vue).

1. Instalación del adaptador para Laravel

Primero, instala el paquete de Inertia para Laravel usando Composer:

composer require inertiajs/inertia-laravel

2. Instalación del adaptador para Vue 3

A continuación, instala el paquete de Inertia para Vue 3:

npm install @inertiajs/vue3

3. Instalación de dependencias adicionales

También necesitamos algunas dependencias adicionales para el desarrollo:

npm install laravel-vite-plugin @vitejs/plugin-vue -D

Configuración del middleware HandleInertiaRequests

Inertia.js requiere un middleware para gestionar las solicitudes y respuestas. Este middleware se encarga de determinar si una solicitud es una solicitud Inertia y de proporcionar datos compartidos a todas las vistas.

1. Crear el middleware

Puedes publicar el middleware predeterminado con:

php artisan inertia:middleware

Esto creará un nuevo archivo en app/Http/Middleware/HandleInertiaRequests.php.

2. Registrar el middleware

Ahora, registra el middleware en tu archivo app/Http/Kernel.php añadiéndolo al grupo web:

protected $middlewareGroups = [
  'web' => [
      // ... otros middlewares
      AppHttpMiddlewareHandleInertiaRequests::class,
  ],
];

3. Configurar props compartidas

El middleware HandleInertiaRequests incluye un método share() que te permite definir datos que estarán disponibles en todas las páginas de tu aplicación:

public function share(Request $request): array
{
  return [
      'auth' => [
          'user' => $request->user() ? [
              'id' => $request->user()->id,
              'name' => $request->user()->name,
              'email' => $request->user()->email,
          ] : null,
      ],
      'flash' => [
          'message' => fn () => $request->session()->get('message'),
          'error' => fn () => $request->session()->get('error'),
      ],
      // Agrega aquí más datos compartidos
  ];
}

Configuración de app.js en Vue y Laravel

Ahora necesitamos configurar el punto de entrada de nuestra aplicación JavaScript para inicializar Inertia.js con Vue 3.

1. Configurar Vite

Primero, actualiza tu archivo vite.config.js para incluir el plugin de Vue:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
      laravel({
          input: ['resources/css/app.css', 'resources/js/app.js'],
          refresh: true,
      }),
      vue({
          template: {
              transformAssetUrls: {
                  base: null,
                  includeAbsolute: false,
              },
          },
      }),
  ],
  resolve: {
      alias: {
          '@': '/resources/js',
      },
  },
});

2. Crear el archivo app.js

Crea o actualiza tu archivo resources/js/app.js para inicializar Inertia.js con Vue 3:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  // La función resolve indica cómo cargar los componentes de página
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),

  // Configura el elemento raíz donde se montará la aplicación
  setup({ el, App, props, plugin }) {
      createApp({ render: () => h(App, props) })
          .use(plugin)
          .mount(el);
  },
});

3. Crear una plantilla base

Crea un archivo de plantilla Blade que servirá como punto de entrada para tu aplicación Inertia:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ config('app.name', 'Laravel') }}</title>

  <!-- Estilos y scripts -->
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  @inertiaHead
</head>
<body>
  @inertia
</body>
</html>

4. Configurar una ruta de prueba

Para verificar que todo funciona correctamente, configura una ruta de prueba en routes/web.php:

use IlluminateSupportFacadesRoute;
use InertiaInertia;

Route::get('/', function () {
  return Inertia::render('Welcome', [
      'title' => 'Mi aplicación con Inertia',
  ]);
});

5. Crear un componente de página

Crea un directorio resources/js/Pages y dentro un archivo Welcome.vue:

<template>
  <div class="container">
      <h1>{{ title }}</h1>
      <p>Bienvenido a tu aplicación con Inertia.js y Vue 3</p>
  </div>
</template>

<script setup>
defineProps({
  title: String,
});
</script>

Compilar y probar

Finalmente, compila los assets y ejecuta el servidor de desarrollo:

Desarrollo
Producción

npm run dev
php artisan serve

npm run build
php artisan serve

Visita http://localhost:8000 en tu navegador y deberías ver tu primera página con Inertia.js funcionando.

Estructura de directorios recomendada

Para mantener tu proyecto organizado, te recomendamos seguir esta estructura de directorios para los componentes de Vue:

resources/js/
├── Components/       # Componentes reutilizables
├── Layouts/          # Layouts de página
├── Pages/            # Componentes de página (rutas)
│   ├── Auth/         # Páginas de autenticación
│   ├── Users/        # Páginas relacionadas con usuarios
│   └── Welcome.vue   # Página de inicio
└── app.js           # Punto de entrada

Esta estructura te ayudará a mantener tu código organizado a medida que tu aplicación crece.

🐝