How to Create Components in laravel 10

14-Sep-2024

S.no	Contents-topics
1	What are components
2	How to setup components
3	How to use components
4	Pass data to components

1:What are Components

Components are the one of the best feature that comes with laravel , components are define as the reusable peice of code that is being used in laravel blde fiile or we may say that laravel views. As the name defines components means to be a component of a page , for eg in a html file there are several different components like header , sidebar , footer and sometimes our header and footers are same but CSS and scripts file are different according to ech page so on that time we use component.

2:How to setup Components

With an example , we inializing some scripts by using component as component are the piece of code , you may use components in the form of google analytics , some kind of loading scripts ,
Taking an HTML example from Deveoper-Corner , starting from the artisan command for footer as component
Copy for creating footerCopy

php artisan make:component footer

Inside resources/views/components/footer.blade.php you can see footer.blade.php has been created and also in app/View/Component/footer.php

3:How to use components

That blade file reffers to views in blade and php file is used for binding up the objects and send them to the component in laravel you don't have to send data every time from backend. You have to just send data for the first time in app/View/Component/footer.php and then just inialiaze this component wherever you want.

Also read: How to Send Email from Multiple Mailing accounts in Laravel 10

Basic blade fiile code: Copy

<!DOCTYPE html>

<head>

<title>Developer Corner</title>

</head>

<body>

<h4 class="mt-4">Welcome To Develpoer-Corner</h4>

<div>

<h6 class="mt-4">Using Footer as Component</h6>

</div>

</div>

</body>

<x-footer></x-footer>

</html>

As you can see in the footer of this html file component is used as <x-footer></x-footer> in blade file and resources/views/components/footer.blade.php contains the basic footer code like this script code.
Footer code: Copy

<div>

This is footer Component by {{$name}}

</div>

$('#showContent').html('Showing footer');

</script>

4:Pass data to components

Also read: JOBS IN LARAVEL 10 , JOBS-QUEUES IN LARAVEL 10

As shown {{$name}} variable is call from app/view/Component/footer.php to resources/views/components/footer.blade.php to binding up the variables
app/view/Component/footer.php.code: Copy

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class footer extends Component

{

/**

* Create a new component instance.

* @return void

public function __construct()

{

$this->name = 'Developer-Corner';

}

/**

* Get the view / contents that represent the component.

* @return \Illuminate\Contracts\View\View|\Closure|string

public function render()

{

$name = $this->name;

return view('components.footer',['name'=>$name]);

}

Basically we use this footer.php to binding up the objects and call them separately in component because by using thhis this you don;t need to call the same variable in each controller and then in view file So this the basic example of components in laravel ...

Tags: how to create components in laravel 10 , reusable codes laravel view , how to use piece of code in blade file in laravel 10,laravel , php ,laravel-php , mvc laravel, advance laravel , bugs in laravel , laravel advance level,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.