Courses

How to Structure Laravel 11 Projects

Blade Components for Re-using HTML

Summary of this lesson:
- Creating reusable Blade components
- Managing repeating UI patterns
- Implementing layout components
- Using slots for content organization

As a final lesson in this course, let's briefly talk about the front-end structure. This course is not about front-end or design, but Blade components are an essential part of Laravel, so I do advise you to learn and use them.

When writing the front end, you might see that many parts of the code are repeating: links, inputs, etc. To make code less repetitive and easier to maintain, the Blade components can be used. Let's look at how the Laravel starter kit package Laravel Breeze uses Blade components.


Example 1. Repeating CSS Styles.

The first example is for the navigation links. The website can have many navigation links, and imagine if some minor style changes should be made. Then, for every link, the style should be changed.

However, when using Blade components, only the component style is changed.

Breeze package has three components for links:

  • for desktop
  • for mobile links
  • for drop-down links

The components also have the logic for...

The full lesson is only for Premium Members.
Want to access all 11 lessons of this course? (56 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord