Writing your first component | 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)  Basic-usage  Writing your first component

 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)

 Writing your first component
============================

The contents of a component can be stored in a simple Blade view.

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

   {{ $message }}

```

Before using that component you must first register it. Typically you would do this in the `AppServiceProvider boot() method` or a service provider of your own

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

BladeX will automatically kebab-case your Blade view name and use that as the tag for your component. So for the example above the tag to use your component would be `my-alert`.

If you want to use a custom tag name use the `tag`-method.

```
BladeX::component('components.myAlert')->tag('my-custom-tag');
```

You can also register an entire directory like this.

```
// This will register all Blade views that are stored in `resources/views/components`

BladeX::component('components.*');
```

Or you can register multiple directories like this.

```
// This will register all Blade views that are stored in both `resources/views/components` and `resources/views/layouts`

BladeX::component([
   'components.*',
   'layouts.*',
]);
```

You can also register sub-directories like this.

```
// This will register all Blade views that are stored in both `resources/views/components` and `resources/views/layouts`

BladeX::component(
   'components.**.*',
);
```

In your Blade view you can now use the component using the kebab-cased name:

```
My view

```