Tutorial para Principiantes: Laravel Breeze + 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)

  • Breeze = Un "kit de inicio" ligero con autenticación básica

  • Vite = El "camión" que lleva los muebles a la casa (compila y actualiza)

📂 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)
      📁 Pages/        ← Las páginas completas (habitaciones enteras)
      📄 app.js        ← El punto de entrada (la puerta principal)
   📁 views/           ← Archivos Blade de Laravel (los cimientos)

🧩 ¿Qué va en cada carpeta?

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

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

  • views/ = Archivos .blade.php que contienen el HTML base

🎯 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 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 3: Llenar el Controlador con datos

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TareaController extends Controller
{
    public function index()
    {
        // Datos de ejemplo (sin base de datos por ahora)
        $tareas = [
            ['id' => 1, 'titulo' => 'Aprender Vue', 'descripcion' => 'Estudiar los fundamentos', 'completada' => false],
            ['id' => 2, 'titulo' => 'Hacer ejercicio', 'descripcion' => '30 minutos de cardio', 'completada' => true],
            ['id' => 3, 'titulo' => 'Leer libro', 'descripcion' => 'Capítulos 3-5', 'completada' => false],
        ];
        
        // Enviar los datos a la vista
        return view('tareas', compact('tareas'));
    }
}

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

php
// 📁 routes/web.php

use App\Http\Controllers\TareaController;

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

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

Paso 5: Crear la Vista Blade (El contenedor)

blade
{{-- 📁 resources/views/tareas.blade.php --}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mis Tareas</title>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        {{-- Aquí va el componente Vue --}}
        <task-list :tareas-iniciales='@json($tareas)'></task-list>
    </div>
    
    @vite('resources/js/app.js')
</body>
</html>

Paso 6: Crear el Componente Vue (Lo que el usuario ve)

Crea un archivo en resources/js/Components/TaskList.vue

vue
<!-- 📁 resources/js/Components/TaskList.vue -->

<template>
    <div class="container mx-auto p-6">
        <h1 class="text-3xl font-bold mb-6">📋 Mis Tareas</h1>
        
        <!-- Grid de 2 columnas -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Tarjeta de tarea -->
            <div 
                v-for="(tarea, index) in tareas" 
                :key="index"
                class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition"
            >
                <div class="flex items-start gap-3">
                    <input 
                        type="checkbox" 
                        v-model="tarea.completada"
                        class="mt-1 w-5 h-5"
                    >
                    
                    <div class="flex-1">
                        <h3 
                            class="font-semibold text-lg"
                            :class="{ 'line-through text-gray-400': tarea.completada }"
                        >
                            {{ tarea.titulo }}
                        </h3>
                        <p class="text-gray-600 text-sm">{{ tarea.descripcion }}</p>
                    </div>
                    
                    <button 
                        @click="eliminarTarea(index)"
                        class="text-red-500 hover:text-red-700"
                    >
                        ✕
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Contador -->
        <div class="mt-6 text-sm text-gray-600">
            ✅ {{ tareasCompletadas }} de {{ tareas.length }} completadas
        </div>
    </div>
</template>

<script>
export default {
    name: 'TaskList',
    props: {
        tareasIniciales: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tareas: this.tareasIniciales
        }
    },
    computed: {
        tareasCompletadas() {
            return this.tareas.filter(t => t.completada).length;
        }
    },
    methods: {
        eliminarTarea(index) {
            if (confirm('¿Eliminar esta tarea?')) {
                this.tareas.splice(index, 1);
            }
        }
    }
}
</script>

Paso 7: Registrar el Componente en app.js

javascript
// 📁 resources/js/app.js

import './bootstrap';
import { createApp } from 'vue';
import TaskList from './Components/TaskList.vue';

// Crear la app Vue
const app = createApp({});

// Registrar el componente
app.component('task-list', TaskList);

// Montar la app
app.mount('#app');

🔥 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 Simple

vue
<!-- 📁 resources/js/Components/Boton.vue -->

<template>
    <button 
        @click="handleClick"
        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
    >
        {{ texto }}
    </button>
</template>

<script>
export default {
    name: 'Boton',
    props: {
        texto: {
            type: String,
            default: 'Botón'
        }
    },
    methods: {
        handleClick() {
            this.$emit('click');
        }
    }
}
</script>

Usar el Componente en una Página

vue
<template>
    <div class="p-6">
        <h2>Mi Página</h2>
        <Boton texto="Guardar" @click="guardarDatos" />
    </div>
</template>

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

export default {
    components: {
        Boton
    },
    methods: {
        guardarDatos() {
            alert('¡Datos guardados!');
        }
    }
}
</script>

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


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