Topic: MDB 6 - Updated Stepper

londoh pro asked 4 years ago

I have a complex form within a stepper using 5.8.3.

In order to avoid a long unwieldy component I've broken the form down into separate form components as per the (simplified) snippet included here. This has worked well.

I feel I should probably update 5.8.3 to 6. at this point, but am concerned about the stepper. I haven't really looked in depth at rewriting it yet, but I wondered if devs/anyone has any advice to update stepper to 6.0.0 and specifically re continuing to use my existing form partials, or using some other method of breaking the form into separate files.

Thank you.

Resources (screenshots, code snippets etc.)

    next-btn="Next Step"
    submit-btn="Submit Entry"
        name="User Details"
            title="User Details"


londoh pro answered 4 years ago

Hi @Magdalena Dembna

thanks very much for your detailed input.

So I'll upgrade to 6 and refactor my stepper. I'll post here again if any more questions.

Magdalena Dembna staff answered 4 years ago

Take a look at within example: . First, what you need to do it add :steps="2" property - it will create the given number of named slots. If you want to add name field, use the array instead of number (:steps="[{name: "Step 1"}, {name: Step2}]"). Then, replace mdb-step with the template tag corresponding to the named slot (f.e <template #1> YOUR CONTENT </template> will be the first step, #2 the second, etc). You no longer have to pass a function as a property - component emits submit event. Customizing buttons (text, colour) goes through options object. You can find more details about all available options in the API tab (Stepper Within). As for using your custom components within the stepper - just nest them between template tags. Kind regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: any
  • Browser: all
  • OS: n/a
  • Provided sample code: No
  • Provided link: No