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 > database/database.sqlite

# 1. Crear .env (solo si no existe)
# En CMD:
copy .env.example .env

# En PowerShell:
Copy-Item .env.example .env

# 2. Generar clave de aplicación
php artisan key:generate

# 3. Configurar SQLite en .env (editar el archivo)

Editar .env:

env

DB_CONNECTION=sqlite
DB_DATABASE=/ruta/absoluta/a/tareas-app/database/database.sqlite

1.5 Migrar base de datos

bash

php artisan migrate

---

📁 2. ESTRUCTURA DE ARCHIVOS

text

📁 tareas-app/
├── 📁 app/Http/Controllers/
│   └── TareaController.php
├── 📁 routes/
│   └── web.php
└── 📁 resources/js/Pages/
    └── Tarea.vue          ← Solo UNA vista

---

🎯 3. CONFIGURAR RUTAS

routes/web.php

php

<?php

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

// Ruta dashboard
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth:sanctum', 'verified'])->name('dashboard');

// RUTAS DE TAREAS (minimalista)
Route::middleware(['auth:sanctum', 'verified'])->group(function () {
    Route::get('/tarea', [TareaController::class, 'index'])->name('tarea.index');
    Route::post('/tarea', [TareaController::class, 'store'])->name('tarea.store');
});

---

🎮 4. CREAR CONTROLADOR (Mínimo)

app/Http/Controllers/TareaController.php

php

<?php

namespace App\Http\Controllers;

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

class TareaController extends Controller
{
    // Obtener tarea de sesión
    private function getTarea()
    {
        return session('tarea', '');
    }

    // Guardar tarea en sesión
    private function saveTarea($tarea)
    {
        session(['tarea' => $tarea]);
    }

    // Mostrar tarea
    public function index()
    {
        return Inertia::render('Tarea', [
            'tarea' => $this->getTarea()
        ]);
    }

    // Guardar tarea
    public function store(Request $request)
    {
        $request->validate([
            'tarea' => 'required|string|max:255'
        ]);

        $this->saveTarea($request->tarea);
        
        return redirect()->route('tarea.index');
    }
}

---

🎨 5. CREAR COMPONENTE VUE (Ultra simple)

resources/js/Pages/Tarea.vue

vue

<template>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                <h1 class="text-2xl font-bold mb-6">📋 Mi Tarea</h1>

                <!-- Formulario simple -->
                <form @submit.prevent="guardarTarea" class="mb-6">
                    <div class="flex gap-4">
                        <input
                            type="text"
                            v-model="form.tarea"
                            placeholder="Escribe tu tarea..."
                            class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                        />
                        <button
                            type="submit"
                            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"
                            :disabled="form.processing"
                        >
                            {{ form.processing ? '⏳ Guardando...' : '💾 Guardar' }}
                        </button>
                    </div>
                    
                    <!-- Errores -->
                    <div v-if="form.errors.tarea" class="text-red-500 text-sm mt-1">
                        {{ form.errors.tarea }}
                    </div>
                </form>

                <!-- Mostrar tarea guardada -->
                <div v-if="tarea" class="p-4 bg-green-50 rounded-lg border border-green-200">
                    <p class="text-green-800">✅ Tarea guardada:</p>
                    <p class="text-lg font-medium mt-1">{{ tarea }}</p>
                </div>
                
                <!-- Mensaje vacío -->
                <div v-else class="p-4 bg-gray-50 rounded-lg text-gray-500">
                    No hay tarea guardada. ¡Agrega una!
                </div>
            </div>
        </div>
    </div>
</template>

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

// Props del controlador
defineProps({
    tarea: String
});

// Formulario
const form = useForm({
    tarea: ''
});

// Guardar tarea
function guardarTarea() {
    form.post('/tarea', {
        preserveState: true,
        onSuccess: () => {
            form.reset(); // Limpiar input
        }
    });
}
</script>

---

🏠 6. AGREGAR AL MENÚ

Editar resources/js/Layouts/AppLayout.vue

Agregar en la navegación:

vue

<NavLink :href="route('tarea.index')" :active="route().current('tarea.*')">
    📋 Tarea
</NavLink>

---

🚀 7. EJECUTAR

bash

# Terminal 1 - Servidor
php artisan serve

# Terminal 2 - Assets
npm run dev

---

📊 8. PROBAR

1. Abrir navegador: http://localhost:8000

2. Registrarse (o iniciar sesión)

3. Click en "📋 Tarea" en el menú

4. Escribir tarea y click en "Guardar"

5. Ver tarea guardada debajo del formulario

6. Cerrar sesión y volver a entrar - la tarea sigue ahí (sesión)

---

✅ 9. ¿CÓMO FUNCIONA?

Paso	Acción	Qué pasa
1	Usuario entra a /tarea	Controlador index() devuelve tarea guardada
2	Usuario escribe y guarda	form.post() envía a /tarea
3	Laravel valida y guarda en sesión	session(['tarea' => $request->tarea])
4	Redirige a /tarea	Inertia actualiza la vista sin recargar
5	Tarea se muestra	{{ tarea }} en el template

---

🎯 10. SOLO 5 ARCHIVOS

text

1. routes/web.php               ← 5 líneas de código
2. app/Http/Controllers/TareaController.php  ← 30 líneas
3. resources/js/Pages/Tarea.vue ← 50 líneas
4. .env                         ← Configuración
5. resources/js/Layouts/AppLayout.vue ← 1 línea agregada

---

💡 11. DATOS TÉCNICOS

Persistencia

php

// Guardar
session(['tarea' => 'Mi tarea']);

// Obtener
session('tarea', '');

Validación

php

$request->validate([
    'tarea' => 'required|string|max:255'
]);

Envío con Inertia

javascript

form.post('/tarea', {
    preserveState: true,
    onSuccess: () => form.reset()
});

---

🔧 12. POSIBLES MEJORAS (Opcionales)

Si quieres más funcionalidad, agrega:

Múltiples tareas

Cambia el arreglo a session('tareas', [])

Eliminar tarea

php

Route::delete('/tarea', [TareaController::class, 'destroy']);

Editar tarea

php

Route::put('/tarea', [TareaController::class, 'update']);

---

🎉 ¡LISTO!

Tienes una aplicación de tareas mínima pero funcional con:

• ✅ Laravel 10

• ✅ Jetstream (autenticación)

• ✅ Inertia (SPA sin complejidad)

• ✅ Vue 3

• ✅ Sesión (sin base de datos para tareas)

• ✅ Solo 3 archivos principales

¡La app más simple posible pero completamente funcional!