0:02 Laravel has its own simple yet powerful
0:04 templating engine called Laravel Blade
0:06 which enables you to write server
0:10 rendered HTML and PHP in a very readable
0:12 format. But when you need to add a
0:14 little bit more interactivity into your
0:17 page, that's where LiveWire comes in to
0:19 supercharge Blade. And today we're
0:21 talking about LiveWire Volt, which is a
0:23 functional way to write [music] that
0:26 interactivity, that supercharged power
0:28 that you can give your Blade templates.
0:29 [music] Now, I do want to note at the
0:31 time of this recording, LiveWire V4 is
0:33 in beta, which does change some things,
0:35 and I do want to walk you through what
0:37 [music] that looks like. In a nutshell,
0:40 Livewire V4, once it's stable, will
0:43 replace LiveWire Volt specifically just
0:46 for the classbased Volt components. So,
0:48 LiveWire 4 will give you the option out
0:50 of the box without having to use
0:53 LiveWire Volt to enable single file
0:55 components, specifically if you want to
0:58 use the class-based structure. And that
1:00 just means it solidifies Livewire Volt
1:03 as the functional API to write your
1:05 LiveWire functionality in your Blade
1:08 templating engine. So that's what we're
1:10 going to spend some time in today. What
1:13 does the functional API look like within
1:15 LiveWire Volt? Now, last but not least,
1:17 before we jump into the code, I do want
1:20 to say that with anything Livewire
1:22 related, that interactivity or
1:24 functionality that you might need for
1:27 your Blade templates, it's best to think
1:30 let's do Blade first and then add Volt.
1:33 So, a lot of the demos I'm going to show
1:36 you is how you would supercharge Laravel
1:38 Blade to get the functionality that you
1:40 might need. When it comes to adding
1:42 LiveWire Volt components to your
1:43 application, there's three ways to do
1:45 it. First, you can embed your
1:48 components. So, this is what you might
1:50 think of when it comes to anything
1:52 livewire related. Whether you're using a
1:55 traditional uh classbased structure that
1:58 has separate components, a class.php
2:01 file for your livewire and then a view,
2:03 you would still enable this livewire
2:05 colon and then your component name. And
2:08 this works the same way within vault as
2:11 well. Next, you have full page
2:13 components. if all of the component, all
2:16 of the view file that you have within
2:19 LiveWire Volt needs to just be
2:22 self-contained. And so you can point a
2:25 route specifically to a component. And
2:26 then last but not least, this is where
2:30 this blade directive of atvolt comes in.
2:32 It's called anonymous components for
2:35 when you want to take a blade file and
2:38 let's say you really only need to add a
2:41 smidge of interactivity, maybe a search
2:44 bar in your components. Well, anonymous
2:48 components let you change your Laravel
2:50 blade template that you already have set
2:52 up and add [clears throat] LiveWire Volt
2:54 without doing anything else. So when it
2:56 comes time to supercharging your blade,
2:59 taking what you already have within a
3:01 blade structure and adding some
3:03 functionality on top of it, this is what
3:05 that might look like. In a typical blade
3:09 component, you might have a post search.
3:11 I have a specific form that is pushing
3:15 an action, a get action to a specific
3:17 route within a controller. And so
3:22 whenever I type within that search input
3:25 and I hit that search button, then we're
3:28 hitting that controller and getting the
3:31 return back. Again, all this is Laravel
3:33 bleed. But what happens if we need this
3:35 to be a little bit more interactive, if
3:39 you will. Volt is just a single page way
3:43 to write functional APIs for LiveWire.
3:45 So we're going to say that this is a
3:48 Livewire colon and then the post search.
3:51 And so what this is doing is saying that
3:53 it's looking for the Livewire component.
3:57 So in your livewire directory by default
3:58 and that's what this is post-arch.blade.php.
4:04 So still blade. And if we were to take a
4:06 look over here in the right we see
4:09 livewire post-arch. So this is a
4:12 livewire component but it's volt which
4:14 is single file. and functional API. Now,
4:16 when I say functional API, what I mean
4:19 is instead of writing all of your logic
4:23 in a class-based structure, Volt exports
4:26 these particular functions, uh something
4:29 like computed or state, and we'll see
4:31 some more as we go throughout this
4:33 video. But each one of these then lends
4:36 itself to a a very clean looking
4:38 functional API where instead of
4:41 declaring a public function of state in
4:44 a specific class within my labware
4:46 component, I just can use this function
4:48 and write it maybe in a little bit more
4:53 uh tur or concise way. We're setting the
4:56 state in the URL. So that way anytime we
5:00 type into this search input, it is modeling
5:01 modeling
5:04 itself. It is syncing itself to that
5:06 specific search parameter. Well, that
5:10 state of search then inputs as the URL
5:12 and then we just collect all the posts
5:15 based off of that search state. And so
5:18 while a blade component of course that
5:21 form getit request on search would mean
5:26 a full page reload something like this.
5:29 Then the difference would be well if we
5:32 searched within Livewire Volt using that
5:35 Volt functionality that functional API
5:38 within that Volt component well then
5:40 everything's rendered on the fly because
5:43 we're returning Ajax that is getting
5:46 that HTML and rendering it on the page.
5:48 So if I was to start typing, we start
5:51 seeing these posts pop up. And while
5:53 lines of code is not necessarily a good
5:57 indicator on how good a specific package
5:59 might be, it's nice to know that within
6:02 39 lines of code for your blade that has
6:05 this form method, uh if we just added a
6:09 couple more, 20ish more, 63 lines of
6:11 code, all of a sudden we have that same
6:15 functionality within a live compilation.
6:17 Now the full page livewire volt
6:19 components is taking everything that we
6:22 just did within that search but you're
6:25 just directing that web route to that
6:27 component itself rather than embedding
6:30 it into the page. So this vault route of
6:34 let's say uh posts.create create. Then
6:38 that just looks like this postcreate
6:42 which is a livewire fold component but
6:44 we're just directing all of that traffic
6:47 to this component itself rather than
6:49 embedding it into a blade view. And
6:52 again that third style of using livewire
6:55 volt the functional API you can use
6:58 anonymous components. So let's say you
7:01 had a particular blade component. Maybe
7:04 it looked a little bit like this, but
7:06 you wanted to add that little bit of
7:09 functionality to it. So instead, we can
7:11 just say, I just want this particular
7:15 piece to have functionality. And so the
7:18 full component does not rerun when you
7:22 enter this counter because it is all
7:25 linked to this particular section of
7:27 functionality interactivity. Now again
7:29 within LiveWire 4, some of this is going
7:32 to be a little bit outdated when it
7:35 comes to how you might use it because
7:38 LiveWire 4 will enable specific islands
7:41 to say islands can have functionality
7:44 and interactivity while the rest stays
7:46 the same. It's similar. Now where
7:48 LiveWire Volt really shines, especially
7:51 with the functional API, is to have that
7:55 concise uh code while still having so
7:57 much functionality. And this is what I
7:59 want to show for this particular demo.
8:02 Having two components, this post
8:05 component count that we see up here and
8:09 then uh this components with this create
8:12 post is technically two different
8:14 components. Well, how does this look? In
8:18 this index with create component, what I
8:20 have is a full page livewirevolt
8:23 component. It uses pageionation. Again,
8:24 all these are functions that we're
8:27 calling from Livewire Volt that we can
8:31 then extract and use within this page,
8:33 whether it's rules, state, setting a
8:35 title, and then also having these
8:38 computed functions as well as anything
8:40 that might be called an action that
8:42 might be able to be called within our
8:45 wire model or wire click. And then we
8:47 also have a livewire component that is
8:49 nested within this full page component
8:52 of livewire volt. So the neat part here
8:54 is that you still have all the
8:56 functionality of LiveWire that you might
8:58 be used to. And if you haven't used
9:00 LiveWire, well, here's what can happen
9:03 when you have this interactivity that
9:06 you are supercharging your Laravel Blade
9:08 templating engine with. Let's say this
9:11 separate nesting component uh it has
9:14 specific counts, maybe publish posts,
9:18 total post, draft posts. Well, anytime
9:21 we create a new component within this
9:24 index with create full page vault
9:26 component, we have this save action. At
9:29 the end of that save action, I want to
9:32 dispatch this event saying that hey,
9:34 this post was created. Well, in my
9:36 nested component, I can listen for that
9:40 event. So, uh when a post is created,
9:42 and this can be just a blank function
9:44 because all we're doing is we want to
9:46 rerender this information. We want to
9:49 grab new information. So when post is
9:51 created, this component is going to be
9:53 rerendered. So creating a new post. You
9:56 can see here 30 post, 25 published, five
9:59 drafts. I'm going to say uh hey there
10:04 YouTube, how is your uh advent of code
10:06 doing? And we'll publish this
10:08 immediately. And again, this is going to
10:11 hit that save method that then sends an
10:14 event. And because I have live wire
10:17 volts on dispatch event, being able to
10:19 listen for that, it's going to update
10:20 this information even though it's a
10:22 separate component.
10:25 31 posts. So, we didn't necessarily
10:28 refresh the page. We didn't redirect to
10:30 this page and all of its grabbing again.
10:33 We were just grabbing new data from each
10:36 of those components via an Ajax request.
10:38 And there you have it. You have the
10:40 power and simplicity of Laravel Blade
10:43 where you have these server rendered
10:46 HTML files that you can write PHP. You
10:48 have all these fancy directives to be
10:50 able to make this so much easier for you
10:53 to write code like this. But when you do
10:55 need that added little bit of uh
10:58 interactivity, then LiveWire Volt comes
11:00 right into play. taking an index like
11:03 this of looping through specific posts
11:05 and instead of having to have separate
11:07 pages, separate controllers handling the
11:10 create, the store, the search method,
11:13 you could have that all in one
11:16 component. And in this functional API,
11:18 it just makes things a lot easier and
11:21 even more readable for you and your team
11:23 to say, "Hey, I know exactly where the
11:25 state lives. I know exactly where the
11:28 rules live or what the layout is or the
11:31 title because the functional API does
11:34 make that look a lot nicer. So to recap
11:35 and if you want to continue watching
11:38 more videos about LiveWire Volt on this
11:40 channel, we have a ton that you might
11:43 see up here or in the description below.
11:45 But everything that we talked about
11:48 specific for the functional API is to
11:50 make things look a little bit easier,
11:52 maybe readable, maybe just a different
11:54 way that you might like to write
11:57 LiveWire code. And while some of these
11:59 things might change in the future,
12:02 especially with LiveWire 4 coming out,
12:04 the functional API within Volt still
12:07 going to exist and [music] be different
12:09 than a single file component that's
12:13 going to live [music] within LiveWire 4.
12:15 So Volt is still fast. Volt still
12:18 supercharges [music] your Laravel Blade
12:21 so that you can make good code and you
12:23 can ship as much as you want or as much
