PHPackages                             titonova/x-livewire - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. titonova/x-livewire

ActiveLibrary[Templating & Views](/categories/templating)

titonova/x-livewire
===================

A package that allows you to use livewire components the same way you would use blade components. Ie, giving it slots, atttributes etc

1.2.1(1y ago)141521MITPHPPHP ^8.1

Since Aug 2Pushed 1y ago2 watchersCompare

[ Source](https://github.com/titonova/x-livewire)[ Packagist](https://packagist.org/packages/titonova/x-livewire)[ Docs](https://github.com/titonova/x-livewire)[ RSS](/packages/titonova-x-livewire/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (10)Versions (9)Used By (0)

[![](https://camo.githubusercontent.com/2bedf63f24cda7efab02da955dc11fb7ef8a060e2f26b73c33a7aac84529b8a3/68747470733a2f2f6769746875622d6164732e73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f737570706f72742d756b7261696e652e7376673f743d31)](https://supportukrainenow.org)

> ⚠️ Still in beta phase. Do not use in production environments (without testing) yet Contributions are highly welcomed

X-livewire
==========

[](#x-livewire)

[![Latest Version on Packagist](https://camo.githubusercontent.com/c1d5ee6125e3a667617d22b4994ec8c7d8c357798de205853b9cf1ea74a66fea/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7469746f6e6f76612f782d6c697665776972652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/titonova/x-livewire)[![GitHub Tests Action Status](https://camo.githubusercontent.com/b623283f85933ed0842f5bd2669ea23983ce96fdcdd43171b0d9a8b5c7d9d4b8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f7469746f6e6f76612f782d6c697665776972652f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/titonova/x-livewire/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0a46bd89f8469c2f990b55fdeabf132b5326a89dd404a968b1fb715bf9918c73/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f7469746f6e6f76612f782d6c697665776972652f466978253230504850253230636f64652532307374796c652532306973737565733f6c6162656c3d636f64652532307374796c65)](https://github.com/titonova/x-livewire/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/7a04a4f7d8bf2fb175e5b724c8c1d823c8da7cc619276db785054c2a9afdb3dc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7469746f6e6f76612f782d6c697665776972652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/titonova/x-livewire)

This package allows you to render livewire components like a blade component, giving it attributes, slots etc.

Assuming you wanted to create a livewire component, `alert`, usually you would render the component by: ``. However, there a few problems.

1. You can't allow slots within the component. That is, this is invalid: `Alert`.
2. You can't access the `$attributes` bag. Thus, can't access the `$attributes` variable directly. That is, if you do this: ``, you can't access the `$title` attribute by `$attributes->get('title')`. Instead, you'd have to make `$title` a public property in the component. Not to mention, other methods on `$attributes` are not accessible. Such as `->merge([])`, `->whereStartsWith()`, etc.

The creator of livewire, Caleb Porzio has made it clear that [adding slots, attributes etc are not currently on the roadmap](https://github.com/livewire/livewire/issues/68#issuecomment-599012420).

That's why I created X-livewire.

With X-Livewire, you can do:

```

        My alert message

```

And, just like with Blade, you can:

1. Access the `$attributes` variable: `{{ $attributes->get('title') }}`,
2. Access the `$slot` variable: `{{ $slot }}`

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require titonova/x-livewire

```

Usage
-----

[](#usage)

1. After creating your livewire component, make it extend `XLivewireBaseComponent` rather than `Component`. ie: `class Alert extends XLivewireBaseComponent{`
2. If you want to access the `$attributes` bag in your x-livewire component's backend, add `$this->setProps()` as the first line in your component's `mount()` method.
3. In the view file of the component, e.g `alert.blade.php` add `@setUpXLivewire` to the top of the file.
4. When you want to render the component: `Blade  My alert message  `

---

You can access the `$slot` and `$attributes` variables just like you would in a Blade component: `{{ $slot }} {{ $attributes->get('title') }}`

You can also access the array of attributes that were passed to the x-livewire's component's tag but were not explicitedly declared in the class as `$tagAttributes` property. `{{ $tagAttributes->get('href') }}`For example, attributes like `primary`, `lg` etc that don't need corresponding properties declarations in the class. E.g ```HTML Google ....

```