Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Volt - Elegantly Crafted Functional API for Livewire | Laravel | YouTubeToText
YouTube Transcript: Volt - Elegantly Crafted Functional API for Livewire
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
LiveWire Volt offers a functional API to enhance Laravel Blade templates with interactivity, providing a more concise and readable way to build dynamic web features compared to traditional class-based LiveWire components.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
Laravel has its own simple yet powerful
templating engine called Laravel Blade
which enables you to write server
rendered HTML and PHP in a very readable
format. But when you need to add a
little bit more interactivity into your
page, that's where LiveWire comes in to
supercharge Blade. And today we're
talking about LiveWire Volt, which is a
functional way to write [music] that
interactivity, that supercharged power
that you can give your Blade templates.
[music] Now, I do want to note at the
time of this recording, LiveWire V4 is
in beta, which does change some things,
and I do want to walk you through what
[music] that looks like. In a nutshell,
Livewire V4, once it's stable, will
replace LiveWire Volt specifically just
for the classbased Volt components. So,
LiveWire 4 will give you the option out
of the box without having to use
LiveWire Volt to enable single file
components, specifically if you want to
use the class-based structure. And that
just means it solidifies Livewire Volt
as the functional API to write your
LiveWire functionality in your Blade
templating engine. So that's what we're
going to spend some time in today. What
does the functional API look like within
LiveWire Volt? Now, last but not least,
before we jump into the code, I do want
to say that with anything Livewire
related, that interactivity or
functionality that you might need for
your Blade templates, it's best to think
let's do Blade first and then add Volt.
So, a lot of the demos I'm going to show
you is how you would supercharge Laravel
Blade to get the functionality that you
might need. When it comes to adding
LiveWire Volt components to your
application, there's three ways to do
it. First, you can embed your
components. So, this is what you might
think of when it comes to anything
livewire related. Whether you're using a
traditional uh classbased structure that
has separate components, a class.php
file for your livewire and then a view,
you would still enable this livewire
colon and then your component name. And
this works the same way within vault as
well. Next, you have full page
components. if all of the component, all
of the view file that you have within
LiveWire Volt needs to just be
self-contained. And so you can point a
route specifically to a component. And
then last but not least, this is where
this blade directive of atvolt comes in.
It's called anonymous components for
when you want to take a blade file and
let's say you really only need to add a
smidge of interactivity, maybe a search
bar in your components. Well, anonymous
components let you change your Laravel
blade template that you already have set
up and add [clears throat] LiveWire Volt
without doing anything else. So when it
comes time to supercharging your blade,
taking what you already have within a
blade structure and adding some
functionality on top of it, this is what
that might look like. In a typical blade
component, you might have a post search.
I have a specific form that is pushing
an action, a get action to a specific
route within a controller. And so
whenever I type within that search input
and I hit that search button, then we're
hitting that controller and getting the
return back. Again, all this is Laravel
bleed. But what happens if we need this
to be a little bit more interactive, if
you will. Volt is just a single page way
to write functional APIs for LiveWire.
So we're going to say that this is a
Livewire colon and then the post search.
And so what this is doing is saying that
it's looking for the Livewire component.
So in your livewire directory by default
and that's what this is post-arch.blade.php.
So still blade. And if we were to take a
look over here in the right we see
livewire post-arch. So this is a
livewire component but it's volt which
is single file. and functional API. Now,
when I say functional API, what I mean
is instead of writing all of your logic
in a class-based structure, Volt exports
these particular functions, uh something
like computed or state, and we'll see
some more as we go throughout this
video. But each one of these then lends
itself to a a very clean looking
functional API where instead of
declaring a public function of state in
a specific class within my labware
component, I just can use this function
and write it maybe in a little bit more
uh tur or concise way. We're setting the
state in the URL. So that way anytime we
type into this search input, it is modeling
modeling
itself. It is syncing itself to that
specific search parameter. Well, that
state of search then inputs as the URL
and then we just collect all the posts
based off of that search state. And so
while a blade component of course that
form getit request on search would mean
a full page reload something like this.
Then the difference would be well if we
searched within Livewire Volt using that
Volt functionality that functional API
within that Volt component well then
everything's rendered on the fly because
we're returning Ajax that is getting
that HTML and rendering it on the page.
So if I was to start typing, we start
seeing these posts pop up. And while
lines of code is not necessarily a good
indicator on how good a specific package
might be, it's nice to know that within
39 lines of code for your blade that has
this form method, uh if we just added a
couple more, 20ish more, 63 lines of
code, all of a sudden we have that same
functionality within a live compilation.
Now the full page livewire volt
components is taking everything that we
just did within that search but you're
just directing that web route to that
component itself rather than embedding
it into the page. So this vault route of
let's say uh posts.create create. Then
that just looks like this postcreate
which is a livewire fold component but
we're just directing all of that traffic
to this component itself rather than
embedding it into a blade view. And
again that third style of using livewire
volt the functional API you can use
anonymous components. So let's say you
had a particular blade component. Maybe
it looked a little bit like this, but
you wanted to add that little bit of
functionality to it. So instead, we can
just say, I just want this particular
piece to have functionality. And so the
full component does not rerun when you
enter this counter because it is all
linked to this particular section of
functionality interactivity. Now again
within LiveWire 4, some of this is going
to be a little bit outdated when it
comes to how you might use it because
LiveWire 4 will enable specific islands
to say islands can have functionality
and interactivity while the rest stays
the same. It's similar. Now where
LiveWire Volt really shines, especially
with the functional API, is to have that
concise uh code while still having so
much functionality. And this is what I
want to show for this particular demo.
Having two components, this post
component count that we see up here and
then uh this components with this create
post is technically two different
components. Well, how does this look? In
this index with create component, what I
have is a full page livewirevolt
component. It uses pageionation. Again,
all these are functions that we're
calling from Livewire Volt that we can
then extract and use within this page,
whether it's rules, state, setting a
title, and then also having these
computed functions as well as anything
that might be called an action that
might be able to be called within our
wire model or wire click. And then we
also have a livewire component that is
nested within this full page component
of livewire volt. So the neat part here
is that you still have all the
functionality of LiveWire that you might
be used to. And if you haven't used
LiveWire, well, here's what can happen
when you have this interactivity that
you are supercharging your Laravel Blade
templating engine with. Let's say this
separate nesting component uh it has
specific counts, maybe publish posts,
total post, draft posts. Well, anytime
we create a new component within this
index with create full page vault
component, we have this save action. At
the end of that save action, I want to
dispatch this event saying that hey,
this post was created. Well, in my
nested component, I can listen for that
event. So, uh when a post is created,
and this can be just a blank function
because all we're doing is we want to
rerender this information. We want to
grab new information. So when post is
created, this component is going to be
rerendered. So creating a new post. You
can see here 30 post, 25 published, five
drafts. I'm going to say uh hey there
YouTube, how is your uh advent of code
doing? And we'll publish this
immediately. And again, this is going to
hit that save method that then sends an
event. And because I have live wire
volts on dispatch event, being able to
listen for that, it's going to update
this information even though it's a
separate component.
31 posts. So, we didn't necessarily
refresh the page. We didn't redirect to
this page and all of its grabbing again.
We were just grabbing new data from each
of those components via an Ajax request.
And there you have it. You have the
power and simplicity of Laravel Blade
where you have these server rendered
HTML files that you can write PHP. You
have all these fancy directives to be
able to make this so much easier for you
to write code like this. But when you do
need that added little bit of uh
interactivity, then LiveWire Volt comes
right into play. taking an index like
this of looping through specific posts
and instead of having to have separate
pages, separate controllers handling the
create, the store, the search method,
you could have that all in one
component. And in this functional API,
it just makes things a lot easier and
even more readable for you and your team
to say, "Hey, I know exactly where the
state lives. I know exactly where the
rules live or what the layout is or the
title because the functional API does
make that look a lot nicer. So to recap
and if you want to continue watching
more videos about LiveWire Volt on this
channel, we have a ton that you might
see up here or in the description below.
But everything that we talked about
specific for the functional API is to
make things look a little bit easier,
maybe readable, maybe just a different
way that you might like to write
LiveWire code. And while some of these
things might change in the future,
especially with LiveWire 4 coming out,
the functional API within Volt still
going to exist and [music] be different
than a single file component that's
going to live [music] within LiveWire 4.
So Volt is still fast. Volt still
supercharges [music] your Laravel Blade
so that you can make good code and you
can ship as much as you want or as much
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
