Inertia el flujo cambia radicalmente porque no necesitas crear un archivo Blade

  Con Inertia el flujo cambia radicalmente porque no necesitas crear un archivo Blade por cada página.

En Vue puro (Breeze sin Inertia), tú creabas un blade.php para poner el <div id="app"> y el componente. En Inertia (Jetstream) solo tienes UN SOLO archivo Blade (el layout base), y todas las "páginas" son archivos .vue dentro de resources/js/Pages/.

Aquí te explico el FLUJO COMPLETO con Inertia, paso a paso y con dibujos.

🏠 PASO 0: El Layout Único (La Base de Todo)

En Inertia, no creas un Blade nuevo para cada vista. Solo existe uno que sirve como contenedor:

blade
{{-- 📁 resources/views/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Mi App')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @inertiaHead
</head>
<body>
    {{-- ¡Este es el único div #app de toda la aplicación! --}}
    <div id="app">
        @inertia
    </div>
</body>
</html>

¿Qué hace @inertia?
Es un "hueco mágico" donde Inertia va a montar la página Vue que le indiques en la ruta.

🔄 FLUJO COMPLETO (Paso a Paso)

Imagina que quieres crear la página /mis-tareas.

Paso 1: CREAR el Componente Reutilizable (Opcional)

Ubicación: resources/js/Components/

vue
{{-- 📁 resources/js/Components/TaskList.vue --}}
<template>
    <div class="grid grid-cols-2 gap-4">
        <div v-for="tarea in tareas" :key="tarea.id" class="bg-white p-4 shadow rounded">
            ✅ {{ tarea.titulo }}
        </div>
    </div>
</template>

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

Paso 2: CREAR la Página Vue (La "Habitación")

Ubicación: resources/js/Pages/

Aquí creas la página completa. Nota: No necesitas poner <div id="app"> porque ya está en el layout base.

vue
{{-- 📁 resources/js/Pages/Tareas/Index.vue --}}
<template>
    {{-- Usas el Layout de Jetstream (el que tiene el menú) --}}
    <AppLayout title="Mis Tareas">
        <div class="p-6">
            <h1 class="text-2xl font-bold mb-4">📋 Mis Tareas</h1>
            
            {{-- Usas el componente reutilizable que creaste --}}
            <TaskList :tareas="tareas" />
        </div>
    </AppLayout>
</template>

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'; // El layout con menú
import TaskList from '@/Components/TaskList.vue'; // Tu componente

// 🔥 LAS "PROPS" VIENEN DEL CONTROLADOR DE LARAVEL
defineProps({
    tareas: Array
});
</script>

Paso 3: CREAR la Ruta (El Mapa)

Ubicación: routes/web.php

php
<?php

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

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

 Crear el Controlador con recursos

bash
php artisan make:controller TareaController --resource

Paso 4: CREAR el Controlador (El Cerebro)

Ubicación: app/Http/Controllers/TareaController.php

php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia; // ← ¡IMPORTA INERTIA!

class TareaController extends Controller
{
    public function index()
    {
        // Datos de ejemplo
        $tareas = [
            ['id' => 1, 'titulo' => 'Aprender Inertia'],
            ['id' => 2, 'titulo' => 'Hacer ejercicio'],
        ];

        // 🔥 ¡AQUÍ ESTÁ LA MAGIA!
        // En lugar de return view('tareas'), usas Inertia::render()
        return Inertia::render('Tareas/Index', [ // ← Apunta al .vue en Pages/
            'tareas' => $tareas // ← Estos datos van a las 'props' de Vue
        ]);
    }
}

Paso 5: (Opcional) REGISTRAR el Componente Globalmente

Ubicación: resources/js/app.js

Si vas a usar TaskList en muchas páginas, regístralo globalmente. Si solo lo usas en una página (como en el Paso 2), no necesitas registrarlo, porque lo importaste directamente en el <script setup>.

Solo si quieres usarlo sin importarlo en cada página:

javascript
// resources/js/app.js
import TaskList from './Components/TaskList.vue';

createInertiaApp({
    // ...
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue);
        
        // Registro global (opcional)
        app.component('task-list', TaskList); 
        
        return app.mount(el);
    },
});

🎨 DIAGRAMA VISUAL DEL FLUJO CON INERTIA

text
┌─────────────────────────────────────────────────────────────────────────────┐
│                           1. EL USUARIO                                    │
│                     Escribe en el navegador:                               │
│                    http://localhost:8000/mis-tareas                       │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                           2. RUTA (web.php)                               │
│                  Busca /mis-tareas y encuentra:                           │
│          Route::get('/mis-tareas', [TareaController::class, 'index']);    │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         3. CONTROLADOR                                    │
│              TareaController@index ejecuta:                               │
│     return Inertia::render('Tareas/Index', ['tareas' => $tareas]);       │
│                                                                           │
│  🔥 Inertia detecta que quieres cargar resources/js/Pages/Tareas/Index.vue│
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                      4. LAYOUT BASE (app.blade.php)                       │
│   Inertia carga el único layout que existe en la app:                     │
│                                                                           │
│  <div id="app">                                                           │
│      @inertia  ← 🔥 Aquí Inertia va a PINTAR tu componente Vue          │
│  </div>                                                                   │
│  @vite('resources/js/app.js')  ← Carga Vue y tus componentes             │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                      5. PÁGINA VUE (Index.vue)                           │
│   Inertia monta tu página en el @inertia:                                │
│                                                                           │
│  <AppLayout>                                                              │
│      <h1>Mis Tareas</h1>                                                 │
│      <TaskList :tareas="tareas" />  ← Usa el componente reutilizable    │
│  </AppLayout>                                                             │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         6. NAVEGADOR                                      │
│               ¡El usuario ve su lista de tareas en 2 columnas!           │
│  ┌───────────────────────────┬───────────────────────────┐               │
│  │  ✅ Aprender Inertia      │  ✅ Hacer ejercicio       │               │
│  └───────────────────────────┴───────────────────────────┘               │
└─────────────────────────────────────────────────────────────────────────────┘

🔑 LAS 3 GRANDES DIFERENCIAS CON EL VUE PURO

CaracterísticaVue Puro (Breeze sin Inertia)Inertia (Jetstream)
Archivos de VistaCreas un blade.php por cada página.Solo existe app.blade.php. Las páginas son .vue.
Carga de datosPasas datos con view('tareas', compact('tareas')).Pasas datos con Inertia::render('Pagina', ['key' => $data]).
Pintado del componentePones <mi-componente></mi-componente> en el Blade.Inertia monta automáticamente la página .vue en el @inertia.
Layout (Menú)Tienes que copiar el menú en cada Blade o usar @extends.Usas AppLayout (un componente Vue) que envuelve todas tus páginas.

✅ RESUMEN PRÁCTICO (El Flujo en 4 pasos)

  1. Crear el componente en resources/js/Components/ (Ej: TaskList.vue).

  2. Crear la página en resources/js/Pages/ (Ej: Tareas/Index.vue). Allí importas el AppLayout y tu TaskList.

  3. Crear el controlador y usar Inertia::render('Tareas/Index', $data).

  4. Crear la ruta en web.php apuntando a ese controlador.

¡Y ya está! No tocas ningún archivo Blade nuevo. Inertia se encarga de todo el "cableado" entre Laravel y Vue.

💡 ¿Y si quiero un componente GLOBAL?

Si quieres usar TaskList en muchas páginas sin tener que importarlo en cada una, regístralo en app.js:

javascript
// resources/js/app.js
import TaskList from './Components/TaskList.vue';

// Dentro de setup({...})
app.component('task-list', TaskList);

Luego en cualquier página de Pages/ lo usas directamente en el template sin importar:

vue
<template>
    <AppLayout>
        <task-list :tareas="tareas" />
    </AppLayout>
</template>

¿Se entiende mejor ahora? Con Inertia, el flujo es: Ruta → Controlador (Inertia::render) → Página Vue (Pages/) → Layout (AppLayout) → ¡Navegador!

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