Tairo provide helpers to build multiple page forms. This can be useful when you have a form that is too long to be displayed in a single page.

The parent page my-form.vue will contain the form definition and be responsible for the form state. It also should contains a <NuxtPage /> component to render the current step and use provideMultiStepForm.

The my-form/ folder contains the different steps of the form, index.vue being the first step. Each step can then use useMultiStepForm to access the form state and methods.

Useful resources:

• Nested Routes on nuxt.com
• Nested Routes on router.vuejs.org
• Provide/Inject documentation on vuejs.org

First we need to define types for the form data and the steps metadata, this is optional but can be useful to have better type checking.

Then we can provide our form initial state, our submit method handler and steps definitions using the provideMultiStepForm function in our parent page.

Steps items requires a to property that should be the path to the step page. The a meta property is optional but can be useful to render the steps in the UI. Another optional property is validate that can be used to validate the form data before moving to the next step, we will see how to use it later.

Once we have our parent page setup, we can create the steps pages under the my-form/ directory.

We will be able to access form context with useMultiStepForm composable. If you omit to call provideMultiStepForm in the parent page, you will get an error when trying to use useMultiStepForm.

And there are pages examples to use with our form:

By default, no validation is performed when moving to the next step. You can add a validate function to the step definition to perform validation before moving to the next step.

The validate function get the current form context as argument, in which you can use the setFieldError method to set an error message for a specific field. If you set an error message for a field and don't return anything within validate function, the form won't move to the next step.

The setFieldError(key, message) method populate the errors.fields[key] object in the form context, which can be used to display errors in the UI.

In addition, we need to ensure on page load that previous steps are valid, as the user can navigate directly to a step page. We can do this by calling the checkPreviousSteps method in the onBeforeMount hook inside our steps pages.

We can update our form pages to display errors on the fields and check previous steps (only relevant parts are shown):