Posts Learn Components Snippets Categories Tags Tools new About
/

How to Pass Classes to Laravel Livewire Component

Get to know the way to pass classes to Laravel Livewire component using property

Created on Oct 21, 2021

41 views

To pass classes to the Laravel Livewire component you can make use of the property defined from within the component. The implementation is very straightforward, do refer to the code example below.

Create New Livewire Component


To create a new Livewire component you can make use of the "livewire:make" command line. For this example let's create a simple card component.
php artisan livewire:make components/card
Upon running the command you should get the message like below.
COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/Components/Card.php
VIEW:  resources/views/livewire/components/card.blade.php
Do note that if you have not installed livewire do run the composer require command below.
composer require livewire/livewire

Create Simple Card Styling


For this example, we'll be using the Tailwind CSS User Card Component available from our components collection. The blade view of the card component should have this HTML.
<div class="flex items-center relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md">
    <div class="w-12 h-12 rounded-full bg-gray-100"></div>
    <div class="ml-3">
        <p class="font-medium text-gray-800">John doe</p>
        <p class="text-sm text-gray-600">Last online 4 hours ago</p>
    </div>
</div>
This component is using Tailwind CSS so do make sure to have the CDN included to have it running.
<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Define The Component Property


From the component class, you can define a new public property that will be accessible from the component blade view. For this example let's call it "classes" which is a string type.
<?php

namespace App\Http\Livewire\Components;

use Livewire\Component;

class Card extends Component
{
    public $classes;

    public function render()
    {
        return view('livewire.components.card');
    }
}
And for the blade view "livewire/components/card.blade.php" you need to update the class to add the Component property ($classes).
<div class="flex items-center relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md {{ $classes }}">
    <div class="w-12 h-12 rounded-full bg-gray-100"></div>
    <div class="ml-3">
        <p class="font-medium text-gray-800">John doe</p>
        <p class="text-sm text-gray-600">Last online 4 hours ago</p>
    </div>
</div>

Call Component From Your Blade Views


Now that you have defined that, you can call the component and pass an additional class to the "$classes" property like below.
<livewire:components.card
    classes="your other class here"
>
Do note that you can pass the property like above because you have defined the "$classes" property as public so it's accessible from within the component.

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)