VueCraft NPM

Multi-Step Forms ​

ts
import { useMultiStepForm } from '@macrulez/vue-form-schema'

const wizard = useMultiStepForm(
  [
    { title: 'Account', schema: accountFields },
    { title: 'Profile', schema: profileFields },
    { title: 'Confirm', schema: confirmFields },
  ],
  async (allValues) => {
    await api.register(allValues)
  },
)

useMultiStepForm return value ​

currentStep ​

Ref<number>

0-based index.

totalSteps ​

number

Number of steps.

isFirstStep / isLastStep ​

ComputedRef<boolean>

form ​

UseFormReturn

For the current step.

values ​

All values across all steps merged.

next() ​

Validate current step then advance (returns false if invalid).

back() ​

Go to previous step.

goTo(n) ​

Jump to step n.

submit() ​

Validate all steps then call onSubmit.

MultiStepFormRenderer ​

vue
import { MultiStepFormRenderer } from '@macrulez/vue-form-schema/ui'

<MultiStepFormRenderer :wizard="wizard" />

Renders the current step's fields and Back / Next / Submit navigation buttons.