Laravel + Inertia - ejemplo

 Perfecto! Vamos a construir un ejemplo mínimo y funcional con Laravel + Inertia + Vue 3.

El ejemplo tendrá:

• Un input para escribir una tarea.

• Un botón para guardar esa tarea.

• La tarea se almacenará en sesión (para no complicar con base de datos) y se mostrará debajo.

---

1. Estructura de archivos que vamos a tocar

text

routes/web.php          → ruta principal
app/Http/Controllers/TareaController.php  → controlador
resources/js/Pages/Tarea.vue  → componente Vue (la vista)

---

2. Ruta y Controlador

routes/web.php

php

<?php

use App\Http\Controllers\TareaController;
use Illuminate\Support\Facades\Route;

Route::get('/tarea', [TareaController::class, 'index'])->name('tarea.index');
Route::post('/tarea', [TareaController::class, 'store'])->name('tarea.store');

app/Http/Controllers/TareaController.php

php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class TareaController extends Controller
{
    public function index()
    {
        // Recuperar la tarea guardada en sesión (si existe)
        $tarea = session('tarea', '');

        return Inertia::render('Tarea', [
            'tarea' => $tarea
        ]);
    }

    public function store(Request $request)
    {
        // Validar que el campo no esté vacío
        $request->validate([
            'tarea' => 'required|string|max:255'
        ]);

        // Guardar en sesión
        session(['tarea' => $request->tarea]);

        // Redirigir de vuelta a la página (Inertia hará el resto)
        return redirect()->route('tarea.index');
    }
}

---

3. El componente Vue (Tarea.vue)

resources/js/Pages/Tarea.vue

vue

<template>
  <div style="max-width: 500px; margin: 40px auto; padding: 20px; font-family: sans-serif;">
    <h1>📋 Mi Tarea</h1>

    <!-- Formulario que usa Inertia para enviar por POST -->
    <form @submit.prevent="guardarTarea">
      <input
        type="text"
        v-model="form.tarea"
        placeholder="Escribe una tarea..."
        style="width: 70%; padding: 8px;"
      />
      <button type="submit" style="padding: 8px 16px; margin-left: 8px;">
        Guardar
      </button>
    </form>

    <!-- Mostrar la tarea guardada -->
    <div v-if="tarea" style="margin-top: 20px; background: #f0f0f0; padding: 12px; border-radius: 8px;">
      <strong>Tarea actual:</strong> {{ tarea }}
    </div>
    <p v-else style="margin-top: 20px; color: #888;">No hay tarea guardada.</p>
  </div>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3';

// Recibimos la propiedad 'tarea' desde el controlador
defineProps({
  tarea: String
});

// Creamos el formulario con Inertia
const form = useForm({
  tarea: ''
});

function guardarTarea() {
  // Enviamos el formulario a la ruta POST /tarea
  form.post('/tarea', {
    preserveState: true,  // Mantiene el valor del input después del envío
    onSuccess: () => {
      // Opcional: limpiar el input después de guardar
      form.tarea = '';
    }
  });
}
</script>

---

4. Explicación del flujo

1. El usuario entra a /tarea.

2. El controlador index() devuelve la vista Tarea con la propiedad tarea (recuperada de sesión).

3. El usuario escribe en el input y hace clic en "Guardar".

4. Se dispara guardarTarea(), que usa form.post() (método de Inertia) para enviar una petición POST a /tarea.

5. Laravel recibe la petición, valida, guarda en sesión y redirige a tarea.index.

6. Inertia captura esa redirección, hace una nueva petición GET a /tarea (automáticamente) y actualiza la página sin recargar (solo cambia el componente).

7. El nuevo valor de tarea se refleja en la vista.

---

5. Notas importantes

• Sin API: No creamos ningún endpoint JSON, usamos rutas normales de Laravel.

• Sin enrutador frontend: La navegación la maneja el servidor, Inertia solo intercepta las respuestas.

• Persistencia: Usamos sesión para simplificar, pero podrías usar una base de datos con un modelo Task sin cambiar la lógica.

• Validación: Si falla, Inertia devuelve automáticamente los errores a form.errors (puedes mostrarlos si quieres).

---

Con esto tienes un ejemplo completo, funcional y mínimo de Inertia en Laravel.
Puedes probarlo creando un proyecto nuevo con laravel new proyecto --inertia=vue y luego agregar estos archivos. ¡Funciona a la primera!