Blog Detail


Use Emmet Style Abbreviation for Laravel Blade Components cover image

arrow_back Use Emmet Style Abbreviation for Laravel Blade Components

Laravel Blade Emerald is a package by Aqua that utilize emmet style abbreviation to generate and wrap Laravel Blade Component with markup.


  • Generate HTML in a Blade file via package provided component: x-markup make=“div.col>span#alert”
  • Emmet style syntax to produce nested markup
  • Wrap around any content / another component with markup
  • Make any Blade Component accept abbreviation to wrap itself with markup ( doesn’t work for Anonymous Components )


You can install this package via composer:

composer require aqua/blade-emerald


The package provides a Blade Component
x-emerald-markup, This component can be used like x-markup as an alias. The component support one prop named make which accept the abbreviation

Generate static nested markup

<x-markup make="div.card[style='color:green;'] > div.card-body#box" />

Produced HTML

<div class="card" style="color:green;">
    <div class="card-body" id="box"></div>

Wrap Some Content

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

Produced HTML

<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>Success !</strong> give it a click if you like.

Accept abbreviation in your Blade Component

This feature doesn’t support Anonymous Components

  1. Use Aqua\Emerald\Traits\Markup trait in your Component Class
class YourComponent extends Component {
    use Markup;
  1. The Markup trait assumes the prop name to be a wrap, so let’s add this as a class property & instantiate.
public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion
read more about constructor property promotion
  1. Accept Abbreviation
<x-your-component wrap=" > .card-body.text-danger" />

Produced HTML

<div class="card bg-dark pt-2">
    <div class="card-body text-danger">
        <!-- actual content of your-component -->
        <p>Laravel... The PHP Framework for Web Artisans</p>
        <!-- actual content of your-component -->
  1. Accept abbreviation using the prop of your choice to customize the prop name that receives the abbreviation create a static property $wrapby and set its value to your prop name.
class YourComponent extends Component {
    use Markup;

    protected static $wrapby = 'markup'; 

    public function __construct(public $markup, ...) {
<x-your-component markup=" > .card-body.text-danger" />              

For more details, You can visit its complete documentation and source code on Github.

Published at : 30-03-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project