From BladeX to Blade | laravel-blade-x | Spatie

 SPATIE

laravel-blade-x
===============

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-blade-x](https://spatie.be/docs/laravel-blade-x/v2)  Under-the-hood  From BladeX to Blade

 Version   v2

 Other versions for crawler [v2](https://spatie.be/docs/laravel-blade-x/v2)

  From BladeX to Blade
- [ Introduction ](https://spatie.be/docs/laravel-blade-x/v2/introduction)
- [ Postcardware ](https://spatie.be/docs/laravel-blade-x/v2/postcardware)
- [ Requirements ](https://spatie.be/docs/laravel-blade-x/v2/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-blade-x/v2/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-blade-x/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-blade-x/v2/changelog)
- [ Upgrading ](https://spatie.be/docs/laravel-blade-x/v2/upgrading)
- [ About us ](https://spatie.be/docs/laravel-blade-x/v2/about-us)

Basic usage
-----------

- [ Writing your first component ](https://spatie.be/docs/laravel-blade-x/v2/basic-usage/writing-your-first-component)
- [ Using variables ](https://spatie.be/docs/laravel-blade-x/v2/basic-usage/using-variables)
- [ Using slots ](https://spatie.be/docs/laravel-blade-x/v2/basic-usage/using-slots)

Advanced usage
--------------

- [ Transforming data with view models ](https://spatie.be/docs/laravel-blade-x/v2/advanced-usage/transforming-data-with-view-models)
- [ Sharing data with context ](https://spatie.be/docs/laravel-blade-x/v2/advanced-usage/sharing-data-with-context)
- [ Prefixing components ](https://spatie.be/docs/laravel-blade-x/v2/advanced-usage/prefixing-components)

Under the hood
--------------

- [ From BladeX to Blade ](https://spatie.be/docs/laravel-blade-x/v2/under-the-hood/from-bladex-to-blade)

 From BladeX to Blade
====================

When you register a component

```
BladeX::component('components.myAlert')
```

with this HTML

```
{{-- resources/views/components/myAlert.blade.php --}}

   {{ $message }}

```

and use it in your Blade view like this,

```

```

our package will replace that HTML in your view with this:

```
@component('components/myAlert', ['type' => 'error','message' => $message,])@endcomponent
```

After that conversion Blade will compile (and possibly cache) that view.

Because all this happens before any HTML is sent to the browser, client side frameworks like Vue.js will never see the original html you wrote (with the custom tags).

 A good
match?
-------------

### What we do best

- All things Laravel
- Custom frontend components
- Building APIs
- AI-powered features
- Simplifying things
- Clean solutions
- Integrating services

### Not our cup of tea

- WordPress themes
- Cutting corners
- Free mockups to win a job
- "Just execute the briefing"

 In short: we'd like to be a **substantial part** of your project.

 [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)