VueJs using multi step modal or different vue components

Question

I want to create an onboarding form with visual progress for clients using VueJs.

It's a multistep form that will use state management to "remember" the users page position.

What option would you go for and why?

Option 1: Using a multistep modal where on going to the next step means showing a different html section of the same page.

<!--  The Modal -->

<section>
    <h3>Welcome!</h3>
    <p>You are about to experience data collection bliss.</p>
    <button @click="goToStep(2)">Next</button>
</section>

<section>
    <h3>Step 2: Yay!</h3>
    <button @click="goToStep(3)">Next</button>
</section>

Option 2: Using different vue components and having the "next step" button lead to a different vue component using vue-router.

+Components
--- stepOne.vue
--- stepTwo.vue

Thanks in advance!

Quoc-Anh Nguyen Quoc-Anh Nguyen · Accepted Answer · 2017-10-06T08:34:54

You can create a new component and wrap all your step components. All state data will stay in this new component and send to all step component via props:

<wrapper-component>
  <step-one v-if="step === 1" />
  <step-two v-else-if="step === 2" />
</wrapper-component>

Or better, you can use Vuex to manage all shared state.

VueJs using multi step modal or different vue components

1 Answers