DEV Community

Cover image for Laravel 11 Custom Component File Structure
Arman Rahman
Arman Rahman

Posted on

Laravel 11 Custom Component File Structure

Would you like to create a component like this, or do you prefer to develop your own custom component in Laravel with a custom path?

Image description

Then you need to follow few steps

Step 1: Create a Service Provider

php artisan make:provider PackageServiceProvider
Enter fullscreen mode Exit fullscreen mode

You can name it your own.

Step 2: Add Blade::componentNamespace('App\View\Backend\Components', 'backend'); on your boot() method

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class PackageServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        Blade::componentNamespace('App\View\Backend\Components', 'backend');
    }
}

Enter fullscreen mode Exit fullscreen mode

Step 3: Create a php file as per your file structure. I created my file here.

app\View\Backend\Components\AdminSidebar.php

Step 4: Return your blade directive on render() method.

<?php

namespace App\View\Backend\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class AdminSidebar extends Component
{
    /**
     * Get the view / contents that represents the component.
     */
    public function render(): View
    {
        return view('backend.components.sidebar');
    }
}

Enter fullscreen mode Exit fullscreen mode

Step 5: Create your blade file as you mentioned. For my case I added like this.

resources\views\backend\components\sidebar.blade.php

Step 6: Your Component setup is done. now you can access that component by this-

<x-backend::admin-sidebar />
Enter fullscreen mode Exit fullscreen mode

Hope this will help you. Thank You.

Top comments (0)