Livewire Wizard Laravel Package

Getting Started

1. Install the package via Composer: composer require vildanbina/livewire-wizard
2. Ensure Alpine.js and TailwindCSS are included (per README instructions) — use CDN or build tooling as needed
3. Create a wizard component extending WizardComponent and define $steps = [StepClass::class, ...]
4. For each step, create a class extending Step, implement title(), view, mount(), validate(), and save()
5. Display the wizard in a Blade template with <livewire:wizard-class />
6. First use case: Multi-step user registration or edit form — e.g., split into General, Preferences, Review steps with persistent state across navigation

Implementation Patterns

• State binding: Always use wire:model="state.field" in step views — the package expects all inputs nested under $state
• Model integration: Use model() in WizardComponent to supply Eloquent instance; in Step::mount(), hydrate $state with existing data via $this->mergeState([...])
• Navigation control: Use programmatic helpers like $this->goToNextStep(), $this->setStep(2), or $this->resetForm() in step actions or buttons
• Validation: Return Laravel validation rules in Step::validate() — the package handles display and abort behavior automatically
• Step lifecycle: Leverage Livewire hooks: onStepIn(), onStepOut(), updatedState(), updatingState() for analytics, conditional logic, or async side effects
• Custom views: Publish views with php artisan vendor:publish --tag=livewire-wizard-views to tailor layout, icons, or footer (e.g., add "Save Draft" button)
• Integration with WireUI: Use <x-wui-card>, <x-wui-input>, etc., in step views for consistent styling (package expects WireUI)

Gotchas and Tips

• Purge safelist: Ensure tailwind.config.js includes the package’s view paths (e.g., ./vendor/vildanbina/livewire-wizard/resources/views/*.blade.php) to avoid missing classes in production builds
• $state isolation: Do not mix $state properties with top-level component properties — $state is the canonical data source for validation and saving
• Validation arrays: The validate() method returns [rules, messages, attributes]; omitting rules or messages is allowed, but ensure correct index alignment if partially customizing
• resetForm() behavior: Clears $state, resets current step to first, but does not re-instantiate the model — use setModel() or reload in mount() if needed
• Livewire 3 requirement: v2+ requires Livewire 3 — old apps on v2.x must upgrade before installing
• CSS framework lock-in: Default styles assume Tailwind + WireUI; publishing views is strongly recommended for non-Tailwind projects
• Debugging: Use $this->getCurrentStep() in updatedState() or livewire dev tools to inspect step context and state snapshots during development