Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/laravel-livewire-wizard
Headless Livewire components to build wizards
https://github.com/spatie/laravel-livewire-wizard
laravel livewire php
Last synced: 5 days ago
JSON representation
Headless Livewire components to build wizards
- Host: GitHub
- URL: https://github.com/spatie/laravel-livewire-wizard
- Owner: spatie
- License: mit
- Created: 2022-05-13T14:34:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T15:38:36.000Z (15 days ago)
- Last Synced: 2024-12-19T11:03:07.336Z (12 days ago)
- Topics: laravel, livewire, php
- Language: PHP
- Homepage: https://spatie.be/docs/laravel-livewire-wizard
- Size: 490 KB
- Stars: 361
- Watchers: 8
- Forks: 46
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Support: docs/support-us.md
Awesome Lists containing this project
README
# Build wizards using Livewire
[](https://packagist.org/packages/spatie/laravel-livewire-wizard)
[](https://github.com/spatie/laravel-livewire-wizard/actions?query=workflow%3Arun-tests+branch%3Amain)
[](https://github.com/spatie/laravel-livewire-wizard/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amain)
[](https://packagist.org/packages/spatie/laravel-livewire-wizard)
This package offers lightweight Livewire components that allow you to easily build a wizard. With "wizard" we mean a multi-step process in which each step has its own screen.
Here's what a wizard component class could look like.
```php
use Spatie\LivewireWizard\Components\WizardComponent;
class CheckoutWizardComponent extends WizardComponent
{
public function steps() : array
{
return [
CartStepComponent::class,
DeliveryAddressStepComponent::class,
ConfirmOrderStepComponent::class,
];
}
}
```
A step is class that extends `StepComponent` (which in its turn extends `Livewire\Component`). You can do anything in here that you can do with a regular Livewire component.
```php
namespace App\Components;
class CartStepComponent extends StepComponent
{
// add any Livewire powered method you want
public function render()
{
return view('checkout-wizard.steps.cart');
}
}
```
You can easily [control which step is displayed](https://spatie.be/docs/laravel-livewire-wizard/v1/usage/navigating-steps), [access state of other steps](https://spatie.be/docs/laravel-livewire-wizard/v1/usage/accessing-state), and [build any navigation](https://spatie.be/docs/laravel-livewire-wizard/v1/usage/rendering-navigation) you desire.
In [this repo on GitHub](https://github.com/spatie/laravel-livewire-wizard-demo-app), you'll find a demo Laravel application that uses the laravel-livewire-wizard package to create a simple checkout flow.
## Support us
[
](https://spatie.be/github-ad-click/laravel-livewire-wizard)
We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
## Documentation
All documentation is available [on our documentation site](https://spatie.be/docs/laravel-livewire-wizard).
## Testing
```bash
composer test
```
## Alternatives
Our package is headless. This means that it does not provide UI, but it offers functions to easily build any UI you want. If you do not wish to build your own UI, you could consider using [vildanbina/livewire-wizard](https://github.com/vildanbina/livewire-wizard), which includes pre-built navigation and CSS.
[Filament](https://filamentphp.com) users could also take a look at [the built-in wizard functionality](https://filamentphp.com/docs/2.x/forms/layout#wizard).
Another headless package [satoved/laravel-livewire-steps](https://github.com/satoved/laravel-livewire-steps) that uses Livewire form objects for steps instead of Livewire components can be considered for simpler use cases.
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
- [Freek Van der Herten](https://github.com/freekmurze)
- [Rias Van der Veken](https://github.com/riasvdv)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.