Используйте аббревиатуры в стиле Emmet в компонентах Blade

Laravel Blade Emerald предоставляет Эммет-подобные аббревиатуры для создания и обертывания компонентов Laravel Blade разметкой. Он работает с помощью <x-markup/> компонента Blade, который принимает аббревиатуру Emmet:

<x-markup make="div.col>div.alert.alert-success[role=alert]">
    <strong>Success !</strong> give it a click if you like.
</x-markup>
 
{{-- Generated HTML --}}
 
<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>Success !</strong> give it a click if you like.
    </div>
</div>

этот пакет позволяет легко и удобно получать вложенную разметку с помощью кода в стиле Emmet и даже вокруг существующего содержимого или других компонентов. Вы также можете использовать черту Markup , предоставляемую этим пакетом, для упаковки других компонентов Blade с помощью синтаксиса Emmet:

use Aqua\Emerald\Traits\Markup;
 
class YourComponent extends Component
{
    use Markup;
 
    public function __construct(public $wrap) {...}
 
    // ...
}

Теперь вы можете использовать аббревиатуры, которые будут обернуть ваш компонент:

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

Ознакомьтесь с полезными примерами для дальнейшего вдохновения о том, как вы можете использовать этот пакет с Bootstrap, Alpine или любыми другими потребностями вывода HTML.

Вы можете узнать больше об этом пакете, получить полные инструкции по установке и просмотреть исходный код на GitHub.