This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
02. Setting up

Transcript

00:00
Okay, so if you're very new to Livewire, let's go through the very basics of setting up an app, getting Livewire installed, and we'll do a little bit of tweaking to get things set up how we need.
00:09
Okay, so I'm going to go ahead and use the Laravel installer here to create our new project called Livewire Multistep Forms. Now when we do this, we're going to use the Laravel Breeze Starter Kit, and we're going to choose Blade with Alpine. We're not going to choose Livewire with Volt, that's going to be a completely different thing, and we don't really care about any of
00:26
these options, we'll just go ahead and skip through them. Now once this finishes, we'll get a prompt for our database, so let's just wait for that, and I'm going to choose MySQL here, and that is now finished. So we should be able to head over to the browser and see our app running. Okay, so we'll go ahead and run our migrations, whether you've created a database or not,
00:45
that should prompt you, and we can now head over and register an account. So let's get on that dashboard so we can start building out our components over there. Okay, so I'm signed in. Now before I do anything, I'm going to head over to the dashboard.blade.phpview, and I'm just going to go ahead and reduce the width of this. We're going to be using this entire container to put
01:05
everything in, and of course we need to make sure we run npm run dev just to compile all of our javascript and css, and there we go, we've got a nice small container to build our forms in. Okay, so one really crucial thing that we want to do before we go ahead and install Livewire is go over to our app.js file and get rid of Alpine. That's just because Livewire comes with
01:24
Alpine bundled, and what we're going to see is if we do have Alpine in here, we'll see two instances of this running, and then we'll get either double form submits, double clicks, or any of that stuff. So we'll go ahead and get rid of that, and then we're just going to install Livewire. So let's go over here and pull this across so we can start writing our commands in here,
01:43
and let's go ahead and use composer to require in Livewire and Livewire, and then we're pretty much done. We don't need to do anything to get Livewire actually set up. So once that's done, we'll go ahead and create out a very basic component just to test that everything is working. So let's say phprton Livewire make, and let's just create out a example component in here
02:04
before we get started, and we'll head over to our dashboard, and I'm going to go ahead and put that directly in here. So we use that with Livewire, and then the name of the component that we've created. So if we head over to example.blade.php, we'll just put example in here, and as long as we see that on our dashboard, we are pretty much good to go. Now if you are not too familiar with
02:28
Livewire, let's just take a look at what files have been created here. We've got this Livewire component, which is where we're going to be writing all of our normal PHP code, and then we've got the template just here. Now with this package, this kind of diverges from what we're about to do, and we'll be creating a base wrapper for everything, and then each of our steps will
02:48
be an individual Livewire component, but we'll get that. So as long as you're at this stage, we're pretty much ready to go. So we're going to take the first section to look at that very basic example with this package, and then we'll move on to that more practical example. So let's head over and start building our first multi-step form.
15 episodes1 hr 38 mins

Overview

Everything you need to build multi step forms in Livewire.

We'll cover the basics of creating a multi step form, adding steps, navigating steps and accessing state using the laravel-livewire-wizard package.

Finally, we'll build a fully working practical example with more advanced step navigation, file uploads, and custom state.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.