Usa Abreviaciones Estilo Emmet en Componentes Blade | Herramientas Programación

Blade Emerald permite usar abreviaciones Emmet para generar y envolver componentes Blade en Laravel.

¿Cómo funciona? ✨

Usa el componente <x-markup/> con una sintaxis similar a Emmet:

<x-markup make="div.col>div.alert.alert-success[role=alert]">
    <strong>¡Éxito!</strong> Dale click si te gusta.
</x-markup>

Salida generada:

<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>¡Éxito!</strong> Dale click si te gusta.
    </div>
</div>

Puedes usar el trait Markup para envolver otros componentes Blade con Emmet:

use AquaEmeraldTraitsMarkup;

class YourComponent extends Component
{
    use Markup;

    public function __construct(public $wrap) {...}
}

Luego usalo así:

<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />

Consulta los ejemplos útiles para integrarlo con Bootstrap, Alpine y más proyectos. Código fuente en GitHub de Blade Emerald.