25/08/2023

Multistep form with nuxt & primevue

Ouch :) This article was published 1 year ago - might be out of date, check out stuff or leave comment

Learn how to design multistep form with basic elements in a few lines of code

Using the famous primevue starter for nuxt, we will build a multistep form based on vue and nuxt js , augmented by primevue elements.

first thing to do is install and run primevue starter for nuxt. You'll find everything on github page to install and run this nice piece of code using pnpm. You will find yourself with a nice demonstration of how to articulate multiple components for nuxt : tailwind and unocss for styling, primevue components for form building.

Among primevue components we will be using two main components to build the multistep architecture : while primevue steps component comes with a nice example of how to make a multistep form, we instead will focus on the progressbar component, because it looks nicer. Of course its official job looks more like a percentage display, but we will use it to display form steps, by simply displaying the max value of the component as the last step of our form . The trick here is to define the right display value calculated from the maxstep variable expressed as percentage : 

<ProgressBar :value="waveInterfaceStore.step*(100/maxstep)"> {{ waveInterfaceStore.step }}/{{maxstep}} </ProgressBar>

of course that piece of code above tells a lot more than a simple percentage calculation. It also tells us that I have a mysterious object that holds the current step. That mysterious object comes from Pinia, another nice component shipped with the primevue starter for nuxt. You really have everything you need in that starter template. Just to mention the setup, I declare the object by a simple store import, we'll look at pinia store declarations another time : 

import {useWaveInterfaceStore} from "~/stores/waveinterface";
const waveInterfaceStore=useWaveInterfaceStore()

This is a nice way of declaring a few variables that we can use in all components of our nuxt application. We won't need it now in this article, a simple component variable would have done the job, but remember it might be useful. Next thing to do is build next and previous buttons with reactivity to navigate between steps : 

    <div ma >
          <div class="p-inputgroup   " text-center justify-center >
            <Button icon="pi pi-chevron-left" aria-label="suivant" label="Précédent"  @click="prevStep" :disabled="waveInterfaceStore.step==1" />
            <Button icon="pi pi-chevron-right" aria-label="Précédent" label="Suivant" @click="nextStep" :disabled="waveInterfaceStore.step>maxstep"/></div>
        </div>

that's it, create next and previous steps methods in your component setup : 

function nextStep  ()  { waveInterfaceStore.step++}
function prevStep  ()  {waveInterfaceStore.step--}

and you can now include, wherever you want in your component, nicely designed form steps, using static components for this quick tutorial, we'll study dynamic components later.

<WaveSteps1 v-if="waveInterfaceStore.step==1"/>
<WaveSteps2 v-if="waveInterfaceStore.step==2"/>
<WaveSteps3 v-if="waveInterfaceStore.step==3"/>
<WaveSteps4 v-if="waveInterfaceStore.step==4"/>
<WaveSteps5 v-if="waveInterfaceStore.step==5"/>

To top