Laravel + Inertia + Vue 3 – Mostrar una lista de 5 tareas (sin guardar)

 

Laravel + Inertia + Vue 3 – Mostrar una lista de 5 tareas (sin guardar)

En este tutorial construiremos un ejemplo muy pequeño que solo muestra una lista de 5 tareas (con id y nombre) usando Laravel, Inertia.js y Vue 3. No incluiremos formularios ni guardado, para que entiendas claramente cómo se obtienen y pasan los datos desde el controlador al componente Vue a través de Inertia.

Compararemos paso a paso con el enfoque tradicional (Blade) para que veas las diferencias.

1. Estructura de archivos

text
routes/web.php                          → ruta
app/Http/Controllers/TareaController.php → controlador
resources/js/Pages/Tareas.vue           → componente Vue

2. Crear el proyecto (si no lo tienes)

Si ya tienes un proyecto con Inertia + Vue, salta este paso. Si no:

bash
composer create-project laravel/laravel ejemplo-inertia-vue
cd ejemplo-inertia-vue
composer require inertiajs/inertia-laravel
php artisan inertia:middleware
npm install @inertiajs/vue3 @vitejs/plugin-vue vue

Configura Vite para Vue. Edita vite.config.js:

javascript
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(),
    ],
});

Crea resources/js/app.js como punto de entrada:

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

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

Actualiza resources/views/app.blade.php para usar el layout de Inertia (asegúrate de que incluya @vite y @inertia).

3. Ruta (web.php)

php
<?php

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

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

Solo necesitamos una ruta GET para mostrar la lista.

4. Controlador (TareaController.php)

php
<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class TareaController extends Controller
{
    public function index()
    {
        // Arreglo fijo de 5 tareas (simulando datos)
        $tareas = [
            ['id' => 1, 'nombre' => 'Aprender Laravel'],
            ['id' => 2, 'nombre' => 'Estudiar Inertia'],
            ['id' => 3, 'nombre' => 'Practicar Vue 3'],
            ['id' => 4, 'nombre' => 'Hacer un ejemplo'],
            ['id' => 5, 'nombre' => 'Compartir conocimiento'],
        ];

        // Renderizar el componente Vue 'Tareas' y pasarle las tareas como prop
        return Inertia::render('Tareas', [
            'tareas' => $tareas
        ]);
    }
}

Explicación:

  • El método index() crea un arreglo con 5 tareas (podrían venir de una base de datos).

  • Inertia::render('Tareas', ['tareas' => $tareas]) le dice a Inertia que cargue el componente Tareas.vue y le pase la variable tareas como propiedad (prop).

5. Componente Vue (Tareas.vue)

Crea resources/js/Pages/Tareas.vue:

vue
<template>
  <div style="max-width: 600px; margin: 40px auto; padding: 20px; font-family: sans-serif;">
    <h1>📋 Lista de Tareas</h1>

    <ul v-if="tareas.length" style="list-style: none; padding: 0;">
      <li 
        v-for="tarea in tareas" 
        :key="tarea.id" 
        style="background: #f0f0f0; margin: 5px 0; padding: 10px; border-radius: 4px;"
      >
        <strong>ID:</strong> {{ tarea.id }} - <strong>Nombre:</strong> {{ tarea.nombre }}
      </li>
    </ul>
    <p v-else style="color: #888;">No hay tareas.</p>
  </div>
</template>

<script setup>
defineProps({
  tareas: Array
})
</script>

Explicación:

  • El componente recibe tareas como prop (gracias a Inertia).

  • Usamos v-for para iterar sobre el arreglo y mostrar cada tarea.

  • No hay formulario, ni botones, ni interacción. Solo muestra datos.

6. Flujo de obtención de datos

  1. El usuario visita /tareas.

  2. Laravel enruta la petición al controlador TareaController@index.

  3. El controlador crea el arreglo $tareas y lo pasa a Inertia::render().

  4. Inertia serializa los datos y los envía al frontend junto con el nombre del componente.

  5. El frontend (Vue) renderiza el componente Tareas y le inyecta la prop tareas.

  6. El usuario ve la lista en pantalla.

No hay recarga de página (es un SPA, aunque la primera carga es completa).
No se usa AJAX manual; Inertia se encarga de la comunicación.

7. Comparativa con el enfoque tradicional (Blade)

Si usáramos Blade sin Inertia, haríamos lo siguiente:

Controlador (igual, pero devolviendo vista)

php
public function index()
{
    $tareas = [...]; // mismo arreglo
    return view('tareas.index', compact('tareas'));
}

Vista Blade (resources/views/tareas/index.blade.php)

blade
<!DOCTYPE html>
<html>
<head><title>Tareas</title></head>
<body>
    <h1>📋 Lista de Tareas</h1>
    <ul>
        @foreach($tareas as $tarea)
            <li>ID: {{ $tarea['id'] }} - Nombre: {{ $tarea['nombre'] }}</li>
        @endforeach
    </ul>
</body>
</html>

Diferencias clave

AspectoBlade (tradicional)Inertia + Vue
RenderizadoEl servidor genera HTML completo y lo envía.El servidor envía solo los datos (JSON) y el frontend renderiza el componente.
Actualización de datosPara cambiar la lista (ej. agregar), habría que recargar toda la página.Inertia permite actualizar solo los datos y re-renderizar el componente sin recarga total (si se implementa guardado).
Manejo de estadoEl estado vive en el servidor (sesión, BD) y se refleja al recargar.El estado puede mantenerse en el frontend y sincronizarse con el servidor mediante peticiones.
InteractividadPara acciones dinámicas (ej. filtros), se necesita JavaScript adicional o recargas.Inertia facilita la interacción sin recargas, usando componentes reactivos (Vue).
Curva de aprendizajeSolo PHP y Blade (más sencillo para empezar).Requiere conocer Vue y el ecosistema de Inertia, pero aporta mayor dinamismo.

En este ejemplo solo mostramos datos, por lo que la diferencia no es tan evidente, pero sienta las bases para cuando agregues guardado o edición.

8. ¿Cómo se obtienen los datos en Inertia?

  • El controlador devuelve un array asociativo con las props que quieras pasar al componente.

  • Inertia convierte ese array en un objeto JSON y lo envía al cliente junto con el nombre del componente.

  • El cliente (Vue) recibe esas props y las usa para renderizar.

No necesitas crear una API REST; usas las rutas y controladores normales de Laravel, y Inertia se encarga del “puente”.

9. Prueba el ejemplo

  1. Ejecuta php artisan serve y npm run dev.

  2. Ve a http://localhost:8000/tareas.

  3. Verás la lista de 5 tareas.

¡Listo! Un ejemplo mínimo, sin guardado, que muestra cómo obtener y mostrar datos con Inertia + Vue.

Conclusión

Este ejemplo te muestra la base de Inertia: el controlador entrega datos, el componente los recibe y los pinta. La diferencia con Blade es que aquí tienes un frontend reactivo (Vue) y la comunicación es más eficiente, aunque para solo mostrar datos la complejidad es similar. La verdadera potencia aparece cuando empiezas a agregar interacciones (guardar, editar, eliminar) sin recargar la página, manteniendo la lógica en Laravel

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tareas con Laravel + Inertia + Jetstream

  Tareas con Laravel + Inertia + Jetstream 📋 Descripción del Proyecto Aplicación ultra simple de tareas: ✅ Agregar una tarea ✅ Ver una tarea guardada ✅ Almacenar en arreglo (sesión) ❌ Sin listas largas, sin editar, sin eliminar 🚀 1. INSTALACIÓN (PASO A PASO) 1.1 Crear proyecto bash # Crear proyecto Laravel 10 (compatible con PHP 8.0+) composer create-project laravel/laravel:^10.0 tareas-app composer create-project laravel/laravel tareas-app cd tareas-app 1.2 Instalar Jetstream con Inertia bash # Instalar Jetstream composer require laravel/jetstream # Instalar Jetstream con Inertia (sin equipos) php artisan jetstream:install inertia 1.3 Instalar dependencias frontend bash # Instalar paquetes NPM npm install # Compilar assets npm run build 1.4 Configurar entorno bash # Crear archivo .env cp .env.example .env copy .env.example .env # Generar clave php artisan key:generate # Configurar base de datos SQLite touch database/database.sqlite type nul > databas...
Leer más

HACER CAMBIOS-AL EJEMPLO POR DEFECTO

  Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz. Aquí tienes un tutorial paso a paso para hacer tus primeros cambios. 🚀 Entendiendo la Estructura del Proyecto Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php . En su lugar, es un componente de frontend gestionado por Inertia . El punto de entrada del frontend : El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia . El componente principal : La página de inicio se encuentra en resources/js/Page...
Leer más

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 \ ...
Leer más