Vistas y Blade Lección 13 de 45 15 min de lectura

Layouts y componentes

Los layouts te permiten definir una estructura HTML común que reutilizas en todas tus páginas. Los componentes encapsulan fragmentos de UI reutilizables.

¿Qué es un layout?

Un layout es una plantilla base que define la estructura HTML común de tu sitio (header, footer, navegación). Las páginas heredan del layout e inyectan su contenido específico.

Crear un layout

Crea el archivo resources/views/layouts/app.blade.php:

blade 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>@yield('title') - Mi App</title>
</head>
<body>
    <nav>
        <a href="/">Inicio</a>
        <a href="/about">Acerca de</a>
    </nav>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; 2025 Mi App</p>
    </footer>
</body>
</html>

@yield('nombre') define un placeholder donde las vistas hijas inyectarán contenido.

Extender un layout

Las vistas usan @extends para heredar del layout y @section para definir el contenido:

blade 
{{-- resources/views/home.blade.php --}}
@extends('layouts.app')

@section('title', 'Inicio')

@section('content')
    <h1>Bienvenido a Mi App</h1>
    <p>Esta es la página de inicio.</p>
@endsection

Incluir vistas parciales

@include inserta otra vista dentro de la actual:

blade 
{{-- En el layout --}}
<nav>
    @include('partials.navigation')
</nav>

{{-- Pasar datos al partial --}}
@include('partials.alert', ['message' => 'Guardado correctamente'])

Componentes anónimos

Los componentes son fragmentos de UI reutilizables. Crea un archivo en resources/views/components/:

blade 
{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

Úsalo con la sintaxis <x-nombre>:

blade 
<x-alert type="success">
    Operación completada con éxito
</x-alert>

<x-alert type="error">
    Ha ocurrido un error
</x-alert>

El contenido entre las etiquetas se pasa como $slot. Los atributos se pasan como variables ($type).

Componentes en subcarpetas

blade 
{{-- Archivo: components/form/input.blade.php --}}
{{-- Uso: --}}
<x-form.input name="email" type="email" />
@include vs Componentes

Usa @include para partials simples. Usa componentes <x-...> cuando necesites pasar datos con atributos o slots.

Ejercicios

Ejercicio 1: Crear un layout

Crea un layout layouts/main.blade.php con header, main y footer. Define un @yield('content') en el main.

Ver solución 
{{-- resources/views/layouts/main.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'Mi Sitio')</title>
</head>
<body>
    <header>
        <h1>Mi Sitio</h1>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>Copyright 2025</p>
    </footer>
</body>
</html>

Ejercicio 2: Extender el layout

Crea una vista contact.blade.php que extienda el layout anterior y muestre un formulario de contacto.

Ver solución 
{{-- resources/views/contact.blade.php --}}
@extends('layouts.main')

@section('title', 'Contacto')

@section('content')
    <h2>Contáctanos</h2>
    <form>
        <input type="text" name="name" placeholder="Nombre">
        <input type="email" name="email" placeholder="Email">
        <button type="submit">Enviar</button>
    </form>
@endsection

Ejercicio 3: Crear un componente

Crea un componente button.blade.php que reciba un atributo color y muestre el texto del slot.

Ver solución 
{{-- resources/views/components/button.blade.php --}}
<button class="btn btn-{{ $color ?? 'primary' }}">
    {{ $slot }}
</button>

{{-- Uso --}}
<x-button color="success">Guardar</x-button>
<x-button color="danger">Eliminar</x-button>

Resumen

  • Layouts definen la estructura HTML común
  • @yield('nombre') define placeholders en el layout
  • @extends('layout') hereda de un layout
  • @section('nombre') define el contenido para un yield
  • @include('vista') inserta un partial
  • Componentes van en views/components/
  • <x-nombre> usa un componente, $slot es el contenido

¿Te está gustando el curso?

Tenemos cursos premium con proyectos reales, soporte personalizado y certificado.

Descubrir cursos premium