Manejo de formularios en Laravel Inertia con Vue

Los formularios son los los componentes empleados por excelencia para obtener datos por parte del usuario, y son una de las características principales que tenemos en Laravel Inertia, los podemos usar perfectamente manteniendo el esquema clásico de Laravel en el servidor, pero, usando Vue con Inertia desde el cliente.

Trabajar con un formulario en Laravel Inertia es una de las mejores maneras de combinar la solidez del backend de Laravel con la fluidez de Vue en el cliente.
Cuando empecé a trabajar con Inertia, algo que realmente me sorprendió fue lo natural que resulta manejar formularios: se sienten como los formularios tradicionales de Laravel, pero con las ventajas de una SPA, sin tener que construir una API completa.

En esta guía te muestro exactamente cómo implementar un formulario tanto para crear como para editar registros, incluyendo:

• controladores en Laravel
• validación
• props
• manejo de errores

Los formularios son una herramienta fundamental para recolectar información del usuario. Cuando hablamos del proceso de actualización, solemos partir desde un listado en el cual el usuario elige qué registro desea modificar.
Al seleccionar un elemento, la aplicación lo redirige al formulario de edición. Este formulario ya incluye el identificador del registro, que normalmente viaja en la URL y que permite al backend saber qué datos deben cargarse desde la base de datos.

Tal como en cualquier formulario HTML, podemos incluir cualquier tipo de campo: inputs, selects, textareas, uploads, etc.
La diferencia clave con Inertia es que todo fluye como una SPA, sin recargas completas, manteniendo la simplicidad del ciclo de vida típico de Laravel.

Una vez que el usuario ha editado la información del formulario, puede enviar el formulario haciendo clic en un botón "Actualizar" o “Enviar” para que Laravel se encargue de las validaciones y posterior guardado en la base de datos si los datos son correctos o mostrar los errores de validación.

Laravel Inertia no es más que un scaffolding o esqueleto para Laravel, que agrega funcionalidades a un proyecto en Laravel para poder integrar Vue como tecnología del cliente, con Laravel, como tecnología en el servidor.

1. ¿Laravel Inertia y por qué facilita el manejo de formularios?

Inertia es un puente que elimina el típico divorcio entre backend y frontend. Técnicamente no es un framework, sino un scaffolding que permite usar Vue, React o Svelte como vistas, mientras Laravel sigue controlando rutas, controllers y validación.

Cómo se integra Vue y Laravel en un mismo flujo

En mi caso, describo Inertia como “Vue con esteroides”, porque puedo seguir usando mis controladores de Laravel tal cual, pero en vez de devolver una view(), devuelvo un inertia(), que muestra un componente Vue con datos incluidos.

Ventajas reales al crear formularios dinámicos

• Puedes usar v-model como en cualquier app Vue.
• Puedes enviar formularios con Inertia.post/put/delete sin recargar la página.
• Laravel sigue manejando validación con FormRequest.
• El estado del formulario (errores, processing, etc.) lo maneja useForm.

Inertia facilita mucho el proceso de manejo de formularios con Vue, ya que, no tenemos que implementar una Rest Api y mediante el objeto useForm facilita el proceso de validaciones.

2. Preparar el controlador en Laravel para manejar formularios

En Laravel, en un controlador que trabaja con las categorías, vamos a crear los métodos para presentar el componente en Vue, mediante la función de inertia() en vez de la función clásica de view() que permite renderizar un componente en Vue.

Método create() y envío de datos al componente

Y la función de store, para almacenar los datos de la categoría en la base de datos; es decir, crear la categoría:

app/Http/Controllers/Dashboard/CategoryController.php

<?php
namespace App\Http\Controllers\Dashboard;
use App\Http\Controllers\Controller;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
    public function create()
    {
        return inertia("Dashboard/Category/Create");
    }
}

Método store() para guardar registros con Inertia

En mis proyectos suelo procesar así:

class CategoryController extends Controller
{
    public function store(Request $request)
    {
        Category::create(
            [
                'title' => request('title'),
                'slug' => request('slug'),
            ]
            );
        dd($request->all());
    }
}

3. Crear un formulario básico en Inertia con Vue

Se crea el formulario con sus v-model respectivos y proceso el submit para enviar el formulario al método anterior:

resources/js/Pages/Dashboard/Category/Create.vue

<template>
  <form @submit.prevent="submit">
    <label for="">Title</label>
    <input type="text" v-model="form.title" />
    <label for="">Slug</label>
    <input type="text" v-model="form.slug" />
    <button type="submit">Send</button>
  </form>
</template>

Para el apartado de script, usamos la función de useForm() con la cual nos permite manejar de una manera sencilla el formulario, es un helper que, facilita el manejo de errores y estado del formulario en general:

array:10 [
  "title" => "Test"
  "slug" => "test-slug"
  "isDirty" => true
  "errors" => []
  "hasErrors" => false
  "processing" => false
  "progress" => null
  "wasSuccessful" => false
  "recentlySuccessful" => false
  "__rememberable" => true
]

Enviar datos usando useForm e Inertia.post

Finalmente, tenemos el uso de las funciones get, post, put, path o delete, mediante el objeto de Inertia en JavaScript que usamos para enviar el formulario:

<script>
import { Inertia } from "@inertiajs/inertia";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
  setup() {
    const form = useForm({
      title: null,
      slug: null,
    });
    function submit() {
      Inertia.post(route("category.store"), form);
    }
    return { form, submit };
  },
};
</script>

Manejo de estados: processing, errors, wasSuccessful

Esto lo entrega automáticamente el helper:

form.processing
form.errors
form.wasSuccessful

Y se sincroniza sin que tengas que manejar manualmente ningún estado.

Editar registros en base a evento click

▶

Editar un elemento directamente en el listado —sin usar modales ni pantallas adicionales— es una experiencia muy fluida para el usuario y extremadamente sencilla de implementar con Vue e Inertia.

En este caso, la idea es que cuando el usuario haga clic sobre el nombre de un to-do, ese <span> sea reemplazado por un <input> para permitir la edición inline. Al presionar Enter, se envía la actualización al servidor utilizando Inertia.

A continuación te explico paso a paso cómo implementarlo.

1. Modificar el listado para habilitar el modo edición

Archivo: resources/js/Pages/Todo/Index.vue

<li v-for="t in todos" class="border py-3 px-4 mt-2" :key="t">
 <span v-show="!t.editMode" @click="t.editMode = true">
   {{ t.name }}
 </span>
 <TextInput
   v-show="t.editMode"
   v-model="t.name"
   @keyup.enter="update(t)"
 />
 <button @click="remove" class="float-right">
   ***
 </button>
</li>

Explicación

A cada to-do le agregamos una propiedad adicional llamada editMode, la cual no existe en el modelo, sino que se añade dinámicamente del lado del cliente.

• editMode === true → Se muestra el <input> para editar.
• editMode === false → Se muestra el <span> con el nombre del to-do.

Gracias a la reactividad de Vue, cambiar editMode o el name se refleja automáticamente en la interfaz.

Comportamiento

Cuando el usuario hace clic en el <span>, se activa el modo edición.

Cuando presiona Enter dentro del <input>, se ejecuta el método update(t).

2. Método update en el cliente (Vue + Inertia)

update(todo) {
 todo.editMode = false;
 router.put(route("todo.update", todo.id), {
   name: todo.name,
 });
},

¿Qué ocurre aquí?

Se desactiva el modo edición (editMode = false).

Se envía una petición PUT al backend utilizando Inertia.router.put.

Se envía el nuevo nombre del to-do.

Esto permite una experiencia fluida y sin recargas completas de página.

3. Controlador en Laravel

Archivo: app/Http/Controllers/TodoController.php

public function update(Todo $todo, Request $request)
{
   $request->validate([
       'name' => 'required|string|max:255'
   ]);
   Todo::where("id", $todo->id)
       ->where('user_id', auth()->id())
       ->update([
           'name' => $request->name,
       ]);
   return back();
}

Puntos importantes:

• Se valida el campo name.
• Se garantiza que solo el usuario dueño del to-do pueda editarlo (where('user_id', auth()->id())).
• Se actualiza únicamente el nombre.

4. Definir la ruta de actualización

Archivo: routes/web.php

Route::group([
   'prefix' => 'todo',
   'middleware' => ['auth:sanctum', config('jetstream.auth_session'), 'verified']
], function () {
   Route::get('/', [TodoController::class, 'index'])->name('todo.index');
   Route::post('store', [TodoController::class, 'store'])->name('todo.store');
   Route::put('update/{todo}', [TodoController::class, 'update'])->name('todo.update');
});

El siguiente paso, es que aprendas como implementar carga de archivos con Drag and Drop en Laravel Inertia.