Building Multi Steps form in VueJS and Tailwind CSS | Manoj Singh Negi | Recraft Relic

hey guys welcome to recreate channel and i hope you all are doing well so today we are going to build a multi-step forms in vue.js and tailwind so let's get started i already have a view js application here uh it's a dummy uh application you can also get you know set it up using vue cli so today we are building a multi-staff phone so first and foremost let's create our multi-step component so i'm just going to go here and create a multi-step dot viewe file and let's just create a dummy template here for now um dev this is multi-step form all right and then let's define our script as well the name will be multi multi-step or maybe multi-steps you know i think that it's uh much better and so ah so i'm just going to rename this to multi-steps dot viewe all right um let's uh import it and use it in our component in our main component so import multi steps from dot slash components slash multi-steps dot viewi and then we'll just go here register that component components multi-step and then we are just going to use it here uh let me start the uh application server i don't think i'm running it right now so let's just start it beyond sir not server the answer and it is basically getting started um and in the meantime let's open our [Music] application uh here in this at the side so replication getting getting built for the first time so it's going to take a bit time alright so it's live and now i can just minimize this one and we can go through with this okay so you can see this is multi-step form i'm able to uh you know render this so the other thing is uh that i'm using uh you know two additional library the first thing is tailwind right uh tailwind and the other is ionicon so iron icon so i'm basically using iron icons for the you know uh next and previous arrow when we'll you know have multiple steps and i'm using tailwind for you know styling the whole component all right so this is a multi-step form we'll do we'll start by defining our steps so we'll have different steps so let's create different steps i'm going to create a new folder here called steps inside that will have three steps first is information dot view the second is uh about dot view and the third is profile dot view so there will be like three steps information about and profile so let's create a dummy or template like dummy component so template and in that i will just say div div you know general information general information and then i'll just export it script instead of this the name of the component will be information and so there is general information i think this is fine and like this we can create other components as well so about will be tell us about yourself and the component name will be about and then the profile dot view general information will become [Music] customize your profile maybe customize your profile and the name of the component will be profile now let's import these in the multi step so i'll just go here say import the all of these first i'll import the information information from dot slash tabs steps information dot view and then i can just copy them information will become about here and here it will become profile now let's register these components compo [Music] so the first will be information the second thing will be about the third thing will be profile and yeah so this is uh it now the second thing we want to do is instead of rendering all of them we want to render one at a time and for that we are going to use vue.js dynamic component so i'll show you in a bit how that works but firstly let's define current steps so what is the current step you know so for example for start is zero and it will go inside the data so let's just do that um right and just this so name multi-step data written current tab 0 component and all that now now let's you know try to render this so what i can do instead of this so instead of this i can just say component all right component and then say v bind not like that so v bind is equal to equal to um [Music] okay so before we do that we have to uh define that component in another array so for example in the data what i can do is i can keep the array of steps and in that step we can define component like this and we can say you know the first component is information and its label is uh we don't need the neighbor right now so let's not worry about that but uh yeah so the next component will be about and the other component will be so this will be about and this will be profile let's see if we are able to render this and we'll say v bind is steps get the current uh what's up steps get the current step like if it's zeroth get the zeroth element if it's first you know get the first element dot component so we are basically what we are saying instead of defining the component right in the you know in the template we are saying that you know we want to define them dynamically and it will be controlled by the current step basically what's ah that's fine it doesn't matter so now uh we can go steps about.view element is missing and tag all right okay there is no and tag which we are going to give it so now so now what we can do let me fix this and this as well so so now what we can do is we can go to the multi-step and you can see the general information component being rendered if i make this one right then you can see it's tell us about yourself and if i make it two then uh because you know it because customize your profile the reason being that we are using a dynamic component and we can control the dynamic component using uh you know this uh component tag and the v binders all right now other thing is we can also pass props to it but we'll get to it you know uh in a bit so first and foremost let's uh design our uh you know forms so we'll uh so in for that i'm just going to increase the width of this a bit so now let's uh go into the information and uh define uh you know some of our inputs so basically the general information uh component going to uh have uh four inputs first will be name the second will be date of birth the third will be age and the fourth will be email address so we according to that we will create our you know structure so let's go inside the information uh component and uh define our uh define our form so let's go so i defined a div and inside that i am going to you know create the input so first will be a div and inside there i'm going to define the label all right so label and label for name and the name will be uh so the label will be what's your good name like this and then i can define an input here and i can give it some properties for example i can say type equal to text right i can say type text name will be name and the id will be a name as well to just match it you know to the label uh there will be no use of id uh as such so name and if we go here um i think it will render right uh where it is being rendered i think yeah so it is being rendered here it's not visible right now so let's make it visible we are using tailwind so let's use some tailwind classes the other thing is i want it in the next line so i'm just going to you know br it like this all right and then yeah let's style it a bit so i'm going to give it a class and let's increase its uh you know text uh font size let's make it uh text to excel let's give it a bit padding and the most important let's give it border so border uh you know border two maybe to make it its uh border with two like this and the other thing that i want to do is i want to make it rounded uh all right you can see it's rounded now and uh the other thing that i want to give is uh so the theme uh theme color that i have used is uh green so i'm just going to use that green 300 and this will become green i think this looks good but you know it's the whole form is not looking good so let's do one thing let's uh you know move this to the center so in order to do that i'll go into the multi-steps component right and this div i'm going to say class equal to so width will be half of what you know whatever is the parent so uh width one half and then i'll just say moto to you know center it to give it margin auto from both side and just uh center it so it's auto and now it's in the center uh your good name and general information is not looking good so let's uh style them as well so two four generous information i'm just going to uh convert this into a you know uh p i guess so let's convert it into a p and yeah so now let's give us some classes so first foremost let's increase its font size let's make it 5xl um right like this uh text 5xl uh then we can basically make it bold font bold right and then i think this looks good then we can basically you know maybe give it more margin and text center stack center doesn't make sense does it uh yeah it's fine so let me zoom it a bit out right that would be good yeah so general information right and you can see your good name and all that stuff but your good name is also not looking good so let's uh style our label as well so let's define a class equal to let's make it bold and increase its font size as well uh but uh it's let's give some spacing you know into the input so let's maybe give it a margin from top four i guess and let's also give a margin bottom four let's see how that works so yeah this looks good now so now we have this uh input let's uh you know just copy and paste to create another comp like input so let's just do this and here i'm just going to paste paste paste so we have we need four uh inputs so that second thing is data but so i'll just say when were you born uh and uh this will become dob and here as well this both we can dop and the type will become date so let's see if that works wherever you born great your good name here i will change it to so i'll change it to maybe uh the so your good name where were you born age how old are you let's see how old are you right and this will become age and this one as well become age and here it can be where we can send you emails all right and this will become email and these both will become email as well right let's save it let's see if that works good how old are you you're a good name and date of birth uh you know so it's uh like you know native date picker so you know this is how it looks in mac as at least however where we can send emails so this looks great right but what i want to do is i want to wrap this uh this uh form in like a box you know which has like a box shadow so let's do that um so this div we already have right um so we can just say class equal to shadow so this these all classes are tailwind you know so you can go and check out tailwind documentation to know uh you know more about if you want to know more about these classes so let's say shadow lg and you'll see you know there is some shadow in there now i'm just going to give it padding like padding from everywhere paddington and yeah this will uh this how it will look and then i can maybe give it rounded to make it make its border rounded so yeah now it looks good now uh what i want to do is um maybe give it more margin i don't know i think it's fine so now what i want to do i want to render icon here uh which is like you know next and previous icons so let's create our next icon here so here i can just say um a button so a button here right and my autocompletion is not working so button and then i just say uh so here i'm using uh you know iron icons so i'm just going to use i and give it a class name you know and the class name will be equal to um ion arrow right c let's see if that works um yeah so it works but you know the font size is very small so let's increase that class uh maybe text center padding 5 you know to give it padding let's see if that works then uh let's uh increase its font size text five excel and let's at the end you know give it margin from the top yeah so this is how it looks but what i want i want it in center so what i'm going to do is i'm just going to say uh this thing so i'm just going to wrap it inside there right yeah let's do that so i'm just going to wrap it inside a div and just say class equal to text center okay uh right now nothing happens when i click it so whatever what i want is when i click on this icon it should you know move to the next component uh like next step so let's define a method for that uh so we have this now i can just go here uh define methods and just go here say um next and i'll just say next this dot current step equal to plus equal to 1. right so let's say just say plus equal to one and go here let's see if that works but so what basically will happen uh i also have to bind it here on the on click so we on click basically call the next and let's see if that works let's reload the page so if i click on this it should go to the next step which is going to tell us about yourself if i click again it will go to customize your profile so that is working now let's also define a previous uh button so i'm just going to go here and say previous uh previous and icon will point to left right and let me define the previous method as well this dot current step current step minus equal to 1 let's see if that works so i click on this icon and if i click back it will go back so you can see our steps uh you know steps working but the problem with is that on the first slide it shouldn't show and the on the last slide this uh forward shouldn't show right so for that let's uh you know write uh some conditions here so we if uh when current step is not equal to zero so if it's not zero then only uh then do uh you know it's not visible so if current step is not equal to zero then you know it will show up like this if it's 0 like right now it it shouldn't show up okay so now let's uh also define the condition for this v if current step is smaller than steps dot length minus 1 so y minus 1 because so for example if steps is three so in our case it's three so if the current step is two then it shouldn't show up right because uh the index count will start from zero to zero one two at that at two it shouldn't show up so if step zero line is three three minus one's two it should be smaller than two to show the you know icon so if i go like this and this then it shouldn't show up right but then i want to show a submit button because i want to submit the information as well right so what i will do is i will copy this button and instead of rendering icon i will type text here submit and then also give some classes to this so class equal to firstly and for most i think i'm going to give text as you know uh text as 2xl at least let's see if that works duplicate attribute okay we don't need this all right so let's see if that works now submit button is here uh but what i want to do is i want to give it a bg color so bg green uh 300 and then the text will become text white right let's see if that works submit heart reloading yeah but i have to give it padding and i have to make it rounding so padding five uh and rounded let's see that works right it works so now i want to only show this button when the next button is not showing so i'm just going to say vls so for example if current step if the pre next icon is being showing shown up then it should not show we can't exist on the same element all right so there is a vf okay so because i copy pasted it right so now so now it it should only show up when there is uh when the next action is not being shown up for example this we'll go click and when we click you can go back but here you can only submit right so that's good so now let's define other forms as well and move forward with this so now in the information dot view uh we have these forms so i'm just going to copy and paste these this in this form let's do that and it will go in the about view and just paste it and let's see how that works ah it's loading yeah so in tell us about yourself uh in the about we are also rendering the same uh thing i also need the same heading so i'm just like style of the heading so i'm just going to copy copy this i'm not able to copy it one sec so copy this and in the above dot view here paste it and make it a p as well p here as well and here as well p all right let's see how that goes now um so it's reloading tell us about yourself and so you tell us about yourself we'll only have two fields so the first field is uh their address and then their gender as well so let's uh yeah you know uh create a text area here so this in the label i will type where do you live where do you live and in instead of input i'm going to render a text area t should be smaller so i'm going to render a text area our type will be removed name will become address the id will also become address here as well and and one uh other thing that i'm going to so let's see if that works and the other thing that i want to do is make it full so let's make it full the bit to be full of the text area it's maybe so hard reloading is like very slow i guess okay so now let's uh that that is done now let's remove all of these because we don't need any of this uh so we don't need these two we only need it need one for the gender and gender will be like a radio button so we'll uh also get to see how that works um so when were you born instead of this i'm just going to type [Music] you know just say like i am going to be [Music] i'm going to write this are you a and then i'm just going to render some radio button so input type will become radio the name will become gender and the value will be for the first item will be female female and yeah let's see how that renders uh i think that is taking time let me reload this page in the meantime we can create another labels as well so all right and i'll what we need basically is we also need like this inside a div the reason being they will all have their own labels as well so here i'm just going to paste this indent it and uh there will be a label basically which says male or female as well so label here i'm just going to say free mail see if that works um yeah so are you a female great and like this will have diff uh you know three divs female male and other female male 1 uh female male and other so let's make this other and this other as well here we'll go mail and not here here we will go mail and this will be mail as well right um so now that will render here as well the other thing that i want to do is i want to so label is like very skinny right now like it's very uh you know thin i want to make it bold and uh you know so it looks good so let's do that so label uh for example female label i can just give it a class and say class maybe and say text lg to increase its height and maybe font bold right let's see how that works so this is the uh input right now i think the whole trill hot reloading is going on so yeah it's building so it is done now let's see how that looks yeah male female is looking good and i also need some margin from the left side so i'm just going to do that so margin from the left two and let's do it for every every uh label so go here let's go here let's go here and just reload the page so i the ui for this page is done now we can move on to the next uh page ui which is the profile page this is loading right now i click on next you can see female and click on this to select any of these and now the customize your profile so now let's uh go to customize your profile let's copy this because most of the component will be same so let's copy this and go to the profile view so instead of that paste this and change the heading so customize your profile great now uh let's reload this page so if you like so in the customize your profile there will be two fields so first field will be like a profile upload so we'll we'll up fro upload uh we'll perform a file upload for the profile picture then there will be a bio which will be a text area so let's do that right uh and uh so let's go ahead where do we live and if we go okay in customization profile you can also see where do we live and all that stuff so now uh we need the text area before the bio so i'll just i'm just going to create just say bio here and here as well and instead of where do you live i'm just going to say uh you know describe yourself maybe describe your self right and i don't think i need a full stop so now uh that's good but we don't need these radio button and everything so i'm just going to remove this um [Music] so i'm just going to go and remove this and now let's uh create our you know the profile picture component okay so basically what we have to do uh we'll go here and we'll create another div right and inside that dev will have the same label and instead of this label uh what we will do is we will go instead of bio it will just make it file upload and in the describe yourself instead of describe yourself we'll say upload your profile picture right and now we are going to define a input here input so the input is basically will be a file input so let's do that input type will be file and the name will be file uploader and the id will be file uploader right and uh the i will hide this because we don't want to show it we'll have like a custom preview for the uploading uh for the uploader so i'm just going to hide it and i'm going to use tailwind class hidden next i'm going to create another div here right and that dev basically will have a class i have some classes to you know basically show this so firstly and foremost will make to make it visible we'll just use green border border green 300 and border width to i guess let's see and the width will be full uh you know yeah so you can see the element but its height is not there the height will be let's say um 72 right so it basically you know it will take some height like this and we also want some margin from the top so i'm just going to say empty 4 and we want it to be rounded so let's make it rounded as well now what i want to do is i want to have a icon here like upload icon and let's also give it an [Music] mp4 and b4 right because i also want some space between the describe yourself and this dev so margin bottom four now i can go here and add a icon so i can i'm going to use from the you know i own icons so i own icons the class will be i own class will be i own upload and i'm just going to you know uh increase its font size so let's see if that works and and till that is being built i can also define some text it says which just says click here to upload so you can see the icon but it's like uh at the you know top i want it in the center so what i'm going to do is this div i'm just going to say flex uh i'm going to say um justify center right and i'm going to say item center as well and the flow should be follow direction should be column so you know uh they should like come one come at the top and the second at the bottom so let's see if that works i think it should let's reload the page uh i think it's flow oh no it's not flow i think it's flax call let me check i think it's flex call let's reload the page again yeah and uh for like uploading what we're going to do is when the file will upload we'll read the file in the you know data url and then just you know use it as the source for the you know image so i'm going to use the image as well here so if you go like this if you go you can see you know click here to upload and i also want to like it to be cursor pointer so i'm just going to say here cursor pointer right so now let's go here and yeah so it will become cursor pointer now let's go back go back right now okay so now what we can do is so the build is still building right and now okay you can see the cursor printer right so now let's uh so this is great now let's actually store this information whatever the user is filling here in our states so let for that uh i'm going to go to multisteps.view in the multi-step.view i'm going to take keep a state called form value okay form value and then in the form value i'm going to define three different uh properties the first will be information right the second will be profile and the third will be um information profile the third will be the pro uh the the profile will be the third the second will be about right so now okay that is good so information about profile now uh information will have four values this first will be name which will be by default empty the second will be age which will be by default zero and okay so and uh the age will be zero the third value will be dob date of birth which will be empty as well and the email right so empty email about will have two values uh the first will be address and the uh gender right and the profile will have two values so first will be profile picture and the profile picture which will be empty string and uh the last will be uh the bio which will be emptiest empty string right as well so now this form value so we we need to pass this form value to our you know to our components so let's do that so what we are going to do is inside the form value uh this this is the component right so we can just say we bind from value equal to the um steps current step and dot label why we need label i'm going to define that as well so just a bit so label and we are just going to uh you know just form value and this will be a string yeah so this will be string as well so basically what we are doing we are binding the form value this is basically what will happen whatever is the current step it's going to take its label and extract the information from there so for example information about and profile so every component will have you know its label right for example this will have information this will have labeled as about and this label this will have label profile all right so for example uh i'm going to type dummy values here for example knowledge uh write an email for example just another manoj gmail.com right and what i'm going to do is now i can go inside the uh information component and just say i i can just say you know it have a prop called form value here props form value which will have four properties email which will be a string which will be a string the name which will be a string dob which will be a string and age which will be a number right so and the number will be like so this will be basically and now i can use these form values to bind the values to this so i can just say v bind value equal to form value dot name okay and now i can do the same with everything so i can just go save and i'll go here paste it right ah one sec uh and i'll make it dob so let's try put uh just two of these values and let's reload the page and let's see if this works so it's building right now yeah it's built uh okay so now we can go here and see if our code work so you can see right the values uh the the name is already pre-filled because we are passing the value so this value is basically getting passed here so now this is the first part of building the multi uh you know the multi-step form in the next part what we will do we will basically try to upload our photo and we'll also try to save all of the information you know whenever we are making change here update the you know uh parent data and extract the brand data so for today this is it next saturday we'll i'll come up with uh the next part and in that part we'll basically you know we'll see how we can save the data which we are entering in this form so for till then bye

Channel: Recraft Relic

Views: 3,824

Keywords:

Id: 3nUDKZGQaNU

Length: 51min 55sec (3115 seconds)

Published: Sat Jul 10 2021