02-01-01-componentes-b-e

 Plantillas de Blade con Laravel 11

Si alguna vez has utilizado Vue.js o ReactJS, 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 este contenido repetido.

Creando componentes de Blade

Los componentes de Blade se ubican en la carpeta resources/views/components. Aquí tenemos varios archivos que se generaron automáticamente al elegir Laravel Breeze (hablaremos de esto más adelante).

Vamos a crear un componente llamado layout.blade.php. Actualmente, lo único que cambia en nuestras vistas es el <h1>, así que:

  1. Copiamos la parte superior de la vista (head, meta tags, etc.) y la pegamos en el layout

  2. Copiamos el cierre (footer, scripts, etc.) y lo pegamos al final del layout

Dentro de todo componente de Blade tenemos disponible una variable reservada especial llamada $slot donde se imprimirá el contenido variable. Es similar a los slots en VueJS o a children en React.




Blade en Laravel + Componentes

Blade es el motor de plantillas de Laravel que ofrece una sintaxis elegante y potente para trabajar con vistas. Aquí te presento una guía estructurada con los conceptos esenciales y el uso de componentes.

Para utilizar nuestro componente en la vista welcome.blade.php:

  1. Dejamos solo el <h1> en la vista

  2. Tenemos dos opciones para usar el componente:

Opción 1: Directiva @component

blade

@component('components.layout')

    <!-- Contenido que irá en el $slot -->

@endcomponent

Opción 2: Etiqueta de componente (recomendada)

blade

<x-layout>

    <!-- Contenido que irá en el $slot -->

</x-layout>

La segunda opción es más limpia y asume automáticamente que el componente está en la carpeta components.

Slots con nombre para contenido opcional

Si queremos agregar un sidebar opcional:

  1. En el layout:

blade

@isset($sidebar)

    <div id="sidebar">{{ $sidebar }}</div>

@endisset


<!-- Alternativa más corta: -->

@isset($sidebar)

    {{ $sidebar }}

@endisset

  1. En la vista:

blade

<x-layout>

    <x-slot name="sidebar">

        <!-- Contenido del sidebar -->

    </x-slot>

</x-layout>

Propiedades del componente

Para modificar metadatos como título y descripción:

  1. En el layout:

blade

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

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

  1. En la vista (como atributos):

blade

<x-layout 

    :meta-title="Título personalizado" 

    :meta-description="Descripción personalizada"

>

    <!-- Nota: usamos kebab-case en atributos pero camelCase en propiedades -->

</x-layout>

Componentes anidados

Si tenemos componentes en subcarpetas:

blade

<x-navigation.main /> <!-- Para components/navigation/main.blade.php -->

Evaluando código PHP en propiedades

Si necesitamos evaluar código PHP en las propiedades:

blade

<x-component :prop=":2 + 2" /> <!-- Evaluará a 4 -->

<x-component prop="2 + 2" />   <!-- Mostrará el string "2 + 2" -->

Conclusión

Con estos cambios, podemos actualizar todas nuestras vistas para usar el layout consistente. Los componentes de Blade nos permiten:

  • Reducir código repetido

  • Crear plantillas reutilizables

  • Mantener una estructura limpia y organizada

  • Trabajar con lógica opcional (slots)

3. Componentes en Blade

A. Crear un Componente

bash

Copy

Download

php artisan make:component Alert

📌 Estructura generada:

  • app/View/Components/Alert.php (Clase)

  • resources/views/components/alert.blade.php (Vista)

B. Componente Básico (Alert.php)

php

namespace App\View\Components;


use Illuminate\View\Component;


class Alert extends Component

{

    public $type;

    

    public function __construct($type = 'info')

    {

        $this->type = $type;

    }

    

    public function render()

    {

        return view('components.alert');

    }

}

C. Vista del Componente (alert.blade.php)

php

Copy

Download

<div class="alert alert-{{ $type }}">

    {{ $slot }} <!-- Contenido pasado al componente -->

</div>

D. Uso del Componente

php

Copy

Download

<x-alert type="success">

    ¡Operación exitosa!

</x-alert>

E. Componentes con Slots Nombrados

php

Copy

Download

<!-- resources/views/components/card.blade.php -->

<div class="card">

    <div class="card-header">

        {{ $title }}

    </div>

    <div class="card-body">

        {{ $slot }}

    </div>

</div>


<!-- Uso -->

<x-card>

    @slot('title') Título Personalizado @endslot

    Contenido del card...

</x-card>

4. Directivas Personalizadas

A. Registrar en AppServiceProvider

php

Copy

Download

use Illuminate\Support\Facades\Blade;


public function boot()

{

    Blade::directive('datetime', function ($expression) {

        return "<?php echo ($expression)->format('d/m/Y H:i'); ?>";

    });

}

B. Uso en Vistas

php

Copy

Download

@datetime($post->created_at)

5. Includes y Fragmentos

A. Incluir Sub-vistas

php

Copy

Download

@include('partials.header', ['title' => 'Inicio'])

B. Fragmentos Reutilizables

php

Copy

Download

<!-- partials/buttons.blade.php -->

@props(['type' => 'submit'])


<button type="{{ $type }}" {{ $attributes }}>

    {{ $slot }}

</button>


<!-- Uso -->

<x-buttons class="btn-primary">Enviar</x-buttons>

6. Tabla Comparativa: Blade vs Componentes

Característica

Blade Clásico

Componentes

Reutilización

@include o @extends

Clases + plantillas encapsuladas

Lógica

Directivas simples

Lógica PHP en clases

Props

Variables pasadas manualmente

Props declaradas en clase

Slots

No nativo

Slots y slots nombrados

Rendimiento

Ligero

Optimizado con caché

7. Consejos Avanzados

  1. Atributos Dinámicos:

  2. php

  3. Copy

  4. Download

  5. <x-button {{ $attributes->merge(['class' => 'btn']) }}>

  6. Componentes Anónimos (Laravel 8+):

  7. bash

  8. Copy

  9. Download

  10. php artisan make:component forms.input --inline

  11. Acceder a Atributos:

  12. php

  13. Copy

  14. Download

  15. {{ $attributes->get('class') }}

8. Ejemplo Completo: Sistema de Notificaciones

Componente (Notification.php)

php

Copy

Download

public $type;

public $message;


public function __construct($type = 'info', $message = '')

{

    $this->type = $type;

    $this->message = $message;

}

Vista (notification.blade.php)

php

Copy

Download

<div class="notification notification-{{ $type }}">

    {{ $message ?? $slot }}

</div>

Uso

php

Copy

Download

<x-notification type="error" message="Error crítico"/>

<!-- O -->

<x-notification type="success">

    Registro completado!

</x-notification>

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