Laravel Jetstream + Inertia + Vue

 

Tutorial para Principiantes: Laravel Jetstream + Inertia + Vue

¡Hola! Te voy a explicar este tutorial como si fuera tu primera vez programando. No te preocupes si no entiendes todo a la primera, ¡es normal! Vamos paso a paso.

📁 Parte 1: ¿Qué es cada cosa?

Imagina que estás construyendo una casa:

  • Laravel = Los cimientos y la estructura (el "esqueleto" de la casa)

  • Vue = La decoración y muebles (lo que ves y tocas)

  • Inertia = El "ascensor" que conecta los cimientos con la decoración

  • Jetstream = Un "kit de inicio" que ya viene con puertas, ventanas y baño instalados

📂 La Estructura de Archivos (Dónde está cada cosa)

text
📁 resources/
   📁 js/              ← ¡Aquí trabajamos con VUE (el frente de la casa)!
      📁 Components/   ← Piezas reutilizables (como ladrillos)
      📁 Layouts/      ← El diseño general (como el plano de la casa)
      📁 Pages/        ← Las páginas completas (habitaciones enteras)
      📄 app.js        ← El punto de entrada (la puerta principal)
   📁 views/           ← Archivos base de Laravel (los cimientos)

🧩 ¿Qué va en cada carpeta?

  • Components/: Botones, tarjetas, menús pequeños que usas en varias páginas

  • Layouts/: El diseño que se repite (ej: el menú superior que ves en todas las páginas)

  • Pages/: Páginas completas como "Inicio", "Dashboard", "Perfil"

🎯 Parte 2: El Flujo de Trabajo (Cómo crear algo nuevo)

Paso 1: Piensa qué quieres crear

Ejemplo: Quiero una página que muestre mis tareas pendientes.

Paso 2: Crear la Ruta (El "mapa" de la página)

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

Traducción: "Cuando alguien vaya a /tareas, que ejecute el método index del TareaController"

Paso 3: Crear el Controlador (El "cerebro")

bash
# Abre tu terminal y escribe:
php artisan make:controller TareaController

Esto crea un archivo en app/Http/Controllers/TareaController.php

Paso 4: Llenar el Controlador con datos

php
// 📁 app/Http/Controllers/TareaController.php

public function index()
{
    // Obtener las tareas del usuario actual
    $tareas = Tarea::where('user_id', auth()->id())->get();
    
    // Enviar los datos a la página Vue
    return Inertia::render('Tareas', [
        'tareas' => $tareas
    ]);
}

Traducción:

  1. Busca las tareas de este usuario

  2. Envíalas a la página Vue llamada "Tareas"

Paso 5: Crear la Página Vue (Lo que el usuario ve)

Crea un archivo en resources/js/Pages/Tareas.vue

vue
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'; // El diseño con menú
import { Head } from '@inertiajs/vue3';

// Los datos que vienen del controlador
defineProps({
    tareas: Array
});
</script>

<template>
    <AppLayout>
        <Head title="Mis Tareas" />
        
        <div class="p-6">
            <h1 class="text-2xl font-bold">📋 Mis Tareas</h1>
            
            <!-- Mostrar cada tarea -->
            <div v-for="tarea in tareas" :key="tarea.id" class="mt-4 p-4 border rounded">
                ✅ {{ tarea.titulo }}
            </div>
        </div>
    </AppLayout>
</template>

🔥 Parte 3: ¡Los Comandos Mágicos!

Para Desarrollo (Mientras programas):

bash
# Terminal 1: ¡El servidor de Laravel!
php artisan serve
# → Abre http://localhost:8000 en tu navegador

# Terminal 2: ¡El compilador automático!
npm run dev
# → Esto vigila tus archivos y los actualiza al instante

¿Qué hace npm run dev?

  • Detecta cuando guardas un archivo .vue o .js

  • Lo compila automáticamente

  • Actualiza tu navegador SIN recargar la página (¡magia!)

¿Cuándo usar npm run build?

  • Solo cuando vayas a subir tu página a Internet (producción)

  • Para probar cómo quedará tu página comprimida y rápida

  • Si npm run dev no funciona correctamente

🎨 Parte 4: Componentes Reutilizables (Los Ladrillos)

Crear un Componente

vue
<!-- 📁 resources/js/Components/TareaCard.vue -->
<script setup>
// Definir qué datos necesita este componente
defineProps({
    tarea: Object,  // Este componente espera recibir una tarea
    color: String   // Y un color opcional
});
</script>

<template>
    <div class="p-4 border rounded-lg" :style="{ backgroundColor: color || 'white' }">
        <h3 class="font-bold">{{ tarea.titulo }}</h3>
        <p class="text-gray-600">{{ tarea.descripcion }}</p>
        <span :class="tarea.estado === 'completada' ? 'text-green-500' : 'text-yellow-500'">
            {{ tarea.estado }}
        </span>
    </div>
</template>

Usar el Componente en una Página

vue
<script setup>
import TareaCard from '@/Components/TareaCard.vue';
import AppLayout from '@/Layouts/AppLayout.vue';

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

<template>
    <AppLayout>
        <div class="grid grid-cols-3 gap-4 p-6">
            <!-- Usar el componente TareaCard para cada tarea -->
            <TareaCard 
                v-for="tarea in tareas" 
                :key="tarea.id"
                :tarea="tarea"
                color="#f0f9ff"
            />
        </div>
    </AppLayout>
</template>

🎯 Parte 5: El Flujo Completo (Ejemplo Práctico)

Vamos a crear una página de tareas desde cero:

1️⃣ Crear la Migración (La tabla en la base de datos)

bash
php artisan make:model Tarea -m

Esto crea:

  • app/Models/Tarea.php (El modelo)

  • database/migrations/...create_tareas_table.php (La tabla)

2️⃣ Definir la estructura de la tabla

php
// En el archivo de migración
public function up()
{
    Schema::create('tareas', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained();
        $table->string('titulo');
        $table->text('descripcion')->nullable();
        $table->enum('estado', ['pendiente', 'completada'])->default('pendiente');
        $table->timestamps();
    });
}

3️⃣ Ejecutar la migración

bash
php artisan migrate

4️⃣ Crear el Controlador

bash
php artisan make:controller TareaController --resource

5️⃣ Definir las Rutas

php
// routes/web.php
Route::middleware(['auth'])->group(function () {
    Route::resource('tareas', TareaController::class);
});

6️⃣ Crear las Vistas Vue

bash
# Crea estos archivos en resources/js/Pages/Tareas/
touch resources/js/Pages/Tareas/Index.vue
touch resources/js/Pages/Tareas/Create.vue
touch resources/js/Pages/Tareas/Edit.vue

💡 Parte 6: Trucos y Atajos para Principiantes

🔥 Atajos en el Navegador

  • Ctrl + Shift + R (Windows) o Cmd + Shift + R (Mac): Recarga forzada

  • F12 → Network → Disable cache: Desactiva la caché (útil para desarrollo)

🔧 Comandos Útiles

bash
# Ver todas las rutas disponibles
php artisan route:list

# Crear un controlador con métodos CRUD
php artisan make:controller TareaController --resource

# Crear un modelo con migración y controlador
php artisan make:model Tarea -mcr

# Limpiar la caché
php artisan cache:clear
php artisan config:clear
php artisan view:clear

📝 Errores Comunes y Soluciones

ProblemaSolución
"No se encuentra el componente"Reinicia npm run dev
Los cambios no se venCtrl+Shift+R (recarga forzada)
Error de puerto ocupadophp artisan serve --port=8001
Error de compilaciónnpm install y luego npm run dev

🎓 Parte 7: Ejercicio Práctico

Reto: Crea tu primera página completa

  1. Crea la ruta en routes/web.php:

php
Route::get('/mi-primera-pagina', function () {
    return Inertia::render('MiPrimeraPagina', [
        'mensaje' => '¡Hola, mundo!',
        'usuario' => auth()->user()
    ]);
})->name('mi.pagina');

  1. Crea la vista en resources/js/Pages/MiPrimeraPagina.vue:

vue
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Head } from '@inertiajs/vue3';

defineProps({
    mensaje: String,
    usuario: Object
});
</script>

<template>
    <AppLayout>
        <Head title="Mi Primera Página" />
        
        <div class="p-12 text-center">
            <h1 class="text-4xl font-bold text-blue-600">
                {{ mensaje }}
            </h1>
            
            <p class="mt-4 text-xl">
                Bienvenido, {{ usuario?.name || 'Visitante' }}! 🎉
            </p>
            
            <div class="mt-8 p-6 bg-yellow-50 rounded-lg">
                <p class="text-gray-700">
                    ¡Estás viendo tu primera página con Laravel + Vue!
                </p>
            </div>
        </div>
    </AppLayout>
</template>

  1. ¡Abre tu navegador en http://localhost:8000/mi-primera-pagina!

✅ Resumen para Principiantes

ConceptoExplicación Simple
LaravelEl "motor" que maneja la lógica y la base de datos
VueLo que ves en el navegador (interfaz)
InertiaEl "puente" que conecta Laravel y Vue
JetstreamUn proyecto ya empezado con autenticación
npm run devComando mágico que actualiza todo automáticamente
Pages/Páginas completas (cada una es una ruta)
Components/Piezas pequeñas que usas en varias páginas
definePropsCómo recibes datos del backend en Vue

🚀 ¡Próximos Pasos!

  1. Practica: Crea una página con una lista de tareas

  2. Experimenta: Agrega un botón para añadir tareas

  3. Personaliza: Cambia colores y estilos

  4. Comparte: Muestra lo que has creado a alguien

¿Tienes preguntas? Recuerda:

  • Google es tu amigo

  • La documentación oficial es tu mejor aliada

  • Todos los programadores comenzaron donde estás tú

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