Plantillas de Blade con Laravel 11 - Curso Laravel 11 desde cero

 Componentes de Blade en Laravel

Introducción

Si alguna vez has utilizado Vue.js o React.js, estarás familiarizado con el concepto de componentes. En Laravel también contamos con componentes de Blade, y los vamos a utilizar para crear nuestro layout y extraer el contenido repetido de nuestras vistas.

https://www.youtube.com/watch?v=cH4Nl1TB84U&list=PLpKWS6gp0jd8wsN5wSDwEFcvkD6nQ66yM&index=11

1. ¿Dónde se ubican los componentes de Blade?

Los componentes de Blade se ubican en la carpeta:

resources/views/components

Si elegimos Laravel Breeze, esta carpeta ya viene con varios archivos generados. Pero en este tutorial crearemos nuestro propio componente llamado layout.blade.php.

Nota: No necesitamos la extensión .blade.php para referenciar el componente, pero sí para el archivo en sí.

2. Creando el componente layout

Actualmente, lo único que cambia entre las vistas es el H1. Así que vamos a extraer todo el contenido repetido.

Paso 1: Copiar la estructura

Copiamos toda la parte superior de la vista (el head, el body, etc.) y la pegamos en layout.blade.php.

Luego copiamos lo que está debajo del H1 y también lo pegamos en el layout.

Paso 2: Usar la variable $slot

Dentro de todo componente de Blade tenemos disponible una variable reservada especial llamada $slot, donde se imprimirá el contenido variable.

Es como un slot en los componentes de Vue.js o como la propiedad children en los componentes de React.

blade

{{-- layout.blade.php --}}

<!DOCTYPE html>

<html>

<head>

    <title>Mi App</title>

</head>

<body>

    {{ $slot }}

</body>

</html>

Con esto ya tenemos nuestro componente layout.

3. Usando el componente en la vista welcome

Ahora, en la vista welcome, dejamos solamente el H1.

Opción 1: Directiva @component

blade

@component('components.layout')

    <h1>Bienvenido</h1>

@endcomponent

  • Se asume que el componente está en resources/views/components.

  • Todo lo que esté dentro se imprimirá en el $slot.

Opción 2: Etiqueta de componente Blade (recomendada)

blade

<x-layout>

    <h1>Bienvenido</h1>

</x-layout>

  • La x- apunta directamente a la carpeta components.

  • No necesitamos la extensión .blade.php.

  • Es equivalente a la opción anterior.

Comentarios en Blade

blade

{{-- Esto es un comentario en Blade --}}

4. Propiedades opcionales: El sidebar

Supongamos que queremos un sidebar opcional en la plantilla.

Paso 1: Definir la variable en el layout

blade

<aside id="sidebar">

    {{ $sidebar }}

</aside>

Paso 2: Usar slots con nombre

Para imprimir estructuras HTML, usamos slots con nombre:

blade

<x-layout>

    <x-slot name="sidebar">

        <nav>...</nav>

    </x-slot>

    <h1>Bienvenido</h1>

</x-layout>

También existe una sintaxis más corta:

blade

<x-slot:sidebar>

    <nav>...</nav>

</x-slot:sidebar>

Paso 3: Hacer el sidebar opcional

Si no pasamos el slot, obtendremos un error porque $sidebar no está definida. Para hacerlo opcional:

blade

@if(isset($sidebar))

    <aside id="sidebar">

        {{ $sidebar }}

    </aside>

@endif

O usando la directiva @isset:

blade

@isset($sidebar)

    <aside id="sidebar">

        {{ $sidebar }}

    </aside>

@endisset

5. Metatitle y metadescription

Paso 1: Modificar el layout

blade

<title>{{ $metatitle ?? 'Título por defecto' }}</title>

<meta name="description" content="{{ $metadescription ?? 'Descripción por defecto' }}">

El operador ?? verifica si la variable está definida; si no, usa el valor por defecto.

Paso 2: Pasar valores desde la vista

Opción A: Usando slots

blade

<x-slot name="metatitle">

    Título de la página

</x-slot>

Opción B: Usando propiedades como atributos HTML (recomendada para strings)

blade

<x-layout metatitle="Título de la página" metadescription="Descripción específica">

    <h1>Bienvenido</h1>

</x-layout>

Convención importante:

  • Para referenciar propiedades: kebab-case

  • Para definir propiedades: camelCase

  • La conversión se hace automáticamente.

6. Convertir la navegación en un componente

Es opcional, pero muy fácil:

  1. Copiamos el código de la navegación a resources/views/components/nav.blade.php.

  2. Lo usamos así:

blade

<x-nav />

Si tenemos subcarpetas dentro de components, usamos la sintaxis con punto:

blade

<x-forms.input />

La x- hace referencia a la carpeta components, luego accedemos a la subcarpeta con un punto y finalmente el nombre del componente.

7. Evaluar PHP dentro de propiedades

Supongamos que tenemos una propiedad y queremos sumar 2 + 2:

blade

<x-layout suma="2 + 2">

Si en el layout imprimimos:

blade

{{ $suma }}

Se imprimirá el string "2 + 2", no se ejecuta PHP.

Para que se evalúe como PHP, usamos dos puntos al principio:

blade

<x-layout :suma="2 + 2">

Si ya estamos tratando como string, tendríamos que encerrarlo en comillas para que funcione, pero no tendría sentido en este caso.

8. Actualizar las demás vistas

Finalmente, actualizamos las demás vistas para que usen el componente layout:

  • contact.blade.php

  • blog.blade.php

  • about.blade.php

blade

<x-layout metatitle="Contacto">

    <h1>Contacto</h1>

</x-layout>

Resumen

Concepto

Sintaxis

Componente

<x-layout>...</x-layout>

Slot por defecto

{{ $slot }}

Slot con nombre

<x-slot name="sidebar">...</x-slot>

Slot con nombre (corto)

<x-slot:sidebar>...</x-slot:sidebar>

Propiedad opcional

@isset($var) ... @endisset

Valor por defecto

{{ $var ?? 'default' }}

Propiedad como atributo

<x-layout metatitle="Hola">

Evaluar PHP

<x-layout :suma="2 + 2">

Subcarpetas

<x-forms.input />

Comentarios

{{-- comentario --}}

¡Y listo! Ya tienes tu layout reutilizable con componentes de Blade en Laravel

Comentarios

Publicar un comentario

Entradas más populares de este blog

02 -Rutas en Laravel

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . Tipos básicos de rutas 1. Rutas básicas php Copy Download Route :: get ( '/saludo' , function ( ) { return '¡Hola Mundo!' ; } ) ; Cuando se visita  /saludo  en el navegador, se mostrará "¡Hola Mundo!". 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 4. Rutas con restricciones php Copy Download Rout...
Leer más

01-04-convencion nombres

 En Laravel, existen convenciones y buenas prácticas para nombrar controladores, modelos, métodos, variables y tablas de la base de datos. Estas convenciones ayudan a mantener la consistencia en el código y aprovechar al máximo las características de Laravel, como la inyección de dependencias y el ORM Eloquent.   Te explico las convenciones de nomenclatura en Laravel con énfasis en la estructura Verbo + Sustantivo : estructura para controladores: 📝 Controladores - Estructura Correcta Nombres de Clases (Controladores) Caso: PascalCase Estructura: Sujeto/Objeto (Sustantivo) + Controller Sufijo: Controller Número: Sustantivo en Plural (representa la colección que maneja) ✅ Ejemplos Correctos: php // Controlador para manejar usuarios (colección de usuarios) class UsersController extends Controller {}   // Sujeto: Users // Controlador para manejar productos (colección de productos)   class ProductsController extends Controller {} // Sujeto: Products // Cont...
Leer más

1-4-Evolución en PHP Puro-Credenciales en Body/Query String:

  Evolución en PHP Puro Antes (Menos Seguro) - Credenciales en Body/Query String: php <?php // login_old.php - FORMA ANTIGUA (NO RECOMENDADA) // Credenciales venían en el body (POST) o query string (GET) if ( $_SERVER [ 'REQUEST_METHOD' ] === 'POST' ) { $email = $_POST [ 'email' ] ; $password = $_POST [ 'password' ] ; $api_key = $_POST [ 'api_key' ] ?? '' ; // ❌ MAL: clave en body // Verificar credenciales if ( authenticateUser ( $email , $password ) ) { session_start ( ) ; $_SESSION [ 'user_id' ] = getUserId ( $email ) ; echo json_encode ( [ 'status' => 'success' ] ) ; } } // O PEOR AÚN - en query string (GET) // https://api.com/data?api_key=mi_clave_secreta ❌ MUY PELIGROSO Ahora (Más Seguro) - Tokens en Headers: php <?php // api_auth.php - FORMA ACTUAL (RECOMENDADA) header ( 'Content-Type: application/json...
Leer más