Back Button Frameworks
Blade Component Cookbook

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.

Intermediate
11 episodes
2h 3m
Begin
11
Latest Episode in This Series

Added 1 month ago

Recaptcha Component

Next up, we'll create a useful Recaptcha Blade component that can be attached to any form. We'll...

Watch
Blade Component Cookbook

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.

Begin
11
Latest Episode in This Series

Added 1 month ago

Recaptcha Component

Next up, we'll create a useful Recaptcha Blade component that can be attached to any form. We'll...
Watch

Your Teacher | Jeffrey Way

Visit Website
https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
    1. EPISODE 1

      Run Time 5:45

      Free

      Prerequisite - 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.

    2. EPISODE 2

      Run Time 7:00

      Free

      Flash Component

      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.

    3. EPISODE 3

      Run 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 @method and @csrf tags for every form.

      View the source code for this episode on GitHub.

    4. EPISODE 4

      Run 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.

    5. EPISODE 5

      Run 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.

    6. EPISODE 6

      Run 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.

    7. EPISODE 7

      Run 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.

    8. EPISODE 8

      Run 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-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.

    9. EPISODE 9

      Run Time 18:16

      Tabs Component

      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.

    10. EPISODE 10

      Run Time 7:28

      Social Media Card Meta Component

      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.

    11. EPISODE 11

      Run Time 28:32

      Recaptcha Component

      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.

    2.
Series still in development robot

*Series still in development. Check back often for updates.

Want us to email you occasionally with Laracasts news?