Modal Multi Step

Displays a modal that appears when clicking on an element. This component extends the modal component and adds a multi step feature. Which means that you can use any prop that the modal component accepts.

Install

Run the following command to install the modal component:

npx acc-nuxt add ModalMultiStep

Composition

This component extends the modal component and adds a multi-step feature. Its Props list below contains only the additional multi-step props; see the Modal documentation for inherited modal props.

Multi step

Disable next

Controlled step

Custom styles

Header slot

Content slot

Props

totalSteps:number

Total number of steps.

disableNext:boolean— optional

default:false

Disables the next button.

disableConfirm:boolean— optional

default:false

Disables the confirm button.

confirmText:string— optional

default:Confirm

Text for the confirm button.

closeText:string— optional

default:Close

Text for the close button.

Bindings

v-model:open:boolean

Controls whether the composed modal is open.

v-model:current-step:number

Controls the active step.

Emits

@update:open

Emitted when the modal open state changes.

@update:currentStep

Emitted when the active step changes.

Slots

The multi-step modal component provides the following slots for customization.

#trigger

The element that triggers the modal on click. This is typically a button. Optional if using v-model:open.

#header

The header content displayed above the main modal content.

#content

The content displayed on all tabs/steps. This content will be shown on every step unless overridden by specific tab slots.

#tab-{n}

Dynamic slots for each step content, where {n} is the step number (1-indexed). For example: #tab-1, #tab-2, #tab-3.

#footer="{ close, confirm, submitting, disableConfirm }"

Slot for customizing the modal footer. Receives close and confirm functions, along with submitting and disableConfirm states.