DEV Community

loading...

First look at Blade View Components in Laravel 7

zubairmohsin33 profile image Zubair Mohsin ・2 min read

Components feature already existed in Laravel as Blade directives. docs link
But, in Laravel 7, they just took it to a whole new level.
Let's dive in.

Laravel 7 has not been released at the time of writing this article, if you want to follow along, you can download it with below command.

laravel new projectname --dev

Creating Components

A new Artisan command is available to easily create components:

php artisan make:component Alert

This command will create two files:

  • a class file (App\View\Components\Alert.php)
<?php

namespace App\View\Components;

use Illuminate\View\Component;

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

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}
Enter fullscreen mode Exit fullscreen mode
  • a blade file (resources/views/components/alert.blade.php)
<div>
    <!-- He who is contented is rich. - Laozi -->
</div>
Enter fullscreen mode Exit fullscreen mode

Let's modify this HTML so that we can see this component in action when we render it.

<div>
    <h3>Alert Component</h3>
</div>
Enter fullscreen mode Exit fullscreen mode

Rendering Components

Components are meant to be used within Blade templates. There is a special syntax to use a component in blade file.

x- followed by the kebab case name of component class.

<x-alert />
Enter fullscreen mode Exit fullscreen mode

Let's use our Alert component in welcome.blade.php

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
                <div>
                    <x-alert/>
                </div>
            </div>
Enter fullscreen mode Exit fullscreen mode

Output:
Displaying Alert Component

Automatic Discovery

Laravel can automatically discover components in app/View/Components directory and resources/views/components directory.

But what if components are nested in directories for example App\View\Components\Alerts\Success.php ?

We can use . notation to indicate directory nesting.

<x-alerts.success />
Enter fullscreen mode Exit fullscreen mode

Passing Data to Components

We can pass data via HTML attributes. It's similar to passing props in a Vue component.

  • primitive or a hard coded value
<x-alert type="error" />
Enter fullscreen mode Exit fullscreen mode
  • variables and expressions should be passed with : prefix
<x-alert :message="$message" />
Enter fullscreen mode Exit fullscreen mode

In component's class, this data should be made available via constructor.

class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}
Enter fullscreen mode Exit fullscreen mode

Notice that both properties are set to public.

All public properties will be available to component's view file. You don't need to pass the data to view from render() method.

alert.blade.php can use these properties as:

<div>
    <div class="alert alert-{{$type}}">
        <h3>{{$message}}</h3>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

There are few other things related to this topic:

  • Anonymous components
  • Accessing public methods in view but I think we can cover that in Deeper look article 🤷🏻‍♂️

Calling it First look because I am actually reading docs while writing this article 😂 docs link

Let me know your thoughts about Blade View Components in comments below.

Discussion (7)

pic
Editor guide
Collapse
bpedroza profile image
Bryan

I prefer the @component syntax. I think it's more obvious than this x-component syntax. I could see having the ability to work on the input being really useful though. Like money formatting the passed prop or something.

Thanks for this great intro article.

Collapse
mjcoder profile image
Mohammad Javed

This is a proper game-changer, Laravel never ceases to amaze me. I can't wait to master Laravel and have this under my belt for development.

Collapse
vanaf1979 profile image
Stephan Nijman

For those who want to see this in action: youtube.com/watch?v=cQWeTnOwlm4

Collapse
zubairmohsin33 profile image
Zubair Mohsin Author

Guys, go check it out. Really good example. 👍

Thanks for sharing it.

Collapse
vanaf1979 profile image
Stephan Nijman

Your welcome. That whole channel is pretty cool btw. :)

Collapse
pastuh profile image
pastuh

Looks like need to remember Laravel again :))

Collapse
vsfarooqkhan profile image
Farooq khan • Edited

Wow.. that will take laravel into new level ..