PHPackages spiral-packages/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. [Framework](/categories/framework) 4. / 5. spiral-packages/livewire ActiveLibrary[Framework](/categories/framework) spiral-packages/livewire ======================== Livewire integration bridge for Spiral Framework 1.x-dev(2y ago)34501[5 issues](https://github.com/spiral-packages/livewire/issues)[1 PRs](https://github.com/spiral-packages/livewire/pulls)MITPHPPHP ^8.1 Since Sep 11Pushed 2y ago2 watchersCompare [ Source](https://github.com/spiral-packages/livewire)[ Packagist](https://packagist.org/packages/spiral-packages/livewire)[ Docs](https://github.com/spiral-packages/livewire)[ RSS](/packages/spiral-packages-livewire/feed)WikiDiscussions 1.x Synced 1mo ago READMEChangelogDependencies (19)Versions (2)Used By (0) Livewire integration bridge for Spiral Framework ================================================ [](#livewire-integration-bridge-for-spiral-framework) [![PHP Version Require](https://camo.githubusercontent.com/23ff1da9e708d0acd9d5657fd2085fc6bc1caf6a95edb7b65dfeaabaac4c4ac9/68747470733a2f2f706f7365722e707567782e6f72672f73706972616c2d7061636b616765732f6c697665776972652f726571756972652f706870)](https://packagist.org/packages/spiral-packages/livewire)[![Latest Stable Version](https://camo.githubusercontent.com/a0c91107028b5a5ab6a6ebed6dd547ad6b4718c8d3a16f620c04d2119b73af46/68747470733a2f2f706f7365722e707567782e6f72672f73706972616c2d7061636b616765732f6c697665776972652f762f737461626c65)](https://packagist.org/packages/spiral-packages/livewire)[![phpunit](https://github.com/spiral-packages/livewire/actions/workflows/phpunit.yml/badge.svg)](https://github.com/spiral-packages/livewire/actions)[![psalm](https://github.com/spiral-packages/livewire/actions/workflows/psalm.yml/badge.svg)](https://github.com/spiral-packages/livewire/actions)[![Codecov](https://camo.githubusercontent.com/b6b04f9e187a6245ff5c99d239485c88639a8ef07f9736de4d9ac9479ed2f9ce/68747470733a2f2f636f6465636f762e696f2f67682f73706972616c2d7061636b616765732f6c697665776972652f6272616e63682f312e782f67726170682f62616467652e737667)](https://codecov.io/gh/spiral-packages/livewire)[![Total Downloads](https://camo.githubusercontent.com/57bba4e35fc68144fec668ffcf3ab0cfb459fbda94c94073524e64ae12ec79b9/68747470733a2f2f706f7365722e707567782e6f72672f73706972616c2d7061636b616765732f6c697665776972652f646f776e6c6f616473)](https://packagist.org/packages/spiral-packages/livewire)[![type-coverage](https://camo.githubusercontent.com/aa5abfa5f8dc9d2770c3d40ea3ef12cfdb9ea55df5bbfaa97eb98c4f91fc1620/68747470733a2f2f73686570686572642e6465762f6769746875622f73706972616c2d7061636b616765732f6c697665776972652f636f7665726167652e737667)](https://shepherd.dev/github/spiral-packages/livewire)[![psalm-level](https://camo.githubusercontent.com/f4889015bc34415ae169fdc3b35aa3706a2e0ef8c501f1f950f33627ef028caa/68747470733a2f2f73686570686572642e6465762f6769746875622f73706972616c2d7061636b616765732f6c697665776972652f6c6576656c2e737667)](https://shepherd.dev/github/spiral-packages/livewire) WARNING! -------- [](#warning) This package is currently under active development. It is not recommended for use in production environments due to potential instability. Requirements ------------ [](#requirements) Make sure that your server is configured with following PHP version and extensions: - PHP 8.1+ - Spiral framework 3.7+ Installation ------------ [](#installation) You can install the package via composer: ``` composer require spiral-packages/livewire ``` To enable the package in your Spiral Framework application, you will need to add the `Spiral\Livewire\Bootloader\LivewireBootloader` class to the list of bootloaders in your application: ``` protected const LOAD = [ // ... \Spiral\Livewire\Bootloader\LivewireBootloader::class, ]; ``` > **Note**If you are using [`spiral-packages/discoverer`](https://github.com/spiral-packages/discoverer), you don't need to register bootloader by yourself. ### Template engines [](#template-engines) #### Twig [](#twig) To get started with **Livewire** and **Twig** in Spiral Framework application, need to add the `Spiral\Livewire\Bootloader\TwigBootloader` class to the list of bootloaders in your application. Here's an example of how to do that: ``` // ... \Spiral\Livewire\Bootloader\TwigBootloader::class, ``` When the **TwigBootloader** is registered, it provides the `Spiral\Livewire\Twig\Extension\LivewireExtension` extension that allows to use the **livewire\_styles**, **livewire\_scripts**, **livewire** Twig functions. - **livewire\_styles** and **livewire\_scripts** - These functions are used to include the required Livewire CSS and JavaScript code. - **livewire** - This function takes the `name` of the component as the first parameter and renders the initial state of the component. Subsequent parameters will be passed to the component's **mount** method. #### Stempler [](#stempler) To get started with **Livewire** and **Stempler** in Spiral Framework application, need to add the `Spiral\Livewire\Bootloader\StemplerBootloader` class to the list of bootloaders in your application. Here's an example of how to do that: ``` // ... \Spiral\Livewire\Bootloader\StemplerBootloader::class, ``` When the **StemplerBootloader** is registered, it provides the `Spiral\Livewire\Template\Stempler\LivewireDirective`directive that allows to use the **livewireStyles**, **livewireScripts** directives and `Spiral\Livewire\Template\Stempler\NodeVisitor` that can render a Livewire component on a page using the **<livewire:name />** tag syntax. - **livewireStyles** and **livewireScripts** - These functions are used to include the required Livewire CSS and JavaScript code. Configuration ------------- [](#configuration) The configuration file should be located at **app/config/livewire.php**, and it allows you to set options. Here is an example of how the configuration file might look: ``` use Spiral\Events\Config\EventListener; use Spiral\Livewire\Component\Registry\Processor\AttributeProcessor; use Spiral\Livewire\Event\Component\ComponentHydrateSubsequent; use Spiral\Livewire\Listener\Component\SupportChildren; use Spiral\Livewire\Listener\Component\SupportLocales; use Spiral\Livewire\Middleware\Component\CallHydrationHooks; use Spiral\Livewire\Middleware\Component\CallPropertyHydrationHooks; use Spiral\Livewire\Middleware\Component\HydrateModelProperties; use Spiral\Livewire\Interceptor\Mount\CycleInterceptor; use Spiral\Livewire\Interceptor\Mount\TypecasterInterceptor; return [ 'listeners' => [ // ... ComponentHydrateSubsequent::class => [ new EventListener( listener: SupportLocales::class, method: 'onComponentHydrateSubsequent', priority: 10 ), new EventListener( listener: SupportChildren::class, method: 'onComponentHydrateSubsequent', priority: 20 ), ], // ... ], 'interceptors' => [ 'mount' => [ CycleInterceptor::class, TypecasterInterceptor::class, ], 'boot' => [] ], 'initial_hydration_middleware' => [ // ... CallHydrationHooks::class, // ... ], 'hydration_middleware' => [ // ... HydrateModelProperties::class, // ... ], 'initial_dehydration_middleware' => [ // ... CallPropertyHydrationHooks::class, // ... ], 'dehydration_middleware' => [ // ... CallPropertyHydrationHooks::class, // ... ], 'processors' => [ // ... AttributeProcessor::class, // ... ], 'disable_browser_cache' => true, ]; ``` > **Notice**The package is configured by default and does not require any additional configuration. Use the config file only if you need to change the default configuration. > **Warning**The order of all middleware is important! The correct order can be viewed in the default configuration here: **src/Bootloader/ConfigBootloader.php** Usage ----- [](#usage) Add the required Livewire CSS and JavaScript code: ### Twig [](#twig-1) ``` > // ... {{ livewire_styles() }} {% block body %}{% endblock %} {{ livewire_scripts() }} ``` ### Stempler [](#stempler-1) ``` > // ... @livewireStyles // ... @livewireScripts ``` Lets create a simple Livewire component **Counter**: ``` namespace App\Endpoint\Web\Livewire\Component; use Spiral\Livewire\Attribute\Component; use Spiral\Livewire\Attribute\Model; use Spiral\Livewire\Component\LivewireComponent; #[Component(name: 'counter', template: 'components/counter')] final class Counter extends LivewireComponent { #[Model] public int $count = 0; public function increment(): void { $this->count++; } } ``` Create a template: ``` + {{ count }} ``` Call the Livewire component anywhere in your template. ### Twig [](#twig-2) ``` {{ livewire('counter') }} ``` ### Stempler [](#stempler-2) ``` ``` Now reload the page in the browser, you should see the counter component rendered. If you click the "+" button, the page should automatically update without a page reload. ### Validation [](#validation) The first step in enabling validation in your Livewire components is to make sure that `spiral\validator` or `spiral-packages/laravel-validator` packages are installed and properly configured in your application. Once you have ensured that the validator package is installed, you will need to add the `Spiral\Livewire\Bootloader\ValidationBootloader` class to the list of bootloaders in your application: ``` protected const LOAD = [ // ... \Spiral\Livewire\Bootloader\ValidationBootloader::class, ]; ``` After adding the ValidationBootloader class, you must implement the `Spiral\Livewire\Validation\ShouldBeValidated`interface in your Livewire component and define the `validationRules` method to specify your validation rules. This method should return an array of validation rules for each property that requires validation. **Validation rules must be in the format supported by the validator you are using.** > **Notice**Validation rules are described in the [Spiral Validator](https://spiral.dev/docs/validation-spiral/3.6/en#validation-dsl), [Laravel Validator](https://laravel.com/docs/10.x/validation#available-validation-rules) documentation. For example, if you want to validate the **name** and **email** fields of a ContactForm component, you could define the component like this. #### Spiral Validator [](#spiral-validator) ``` namespace App\Endpoint\Web\Livewire\Component; use Spiral\Livewire\Attribute\Component; use Spiral\Livewire\Attribute\Model; use Spiral\Livewire\Component\LivewireComponent; use Spiral\Livewire\Validation\ShouldBeValidated; #[Component(name: 'contact-form', template: 'components/contact-form.twig')] final class ContactForm extends LivewireComponent implements ShouldBeValidated { #[Model] public string $name; #[Model] public string $email; public function submit(): void { // This method will only be called if all the data is valid } public function validationRules(): array { return [ 'name' => ['required'], 'email' => ['required', 'email'] ]; } ``` #### Laravel Validator [](#laravel-validator) ``` namespace App\Endpoint\Web\Livewire\Component; use Spiral\Livewire\Attribute\Component; use Spiral\Livewire\Attribute\Model; use Spiral\Livewire\Component\LivewireComponent; use Spiral\Livewire\Validation\ShouldBeValidated; #[Component(name: 'contact-form', template: 'components/contact-form.twig')] final class ContactForm extends LivewireComponent implements ShouldBeValidated { #[Model] public string $name; #[Model] public string $email; public function submit(): void { // This method will only be called if all the data is valid } public function validationRules(): array { return [ 'name' => 'required', 'email' => 'required|email' ]; } ``` In this examples, the validationRules method returns an array of rules that specify that both name and email are required fields, and that the email field must be a valid email address. - Validator can validate only single property when the property is updated. If the component is configured to update the data when the field changes. For example, a validator might validate an Email and display an error **before**the user clicks the Submit button. - Before calling the component method, the validator will check all the data and only call the method if all data is valid. ### Interceptors [](#interceptors) Spiral provides a way for developers to customize the behavior of their executing `boot` and `mount` methods through interceptors. An interceptor is a piece of code that is executed before or after a mount or boot method is called. Some interceptors are provided by the package and enabled by default. - **Spiral\\Livewire\\Interceptor\\Mount\\CycleInterceptor** - This is `mount` interceptor. Automatically resolves Cycle entities based on given parameter. - **Spiral\\Livewire\\Interceptor\\Mount\\TypecasterInterceptor** - This is `mount` interceptor. Automatically converts the parameters passed to the mount method to the required type (**bool**, **int**, **float**, **array**). > **Notice**The `CycleInterceptor` requires [Cycle ORM Bridge](https://github.com/spiral/cycle-bridge). If you don't use it, the interceptor will not be activated. You can create an interceptor yourself and register it in the config file. ``` namespace App\Interceptor; use Spiral\Core\CoreInterceptorInterface; use Spiral\Core\CoreInterface; use Spiral\Livewire\Component\LivewireComponent; class SomeInterceptor implements CoreInterceptorInterface { /** * @param class-string $controller Component class name * @param string $action method (boot or mount) * @param array{ * component: LivewireComponent, * reflection: \ReflectionMethod, * parameters: array * } $parameters Array with additional parameters. * For the mount method, contains an array with the parameters that were passed to it. */ public function process(string $controller, string $action, array $parameters, CoreInterface $core): mixed { // Some code before calling method mount or boot $core->callAction($controller, $action, $parameters); // Some code after calling method mount or boot return null; } } ``` ``` // file app/config/livewire.php use App\Interceptor\SomeInterceptor; use Spiral\Livewire\Interceptor\Mount\CycleInterceptor; use Spiral\Livewire\Interceptor\Mount\TypecasterInterceptor; return [ 'interceptors' => [ 'mount' => [ SomeInterceptor::class, CycleInterceptor::class, TypecasterInterceptor::class, ], 'boot' => [ SomeInterceptor::class, ] ], ]; ``` Testing ------- [](#testing) ``` composer test ``` ``` composer psalm ``` ``` composer cs ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Health Score 18 ↓ LowBetter than 8% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community12 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 91.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 754d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/e104cad59c07d048c0b3650db8a2fde19e496e5357ee1ce1a6b3a375cade5e8a?d=identicon)[msmakouz](/maintainers/msmakouz) --- Top Contributors [![msmakouz](https://avatars.githubusercontent.com/u/67324318?v=4)](https://github.com/msmakouz "msmakouz (43 commits)")[![butschster](https://avatars.githubusercontent.com/u/773481?v=4)](https://github.com/butschster "butschster (3 commits)")[![adikalon](https://avatars.githubusercontent.com/u/20326545?v=4)](https://github.com/adikalon "adikalon (1 commits)") --- Tags livewirephpspiralspiral-frameworklivewirespiral ### Code Quality TestsPHPUnit Static AnalysisPsalm Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/spiral-packages-livewire/health.svg) ``` [![Health](https://phpackages.com/badges/spiral-packages-livewire/health.svg)](https://phpackages.com/packages/spiral-packages-livewire) ``` ### Alternatives [laravel-frontend-presets/tall TALL preset for Laravel. 2.6k692.9k1](/packages/laravel-frontend-presets-tall)[spiral/temporal-bridge Temporal integration package for Spiral Framework 58901.5k](/packages/spiral-temporal-bridge)[pestphp/pest-plugin-livewire The Pest Livewire Plugin 635.6M541](/packages/pestphp-pest-plugin-livewire)[mhmiton/laravel-modules-livewire Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules. 236409.6k9](/packages/mhmiton-laravel-modules-livewire)[camya/filament-title-with-slug TitleWithSlugInput - Easy Permalink Slugs for the FilamentPHP Form Builder (PHP / Laravel / Livewire) 13444.5k](/packages/camya-filament-title-with-slug)[blendbyte/filament-title-with-slug TitleWithSlugInput - Easy Permalink Slugs for the FilamentPHP Form Builder (PHP / Laravel / Livewire) 1322.4k3](/packages/blendbyte-filament-title-with-slug) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)