Before we begin reviewing some examples, let's first take a moment to review what Blade components are and why you might reach for them.
Let's ease into things with this first episode. We'll build a simple, but flexible x-flash
component.
View the source code for this episode on GitHub.
Let's continue with another simple, but very useful component for constructing forms. Once complete, you'll no longer need to include the necessary @method
and @csrf
tags for every form.
View the source code for this episode on GitHub.
Let's continue focusing on forms for one last episode. Often, you'll want to display a button or link to delete a resource. Let's see if we can simplify that workflow a bit.
View the source code for this episode on GitHub.
Let's do another one! This time, we'll create a wrapper around one of TailwindUI's modal components.
View the source code for this episode on GitHub.
In this episode, we'll create a reusable dropdown Blade component by combining Tailwind and Alpine.js.
View the source code for this episode on GitHub.
Let's do another one! This time, we'll create a component for a navigation link. In doing so, we'll remove duplication as well as hide the necessary logic to check if the link should be marked as "active."
View the source code for this episode on GitHub.
When styling applications with components, you'll very quickly run into responsive issues. "How do I style my nav-link
component for desktop AND mobile layouts?" If the presentation for each is unique, you might instead consider creating an entirely separate component for your mobile navigation links. Let's learn how in this episode.
View the source code for this episode on GitHub.
Basics tabs are laughably simple to create, but if we want an intuitive and reusable x-tabs
component, let's see what we can do!
View the source code for this episode on GitHub.
In this episode, we'll create a basic Blade component for constructing the necessary meta
attributes for Twitter and Facebook social media cards.
View the source code for this episode on GitHub.
Next up, we'll create a useful Recaptcha Blade component that can be attached to any form. We'll begin by reviewing the basic setup instructions. Then, once we have a working example, we'll move on to extracting a Blade component that uses Alpine to initialize and render the widget.
View the source code for this episode on GitHub.
*Series still in development. Check back often for updates.