How to Create & Use Components in Laravel 8

Reading Time: 7 minutes

Components are the re-usable section or layout which we can use inside laravel application. In laravel there are two methods to writing a components: class based components and anonymous components.

Learn More –

Inside this article we will see about complete concept of Components in Laravel 8 by the help of following points –

  • Create a Component
  • Files associated with a laravel component
  • Using Component in laravel
  • About Slots in Laravel
  • Passing Data to components
  • About Inline Component in Laravel

Let’s get started.

Laravel Installation

We will create laravel project using composer. So, please make sure your system should have composer installed. If not, may be this article will help you to Install composer in system.

Here is the command to create a laravel project-

composer create-project --prefer-dist laravel/laravel blog

To start the development server of Laravel –

php artisan serve


Assuming laravel already installed inside your system.

Create a Component

To create a class based component in laravel we use make:component artisan command. Back to terminal and type this command to create it.

$ php artisan make:component Message

When we run this, it creates few files into setup. Let’s see what are those files.

Files associated with a laravel component

make:component command creates a view template file as well as a Component class file. View layout file we will find inside /resources/views/components/message.blade.php. Along with this view file we also have a component class file. Class file we can find inside /app/View/Components/Message.php

Layout file of component provides the user interface means how component is presenting to application. Class file of component manages the component functionality. In class file we should see two methods as __construct() & render(). We will understand how we use these methods in a bit inside this ongoing article.

Using Component in laravel

In the last steps we have successfully created a component layout and it’s functional file. Next, we need to use it in application.

To use a component, we use a “blade component tag” within any template file or layout. Blade component tags start with the string x- followed by the kebab case name of the component class.

# Syntax


In the above case we have component class name as Message. So it is pretty simple.


/resources/views/about-us.blade.php Calling component inside this view file.


When we have some cases like $ php artisan make:component DisplayMessage. To use this type of component we use.


About Slots in Laravel

Slot is used to get the contents what we have given inside blade component tag. This handles the additional information related to slots.

Assume that we are calling component like this. Inside this we have some contents.

    <strong>Great!</strong> Student has been created.

To get the placed content from blade component tag, we use {{ $slot }} predefined variable in laravel. Back to component layout file –

<!-- /resources/views/components/message.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}


{{ $slot }} variable going to print all the contents what we passed inside component tag.

Passing Data to components

We can pass two types of values. Static value and dynamic value. Let’s see how to pass data.

<x-message type="warning" :message="$message"/>
  • “type” is key which contains the value as warning. It has a static value.
  • “:message” is a key which contains dynamic value by means of variable.

Firstly we need to set the data attributes values to variable and then we need to send to layout file. To set these values, back to component class file. Open /app/View/Components/Message.php


namespace App\View\Components;

use Illuminate\View\Component;

class Message extends Component
     * The message type.
     * @var string
    public $type;

     * message.
     * @var string
    public $message;

     * Create the component instance.
     * @param  string  $type
     * @param  string  $message
     * @return void
    public function __construct($type, $message)
        $this->type = $type;
        $this->message = $message;

     * Get the view / contents that represent the component.
     * @return \Illuminate\View\View|\Closure|string
    public function render()
        return view('components.message');

Displaying data attributes to layout file

<div class="alert alert-{{ $type }}">
    {{ $message }}

  • {{ $type }} Blade syntax to print the value of $type sending from it’s class file.
  • {{ $message }} Blade syntax to print the value of $message.

About Inline Component in Laravel

Inline components are those components which basically generates only a single file i.e component class file. Inside the same class file we will have a render() method and piece of inline HTML code written inside it.

In regular components we have 2 files but in case of inline we have a single file.

Generate a Inline Component

To generate a inline component, we use make:component artisan command but this time we will a extra flag which is for inline.

$ php artisan make:component Message --inline

This command will generate something like this into the component file.

 * Get the view / contents that represent the component.
 * @return \Illuminate\View\View|\Closure|string
public function render()
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}

Inside above code we can see we have HTML markup inside render().

We hope this article helped you to learn about Components in Laravel 8 Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Sanjay KumarHello friends, I am Sanjay Kumar a Web Developer by profession. Additionally I'm also a Blogger, Youtuber by Passion. I founded Online Web Tutor and Skillshike platforms. By using these platforms I am sharing the valuable knowledge of Programming, Tips and Tricks, Programming Standards and more what I have with you all. Read more