How <x-app-layout> links to AppLayout.php component file in blade template? When you first start working with Laravel Blade components, you might run into something that feels a bit confusing
<x-app-layout>
But then you find the actual file is named:
AppLayout.php
Why don’t these names match exactly?
Welcome to what I like to call “The Naming Convention Bridge.”
🌉 Two Worlds, Two Naming Styles
Laravel is connecting two different worlds here:
1. HTML / Blade World → kebab-case
In HTML, component-like tags are written using lowercase words separated by hyphens:
<app-layout></app-layout>
Laravel follows this style in Blade:
<x-app-layout>
This keeps your templates clean, readable, and consistent with frontend conventions.
2. PHP World → PascalCase
PHP class names follow a different rule: each word is capitalized, with no hyphens.
class AppLayout extends Component
This is the standard in PHP (and most object-oriented languages).
🔄 How Laravel Connects Them
Laravel automatically translates between these two formats.
When it sees:
<x-app-layout>
It internally converts it like this:
- Split by
-→app,layout - Capitalize →
App,Layout - Combine →
AppLayout
Then it looks for:
App\View\Components\AppLayout
📁 Where the Files Live
So this Blade tag:
<x-app-layout>
maps to this class:
app/View/Components/AppLayout.php
And inside that class:
public function render()
{
return view('layouts.app');
}
Which finally loads:
resources/views/layouts/app.blade.php
🧩 Blade-Only Components (No Class)
If you don’t create a PHP class, Laravel falls back to a simpler approach.
This:
<x-alert-box>
maps directly to:
resources/views/components/alert-box.blade.php
Notice here the filename stays in kebab-case, because there’s no PHP class involved.
🧠 Why This Matters
Understanding this “bridge” helps you:
- Quickly locate component files
- Avoid naming mistakes
- Feel more confident navigating Laravel projects
Instead of guessing where things are, you’ll know how Laravel is resolving them.
✅ Quick Cheat Sheet
| Blade Tag | PHP Class | File Location |
|---|---|---|
<x-app-layout> | AppLayout | app/View/Components/AppLayout.php |
<x-user-card> | UserCard | app/View/Components/UserCard.php |
<x-alert-box> | (no class) | resources/views/components/alert-box.blade.php |
🚀 Final Thought
Laravel hides a lot of complexity behind clean syntax. Once you understand the naming convention bridge, Blade components go from “magic” to something very predictable.
And that’s when things start to feel easy.
If you keep exploring, the next great concept to learn is passing data (props) into components—it builds directly on what you’ve just learned.