In this tutorial we will tell you in detail about the Laravel Blade layout components in subfolders with several code examples including and we would set example of Breeze through and through to show you exactly how to do that. Trust me, once you get the hang of this, you’d be cracking out sleek, organized code base like a pro in case you are not already. Lol. Well, this tutorial is a sure shot at things we would like to show you. Just grasp this one thing for the sake of Laravel and you are good to go. So, again let’s just begin. In the beginning we/you need to have Laravel up and running on your machine. So, now let’s see to it with code examples now. Then we would bring Breeze into the mix.
composer create-project laravel/laravel example-app
cd example-appNow let’s just type “composer require laravel/breeze –dev”. Once that’s done, hit it with a “php artisan breeze:install”. Boom! You’ve just laid the groundwork for your app’s structure.
composer require laravel/breeze --dev
php artisan breeze:installNow, here’s where things get interesting. We’re gonna create a cozy little home for our Blade components. Head over to your “resources/views” directory and create a new folder called “Components”. This is where the magic happens, folks and Now that we have our project set up, let us create a Components folder within the “resources/views” directory to house our custom Blade components.
mkdir resources/views/componentsAs your project grows, you might find yourself with a smorgasbord of components. To keep things tidy, consider creating subfolders in the Components that we have already created above. You could see the example there. Think Form, Layout “Navigation – you get the idea. It’s like Marie Kondo-ing your code! Let’s whip up a quick example. Say you’re creating a form component that you’ll use all over your app. Create a new file called InputField.blade.php in the Components/Form subfolder. Here’s what it might look like. Within this folder, we will create subfolders for different types of components. For example:
mkdir resources/views/components/layout
mkdir resources/views/components/form
mkdir resources/views/components/navigationNow, let me hit you with some wisdom from the Laravel guru himself, Taylor Otwell. He once said, “Blade components offer a powerful way to encapsulate and reuse UI elements in your Laravel applications.” When the creator of the framework drops knowledge like that, you’d better believe it’s worth paying attention to. As you keep working with these components, you would start to feel like a coding virtuoso. Your productivity will skyrocket, and your code will be so organized it’ll make Marie Kondo weep with joy. You would look back at your old, messy code and wonder how you ever lived like that. Now let me show you how to create a layout component. In the resources/views/components/layout folder, create a file named AppLayout.blade.php:
<!-- resources/views/components/layout/AppLayout.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $title ?? 'My App' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<header>
<!-- You could include a navigation component here -->
<x-navigation.main-menu />
</header>
<main>
{{ $slot }}
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
</html>Now, let us create a form input component and in resources/views/components/form folder, create a file named Input.blade.php.Â
<!-- resources/views/components/form/Input.blade.php -->
@props(['name', 'label', 'type' => 'text'])
<div>
<label for="{{ $name }}" class="block text-sm font-medium text-gray-700">{{ $label }}</label>
<input type="{{ $type }}" name="{{ $name }}" id="{{ $name }}" {{ $attributes->merge(['class' => 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) }}>
</div>To use these components in your views, you would do the following
<!-- resources/views/welcome.blade.php -->
<x-layout.app-layout>
<x-slot name="title">Welcome to My App</x-slot>
<h1>Welcome to My App</h1>
<form action="/submit" method="POST">
@csrf
<x-form.input name="username" label="Username" />
<x-form.input name="email" label="Email" type="email" />
<x-form.input name="password" label="Password" type="password" />
<button type="submit">Submit</button>
</form>
</x-layout.app-layout>This structure allows us to organize our components logically and reuse them wherever we want to or wish to. As your project grows, we might create more specific components and you could create a button component:
<!-- resources/views/components/form/Button.blade.php -->
@props(['type' => 'button'])
<button {{ $attributes->merge(['type' => $type, 'class' => 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600']) }}>
{{ $slot }}
</button>Next we would use this button component like this:
<x-form.button type="submit">
Submit Form
</x-form.button>Remember, Rome wasn’t built in a day, and neither is coding expertise. Keep at it, and before you know it, you would be crafting complex, nested components like it’s second nature. Your fellow devs will be in awe of your Laravel wizardry. So there we have it.
