Use Emmet-style Abbreviations in Blade Components

Laravel Blade Emerald provides Emmet-like abbreviations to generate and wrap Laravel Blade components with markup. It works by using an <x-markup/> Blade component that accepts an Emmet abbreviation:

<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>

This package makes it easy and convenient to achieve nested markup via Emmet-style code and even around existing content or other components. You can also use the Markup trait provided by this package to wrap other Blade components using Emmet syntax:

use Aqua\Emerald\Traits\Markup;

class YourComponent extends Component
{
    use Markup;

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

    // ...
}

Now you can use abbreviations that will wrap your component:

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

Check out the useful examples for further inspiration of how you can use this package with Bootstrap, Alpine, or any other HTML output needs.

You can learn more about this package, get full installation instructions, and view the source code on GitHub.