Can i set a custom tag and a custom value in laravel component?

Question

<div class="bg-white dark:bg-custom-black-600 dark:text-white rounded px-4 pb-4 pt-2">
    <div class="flex-shrink-0 flex justify-between items-center">
        <h4 class="font-semibold flex-shrink-0">
            {{ __('services') }}
        </h4>
        <i class="ri-hard-drive-2-fill text-blue-600 dark:text-blue-600"></i>
    </div>
    <p class="text-3xl text-blue-600">
        {{ Auth::user()->services->count() }}
    </p>
</div>

this is my code from the component card.blade.php. Now the question: "Can I make a custom value that I have to specify in the tag <x-card title="" service=""> or is that not possible? I would like {{ __('services') }} and {{ Auth::user()->services->count() }} not to be static in the code example.

Answer 1

You'd need to write a component class to handle variables in the template. That class would interpret the input and store it in variables that can be accessed in the template. This is all described in the documentation.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Card extends Component
{
    public function __construct(
        public string $title,
        public string $service,
    )
    {}

    public function render()
    {
        return view('components.card');
    }
}

Call the component like this:

<x-card title="Something" service="something else"/>

And you should then be able to use $title and $service in the Blade template file. Note if you want to use PHP values, you'll need to do something like this:

<x-card :title="__('something')" service="something else"/>

Note the colon preceding the attribute name.