To build multi-step forms easily in a Vue app, we can use the vue-stepper package to help us.
In this article, we’ll look at how to use the vue-stepper package to add a multi-step form into our app.
Installation
To install the library, we run:
npm i vue-stepper
Create a Multistep Form
To create a multistep form, we need a component for the container.
Also, we need a component to display the step content.
For example, we can write:
App.vue
<template>
<div id="app">
<horizontal-stepper
:steps="demoSteps"
@completed-step="completeStep"
@active-step="isStepActive"
@stepper-finished="alert"
></horizontal-stepper>
</div>
</template>
<script>
import HorizontalStepper from "vue-stepper";
import StepOne from "./components/StepOne";
import StepTwo from "./components/StepTwo";
export default {
name: "App",
components: {
HorizontalStepper
},
data() {
return {
demoSteps: [
{
icon: "mail",
name: "first",
title: "Step 1",
subtitle: "Step 1",
component: StepOne,
completed: false
},
{
icon: "report_problem",
name: "second",
title: "Step 2",
subtitle: "Step 2",
component: StepTwo,
completed: false
}
]
};
},
methods: {
completeStep(payload) {
this.demoSteps.forEach(step => {
if (step.name === payload.name) {
step.completed = true;
}
});
},
isStepActive(payload) {
this.demoSteps.forEach(step => {
if (step.name === payload.name) {
if (step.completed === true) {
step.completed = false;
}
}
});
},
alert(payload) {
alert("end");
}
}
};
</script>
StepOne.vue
<template>
<div>
<input placeholder="email" v-model="email" @input="onChange">
</div>
</template>
<script>
export default {
data() {
return {
email: ""
};
},
beforeMount(){
if (this.email){
this.$emit("can-continue", { value: true });
}
},
methods: {
onChange() {
this.$emit("can-continue", { value: true });
}
}
};
</script>
StepTwo.vue
<template>
<div>
<input placeholder="problem" v-model="problem" @input="onChange">
</div>
</template>
<script>
export default {
data() {
return {
problem: ""
};
},
beforeMount(){
if (this.problem){
this.$emit("can-continue", { value: true });
}
},
methods: {
onChange() {
this.$emit("can-continue", { value: true });
}
}
};
</script>
In App.vue , we have the container for the steps.
The template has the horizontal-stepper component that has the icon, title, and subtitle of the form.
The completed-step event is emitted when we click next.
active-step is emitted when we go to a different step.
stepper-finished is emitted when all the steps are finished.
StepOne.vue and StepTwo.vue are our step components.
We set them as the content with the component property in the demoSteps array.
When we type some into the inputs, then the input event is emitted.
The onChange method is run when the input method is emitted so the can-continue event is emitted. When it’s emitted with an object with the value property set to true , then the Next button is enabled.
Now we can continue with the other steps.
Once we click the Finish button, then the stepper-finished event is emitted and we can see an alert because the alert method is run.
Conclusion
We can add a multi-step form into our Vue app with the vue-stepper package.
