Laravel
Blade Component Cookbook
As part of the Laravel 7 release, we gained access to supercharged Blade components. What's exciting about this is the fact that it can fundamentally change how you go about constructing the view layer of your applications. In this series, one component per episode, I'll show you a wide range of practical examples that you can freely use in your own projects.
Latest Episode in This Series
Added 2 weeks ago
Tabs Component
Basics tabs are laughably simple to create, but if we want an intuitive and reusable x-tabs component,...
Blade Component Cookbook
As part of the Laravel 7 release, we gained access to supercharged Blade components. What's exciting about this is the fact that it can fundamentally change how you go about constructing the view layer of your applications. In this series, one component per episode, I'll show you a wide range of practical examples that you can freely use in your own projects.
Latest Episode in This Series
Added 2 weeks ago
Tabs Component
Your Teacher | Jeffrey Way
-
-
EPISODE 1
Run Time 5:45
FreePrerequisite - Blade Components Explained
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.
EPISODE 2Run Time 7:00
FreeFlash Component
Let's ease into things with this first episode. We'll build a simple, but flexible
x-flashcomponent.View the source code for this episode on GitHub.
EPISODE 3Run Time 6:30
Form Component
Let's continue with another simple, but very useful component for constructing forms. Once complete, you'll no longer need to include the necessary
@methodand@csrftags for every form.View the source code for this episode on GitHub.
EPISODE 4Run Time 4:42
Form Button Component
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.
EPISODE 5Run Time 8:26
Modal Component
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.
EPISODE 6Run Time 14:36
Dropdown Component
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.
EPISODE 7Run Time 9:32
Nav Link Component
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.
EPISODE 8Run Time 12:28
Mobile Nav Link Component
When styling applications with components, you'll very quickly run into responsive issues. "How do I style my
nav-linkcomponent 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.
EPISODE 9Run Time 18:16
Tabs Component
Basics tabs are laughably simple to create, but if we want an intuitive and reusable
x-tabscomponent, let's see what we can do!View the source code for this episode on GitHub.
*Series still in development. Check back often for updates.
The most concise screencasts for the working developer, updated daily.
There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!
-