Logo

dev-resources.site

for different kinds of informations.

Laravel 11 Custom Component File Structure

Published at
6/2/2024
Categories
laravel
component
custom
armanrahman
Author
armanrahman
Author
11 person written this
armanrahman
open
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.

custom Article's
30 articles in total
Favicon
Custom Website Development - A Complete Guide for Small Businesses
Favicon
What Are the Steps Involved in Developing a Custom AI Solution?
Favicon
How Will Custom EMR EHR Software Reshape the Healthcare Horizon?
Favicon
The Ultimate Guide to Custom T-Shirts: Unique, Creative, and Personalized
Favicon
Custom Bottle Neckers for Sale Wholesale and Printed Options
Favicon
Order Custom Bottle Neckers Wholesale for Packaging Needs
Favicon
Custom CBD Boxes Wholesale with Logo for Premium Branding
Favicon
How to Build a Secure and Profitable DeFi Staking Platform
Favicon
Power of Custom Product Packaging: Enhancing Brand Experience and Driving Sales
Favicon
How to add custom fonts and viewports in storybook?
Favicon
How to choose the right service app for your needs | Optimity Logics
Favicon
Vue Vs Angular: Which One Should You Choose for Your Project? | Optimity Logics
Favicon
Transform Your Branding with 3M Printable Vinyl Wraps in Deltona, FL
Favicon
This Single-Line Command Reduced Our Database Object Management Efforts
Favicon
Custom Website Design Benefits
Favicon
Elevate Gift Giving With Custom Pillow Boxes For Every Occasion
Favicon
Creating a Custom 404 Not Found Page in Next.js 14
Favicon
How Cloud-Native Development is Redefining Custom Software Solutions?
Favicon
Boost Your Sales with a Custom Virtual Store: Here’s How
Favicon
DOM Selection with Custom Function
Favicon
When it comes to interior design in Dubai
Favicon
Building a Custom Flutter Widget from Scratch
Favicon
The Ultimate Guide to Choosing the Right Custom Sunglasses Manufacturer for Your Brand
Favicon
Laravel 11 Custom Component File Structure
Favicon
Secure Your Online World for Under $6: Why You Need a Personal VPN
Favicon
Streamline Your Django Workflow: A Guide to Creating Custom Management Commands
Favicon
5 Software Development Tips to Improve Your Product Growth
Favicon
Desenhos complexos com CustomPaint
Favicon
Desenhe o que quiser com Custom Paint no Flutter
Favicon
How to create a custom VSCode theme

Featured ones: