vuejs multi-step form

Creating Multi-step Form With Vuejs and Vuex Part 1

Vuejs is one of the powerful frontend frameworks that makes use of components to separate application into small sections and each section have it’s own logic.

Let’s implement in this series how to create a multi-step form with Vuejs. You may already saw multi-step forms a lot using jquery but in this tutorial we will make use of Vue components to accomplish this in easy way.

 

Requirements:

  • Basic knowledge of html, css, and javascript.
  • Basic knowledge of Vuejs framework.
  • nodejs and npm installation required.
  • http server (apache for example).

 

For the sake of this tutorial you must have nodejs  and npm installed. Also we will need an http server (you can use any http server in my case i will use apache) and this is for the Vue router to work properly.

 

Setup up the project:

Let’s create a new folder named multi-step in your http server root directory with the following structure:

vuejs multi-step from

Package.json

Now add the below contents into your package.json:

Then open the terminal and run this command:

Just wait until npm finishes installation then it’s time to setup webpack.

 

Setup webpack.config:

We will use new syntax of Ecmascript in this tutorial like imports and exports features so open your webpack.config.js and add the below code:

In the above tell webpack that the entry point will be app.js and the to store the bundled js file into build/app.js and also the loaders that compile the javascript and vue files.

 

Index.html:

Open up index.html and add the below contents:

Note about this element:

This tag is to tell vue router to load routes relative to this url.

As shown above i use bootstrap 4 css library and added a div with id of app and this will be the the root element that will render our Vue app and finally added the bundled javascript file.

 

Setup app.js:

At this point let’s open app.js and add the below code:

In the above code we imported Vue, VueRouter, and the base App component. Then we loaded the vue router and provided the mode and routes. Finally we create a new Vue instance and we passed the el parameter and the router.

 

Now open components/App.vue and add the below code:

Now run this command into terminal:

Then go to the browser and type http://localhost/multistep/ you will see the landing page working.

 

Setup The Form:

Let’s setup our form steps. For this we will create sub components and add them to the Vue router.

Go to components/steps folder and create four vue components:

  • FirstStep.vue
  • SecondStep.vue
  • ThirdStep.vue
  • Buttons.vue (this will hold the previous and next buttons)

Now open routes/index.js to add the routes as shown below:

Open components/steps/FirstStep.vue and add this code:

components/steps/SecondStep.vue

components/steps/ThirdStep.vue

components/steps/Buttons.vue

As shown above we created three components that will represent our steps then we added another component for the buttons then we setup the click handler for buttons like so:

Here i just do a check for the current page then navigate to the next. And if i click on the previous button it will navigate backwards.



Now let’s modify our components/App.vue and add the router-view like this:

Now refresh the browser and navigate to

http://localhost/multi-step/#/first-step/

if you click next or previous it will move to next and previous steps.

 

At this point there no way to get the data out of the form and this that we will do in the next part of the series just click here.

Share this: