How to use a wizard as full page component

[rabol]

Hi

how can I use a wizard as full page component ?

[ju5t]

What have you tried yourself?

[rabol]

would I ask if I knew ?

Normally on can call the Livewire component directly, but one need to something different to make the Wizard working.

[ju5t]

@rabol That's not what I'm asking :)

I'm asking what you have tried yourself. If I know what you have tried so far I can help you how to find the solution for similar questions in the future. Because in this case; it's not very difficult if you check the source.

[rabol]

I have tried to override the render() method of the main Wizard component

#[Layout('layouts.app')]
    public function render()
    {
        $currentStepState = $this->getCurrentStepState();

        return view('livewire-wizard::wizard', compact('currentStepState'));
    }
    ```
    
    and then add the 
```#[Layout('layouts.app')]```

to each step component

They render as I would like, but does not work. Meaning that when I press 'next' i get this error:

Missing [$rules/rules()] property/method on: [App\Livewire\Wizards\DemoWizard\DemoWizardStepOne].

[rabol]

<?php

namespace App\Livewire\Wizards\DemoWizard;

use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Foundation\Application;
use Livewire\Attributes\Layout;
use Spatie\LivewireWizard\Components\StepComponent;

class DemoWizardStepOne extends StepComponent
{
    public function rules(): array
    {
        return [];
    }


    public function submit(): void
    {
        $this->validate();

        if ($this->hasNextStep()) {
            $this->nextStep();
        }
    }

    public function stepInfo(): array
    {
        return [
            'label' => __('Greeting'),
        ];
    }

    #[Layout('layouts.app')]
    public function render(): View|Application|Factory|\Illuminate\Contracts\Foundation\Application
    {
        return view('livewire.demo.one');
    }
}

[ju5t]

@rabol thanks, that helps.

I have tried to override the render() method of the main Wizard component

You were on the right track.

and then add the #[Layout('layouts.app')] to each step component

You only use #[Layout('layouts.app')] on the wizard component. The steps should not have a layout defined. You only do this on the wizard. Ps. You can add it on the class, it doesn't have to be on the render-method. Personally, I like it to be on the class, but that's up to you.

All in all you were really close.

Our solution is a little different than yours but it depends on your use case. Instead of rendering the default wizard's view, we render a custom view. Inside that view we can customize some things.

return view('our-own-wizard-view', [
    'currentStepState' => $this->getCurrentStepState(),
]);

Inside the our-own-wizard-view.blade.php file we do something like this:

<div>
    <x-button wire:click="help">Help (opens modal)</x-button>

    @livewire($currentStepName, $currentStepState, key($currentStepName))
</div>

The @livewire-part comes from https://github.com/spatie/laravel-livewire-wizard/blob/main/resources/views/wizard.blade.php.