Complete form steps up until a point

Complete forms steps up until a point eg. when loading a partially filled in form.

If we have a form with eg. 5 steps and we want to complete the steps up until step 3 (eg. when loading a stepped form with partially filled in data) and go to step 3, we can do the following:

  <Vueform ref="form$">
    <template #empty>
        <FormStep name="first" />
        <FormStep name="second" />
        <FormStep name="third" />
        <FormStep name="fourth" />
        <FormStep name="fifth" />

<script setup>
import { ref, onMounted } from 'vue'

const form$ = ref(null)

onMounted(() => {
  let step = 'third' // change this to the step you need
  let index = form$.value.steps$.steps$[step].index

  // go to 'third' step and enable all steps before

  // complete all steps before 'third' step
  form$.value.steps$.steps$Array.forEach((step$) => {
    if (step$.index < index) {

Here's how we can save form data in the background as the user fills in the steps:

Related RecipeSubmit data on form stepsLearn how to save form state when using steps.
👋 Hire Vueform team for form customizations and developmentLearn more