Looking to hire Laravel developers? Try LaraJobs

laravel-livewire-wizard maintained by jeffersongoncalves

Description
Build multi-step wizards using Livewire 3.
Last update
2026/09/05 23:29 (dev-main)
License
Downloads
134

Comments
comments powered by Disqus

Laravel Livewire Wizard

Laravel Livewire Wizard

Latest Version on Packagist Tests PHPStan GitHub Code Style Action Status Total Downloads License

A maintained fork of spatie/laravel-livewire-wizard v2, kept compatible with Livewire 3 and Laravel 11/12/13. Build multi-step wizards where each step is its own Livewire component, state flows between steps automatically, and navigation is a method call away.

Requirements

  • PHP 8.2+
  • Laravel 11, 12, or 13
  • Livewire 3

Installation

composer require jeffersongoncalves/laravel-livewire-wizard

Usage

1. Create the wizard component

namespace App\Livewire;

use JeffersonGoncalves\LivewireWizard\Components\WizardComponent;

class CheckoutWizardComponent extends WizardComponent
{
    public function steps(): array
    {
        return [
            CartStepComponent::class,
            DeliveryAddressStepComponent::class,
            ConfirmOrderStepComponent::class,
        ];
    }
}

2. Create each step

Each step is a regular Livewire component that extends StepComponent:

namespace App\Livewire;

use JeffersonGoncalves\LivewireWizard\Components\StepComponent;

class CartStepComponent extends StepComponent
{
    public function render()
    {
        return view('checkout-wizard.steps.cart');
    }
}

3. Register the components

use Livewire\Livewire;

Livewire::component('checkout-wizard', CheckoutWizardComponent::class);
Livewire::component('cart-step', CartStepComponent::class);
Livewire::component('delivery-address-step', DeliveryAddressStepComponent::class);
Livewire::component('confirm-order-step', ConfirmOrderStepComponent::class);

4. Render the wizard

<livewire:checkout-wizard />

5. Navigate between steps

From inside any step component:

$this->nextStep();
$this->previousStep();

Or directly in a view:

<div wire:click="previousStep">Back</div>
<div wire:click="nextStep">Next</div>

State set via public properties on one step is automatically available on the next. See the original Spatie docs for the full guide on initial state, custom state objects, and testing wizards — the v2/Livewire 3 API this package tracks is unchanged.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Security

If you discover any security-related issues, please email gerson.simao.92@gmail.com instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.