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

 Version   v2

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

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

  Laravel-blade-x
=================

 Supercharged Blade Components

### Useful links

- [Repository](https://github.com/spatie/laravel-blade-x)
- [Discussions](https://github.com/spatie/laravel-blade-x/discussions)

Introduction
------------

Notice
==========================================================================

We have abandoned this package because Laravel 7 introduced native support for Blade-X style components.

Only use this package if you're on Laravel 6 or below.

When upgrading to Laravel 7 you should convert your Blade X components to native Laravel Blade components

Introduction
============================================================================================

This package provides an easy way to render custom HTML components in your Blade views.

Instead of this:

```
My view

@include('myAlert', ['type' => 'error', 'message' => $message])
```

you can write this

```
My view

```

You can place the content of that alert in a simple blade view that needs to be [registered](https://docs.spatie.be/laravel-blade-x/v2/basic-usage/writing-your-first-component) before using the `my-alert` component.

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

   {{ $message }}

```

### A note on performance

Because our package operates before Blade compiles views there is no performance penalty. Blade can just cache all views.

Because all the transformations are done serverside, there are no interop problems with a clientside framework such as Vue or React.

For more information on how the transformation is done, checkout [the "From BladeX to Blade" section](https://docs.spatie.be/laravel-blade-x/v2/under-the-hood/from-bladex-to-blade).