HACER CAMBIOS-A TU EJEMPLO

 ¡Excelente! Ahora que ya ves los cambios, te daré un tutorial completo sobre la estructura y flujo de trabajo con Laravel Jetstream + Inertia + Vue.

📚 Tutorial: Laravel Jetstream con Inertia + Vue

1. Estructura del Proyecto (Parte Frontend)

text
resources/
├── js/
│   ├── Components/          # Componentes Vue reutilizables
│   │   ├── ApplicationLogo.vue
│   │   ├── InputLabel.vue
│   │   ├── Modal.vue
│   │   ├── NavLink.vue
│   │   └── ...
│   ├── Layouts/            # Layouts de la aplicación
│   │   └── AppLayout.vue   # Layout principal (con navbar, sidebar)
│   ├── Pages/              # PÁGINAS (rutas principales)
│   │   ├── Welcome.vue     # Página de inicio (/)
│   │   ├── Dashboard.vue   # Dashboard después de login
│   │   ├── Auth/           # Páginas de autenticación
│   │   │   ├── Login.vue
│   │   │   ├── Register.vue
│   │   │   └── VerifyEmail.vue
│   │   └── Profile/        # Perfil de usuario
│   │       └── Show.vue
│   ├── app.js              # Punto de entrada principal
│   └── bootstrap.js        # Configuración de Inertia
├── views/
│   └── app.blade.php       # Layout base (solo renderiza Inertia)

2. Flujo de Trabajo Básico

A. Crear una nueva página

bash
# 1. Crea el componente en Pages/
# resources/js/Pages/Tareas.vue

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'; // Usa el layout con navbar
import { Head } from '@inertiajs/vue3';

defineProps({
    tareas: Array // Datos que vienen del backend
});
</script>

<template>
    <AppLayout>
        <Head title="Mis Tareas" />
        
        <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">Mis Tareas</h1>
                    
                    <div v-for="tarea in tareas" :key="tarea.id" class="mt-4 p-4 border rounded">
                        {{ tarea.titulo }}
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

B. Conectar con el Backend (Rutas)

php
// routes/web.php

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

Route::middleware(['auth:sanctum', 'verified'])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
    
    // Nueva ruta para tareas
    Route::get('/tareas', [TareaController::class, 'index'])->name('tareas');
});

 Comando para crear el controlador

bash
php artisan make:controller TareaController

C. Controlador que pasa datos

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

namespace App\Http\Controllers;

use Inertia\Inertia;
use App\Models\Tarea;

class TareaController extends Controller
{
    public function index()
    {
        return Inertia::render('Tareas', [
            'tareas' => Tarea::where('user_id', auth()->id())->get()
        ]);
    }
}

3. 🚀 Flujo de Desarrollo (Los 3 Pasos Mágicos)

Paso 1: Iniciar los servidores

bash
# Terminal 1 - Laravel (Backend)
php artisan serve
# → http://localhost:8000

# Terminal 2 - Vite (Frontend compilación automática)
npm run dev
# → Escucha cambios en tiempo real

Paso 2: Modificar archivos

  • Edita archivos .vue o .php

  • Guarda los cambios

Paso 3: Ver resultados

  • Con npm run dev, Vite detecta cambios automáticamente

  • Los cambios aparecen casi instantáneamente al refrescar el navegador

  • No necesitas recompilar manualmente

4. ⚡ Flujo de Cambios Automáticos (Sin recompilar)

Con Vite + npm run dev:

  • ✅ Los cambios en .vue se actualizan instantáneamente (Hot Module Replacement)

  • ✅ Los cambios en .php solo requieren refrescar el navegador

  • ✅ No necesitas ejecutar npm run build en desarrollo

Para cambios automáticos sin compilar:

bash
# SOLO ESTO ES SUFICIENTE
npm run dev

¿Cuándo usar npm run build?

  • Solo en producción

  • Para probar el sitio compilado localmente

  • Cuando npm run dev no funciona correctamente

5. 🎨 Creación Rápida de Componentes

bash
# Crear un componente reutilizable
# resources/js/Components/TareaCard.vue

<script setup>
defineProps({
    tarea: Object
});
</script>

<template>
    <div class="p-4 border rounded-lg hover:shadow-lg transition">
        <h3 class="font-bold">{{ tarea.titulo }}</h3>
        <p class="text-gray-600">{{ tarea.descripcion }}</p>
        <span :class="{
            'text-green-600': tarea.estado === 'completada',
            'text-yellow-600': tarea.estado === 'pendiente'
        }">
            {{ tarea.estado }}
        </span>
    </div>
</template>

Usarlo en cualquier página:

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

<template>
    <div class="grid grid-cols-3 gap-4">
        <TareaCard v-for="tarea in tareas" :key="tarea.id" :tarea="tarea" />
    </div>
</template>

6. 📊 Navegación y Layouts

AppLayout (Con navbar y sidebar)

vue
<!-- resources/js/Layouts/AppLayout.vue -->
<script setup>
import { Link } from '@inertiajs/vue3';
</script>

<template>
    <div>
        <!-- Navbar -->
        <nav class="bg-white border-b">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <Link :href="route('dashboard')" class="flex items-center">
                        <ApplicationLogo class="h-8" />
                        <span class="ml-2 font-bold">Mi App</span>
                    </Link>
                    
                    <div class="flex items-center">
                        <Link :href="route('tareas')" class="mr-4">Tareas</Link>
                        <Link :href="route('profile.show')">Perfil</Link>
                    </div>
                </div>
            </div>
        </nav>
        
        <!-- Contenido -->
        <main>
            <slot />
        </main>
    </div>
</template>

7. 🔥 Trucos para Desarrollo Rápido

A. Variables de entorno para desarrollo

env
# .env
APP_DEBUG=true
APP_ENV=local

B. Vite con HMR (Hot Module Replacement)

bash
# Esto actualiza los componentes sin recargar la página completa
npm run dev

# Verás en consola:
# VITE v4.x.x ready in 320ms
# ➜  Local: http://localhost:5173/
# ➜  Network: use --host to expose

C. Atajos en el navegador

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

  • F12 → Network → Disable cache: Desactiva caché para desarrollo

8. 📝 Comandos Útiles

bash
# Desarrollo
php artisan serve           # Servidor Laravel
npm run dev                 # Compilador Vite (automático)

# Producción
npm run build              # Compilar assets para producción
php artisan config:cache   # Optimizar configuración

# Utilidades
php artisan make:controller TareaController
php artisan make:model Tarea -m  # Modelo con migración
php artisan make:seeder TareaSeeder

# Ver rutas disponibles
php artisan route:list

9. 🎯 Flujo de Trabajo Recomendado

  1. Define la ruta en routes/web.php

  2. Crea el controlador con php artisan make:controller

  3. Crea la vista Vue en resources/js/Pages/

  4. Conecta en el controlador: return Inertia::render('NombreVista', $data)

  5. npm run dev (si no está corriendo)

  6. ¡Los cambios se ven en tiempo real!

10. 📂 Crear tu Primera Vista con Datos

Backend:

php
// routes/web.php
Route::get('/tareas', function () {
    return Inertia::render('Tareas', [
        'usuario' => auth()->user(),
        'tareas' => [
            ['id' => 1, 'titulo' => 'Aprender Laravel', 'estado' => 'pendiente'],
            ['id' => 2, 'titulo' => 'Aprender Vue', 'estado' => 'completada'],
        ]
    ]);
})->name('tareas');

Frontend:

vue
<!-- resources/js/Pages/Tareas.vue -->
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Head } from '@inertiajs/vue3';

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

<template>
    <AppLayout>
        <Head title="Mis Tareas" />
        
        <div class="py-12">
            <div class="max-w-7xl mx-auto px-4">
                <h1 class="text-3xl font-bold mb-8">
                    Hola, {{ usuario.name }} 👋
                </h1>
                
                <div class="grid gap-4">
                    <div v-for="tarea in tareas" 
                         :key="tarea.id" 
                         class="p-4 bg-white rounded shadow">
                        <span :class="tarea.estado === 'completada' ? 'line-through' : ''">
                            {{ tarea.titulo }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

✅ Resumen

  • npm run dev es suficiente para desarrollo

  • Los cambios se ven automáticamente sin recompilar

  • Pages/ son rutas principales, Components/ son reutilizables

  • AppLayout da el diseño con navbar

  • Usa props para pasar datos del backend

  • @inertiajs/vue3 maneja la navegación

¿Listo para empezar a construir tu app? ¿Qué te gustaría crear primero?

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