Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
make a component in laravel 10

How to create component in Laravel 10 ?

Aman Jain, March 23, 2023March 16, 2024

In this tutorial i will show you simple html based component in Laravel 10 using blade. Creating reusable components is a fundamental aspect of modern web development, as it allows developers to simplify code and improve efficiency. Laravel 10, one of the most popular PHP frameworks, comes with a robust system for building components. Laravel itself provides library to build a html component like angular or react which also accepts parameters through html attributes. we can use these component anywhere in our application and they are independent of controller routes etc.

Understanding the working of make or create component in laravel 10

Laravel component starts with x followed by kebab case name and we can create a component by artisan command php artisan make:component HelloWorld .

Above command will create a HelloWorld component class in the App\View\Components directory and the view path will be resources/views/components/HelloWorld directory.

Now, you will be able to access it in any view using x-hello-world

Let’s understand it with an example

Step 1: Create a component

I assume you know Laravel installation and basic configuration. To create a component in Laravel 10, start by running the “make:component” Artisan command in the terminal, followed by the name of the component

php artisan make:component HelloWorld

Above command will create two files one is class in app\View\Component and other one resources\views\component\hello-world.blade.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class HelloWorld extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.hello-world');
    }
}

The generated file will contain two methods: “render” and “__construct”. The “render” method returns the HTML markup for the component, while the “__construct” method is used to accept the parameters from component

<div>
   This is Readerstacks Hello World Component
</div>

Step 2: Using component in other view

Now, lets create a simple view to use our newly created view in it.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Readerstacks Laravel 10 component example</title>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        This is a test for component page
        <x-hello-world></x-hello-world>
    </body>
</html>

Step 2: Create route

Here, we need to create route and we will calll the view to use our new blade component

<?php
use Illuminate\Support\Facades\Route;

Route::get('/component', function(){
    return view('testcomponent');
});

Now, Check our implementation by running the project

php artisan serve

Screenshot :

make a component in laravel 10
make a component in laravel 10

Passing data to component

We can also send string, object or any data type to our component using attributes. string can be passed directly as we do in normal html but variables are passed using : character prefix to the attribute for example

   @for($counter=0;$counter<=5;$counter++)
        <x-hello-world title="Readerstacks" :counter-value="$counter"></x-hello-world>
   @endfor

And then component class will have to new properties title and counter as below

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class HelloWorld extends Component
{
    public $title; // new property
    public $counterValue;// new property
 
    public function __construct($title,$counterValue) // injected here
    {
        $this->title=$title;
        $this->counterValue=$counterValue;
        
    }
    public function render()
    {
        return view('components.hello-world');
    }
}
Screenshot 2021 12 08 at 7.19.19 AM
Laravel component passing data

Component Attributes and Merge Attributes

Same as other html elements we can also pass attributes like class, id, name etc. to the custom Laravel component as below

  <x-hello-world title="Readerstacks" class='danger' id='myid'></x-hello-world>

Then in our component view we can access these properties using $attributes variable.

<div {{ $attributes }} >
   This is Readerstacks Hello World Component
</div>

Merging attributes in Laravel component

Merging attributes mean we can add additional value to default passed attributes to the element as below.

  <x-hello-world title="Readerstacks" class='danger' id='myid'></x-hello-world>

and in component html

<div {{ $attributes->merge(["class"=>"alert "]) }} >
   This is Readerstacks Hello World Component
</div>

Output will be

<div class="alert danger">
    This is Readerstacks Hello World Component
</div>

How to insert html as child in component?

Now, we have learn about using the component , passing data, attributes. Sometime we wanted to add some html as a child in our component as below

<x-hello-world title="Readerstacks" class='danger' id='myid'>
<span>My Child </span>
</x-hello-world>

So to render this child html we use slots , slots are used to place the inner html of any component into component html view. Child elements can be place in component view by echoing $slot

<div class="alert danger">
   This is Readerstacks Hello World Component
   <div class="msg">
     {{ $slot }}
   </div>
</div>

Named slot in component

Named slots are used to define multiple slot in a component what if we wanted to use multiple slot in different location in our component . It’s also known as Scoped slot

<x-hello-world title="Readerstacks" :counter-value="$counter">
                <x-slot name='msg'>
                        <div class='msg'>Wow!</div>
                </x-slot>
                <x-slot name='anotherslot'>
                        Wow! i am another slot
                </x-slot>
</x-hello-world>

And in our component html

<div>
   This is Readerstacks Hello World Component and Dynamic Title is {{$title}} and counter {{$counterValue}} 
   {{$msg}}
   <h3 class="slot3">
    {{$anotherslot}}
   </h3>
 
</div>

As we can see in above example we can directly access our slots in html without defining in component class.

And Output:

Screenshot 2021 12 08 at 7.43.14 AM
Multiple slot in Laravel component

In conclusion, Laravel 10 provides a simple yet powerful system for building reusable components. By following the steps outlined above, developers can easily create and integrate components into their web applications, improving efficiency and simplifying code.

Related

Php Laravel bladecomponentlaravelphp

Post navigation

Previous post
Next post

Related Posts

Php How to add watermark(image text) to image in laravel

How to add watermark(image/ text) to image in laravel 9 ?

May 15, 2022May 15, 2022

In this tutorial i will show you add watermark(image/ text) to image in laravel 9. Sometimes for privacy or copyright of images we need to add watermark to the images, watermark can be a text or image. We will use laravel package to add watermark and i will show you…

Read More
Javascript Laravel Dynamic Autocomplete Using Typehead JS

Laravel Dynamic Autocomplete Using Typehead JS

July 16, 2022July 16, 2022

In this article we will learn to use Laravel Dynamic Autocomplete Using Typehead JS. Typehead JS is useful when we want live search of bulk data. Autocomplete search is mostly work of javascript and when we want to fetch live data from database then we require the intervention of laravel…

Read More
Php How to Restore Soft Deleted Records in Laravel 9

How to Restore Soft Deleted Records in Laravel 9 ?

June 16, 2022June 15, 2022

In this article we will learn to restore soft deleted records in Laravel. In our recent article How to fetch Soft Deleted Records in Laravel 9 ? we learnt to fetch the records from database which is soft deleted and sometimes we want to restore records that are soft deleted…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version