DEV Community

Nasrul Hazim Bin Mohamad
Nasrul Hazim Bin Mohamad

Posted on

4 1

Livewire Alert

Let's create a simple Livewire Alert component, to replace a normal conventional alert message.

Assuming you are using Laravel Jetstream as well.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Alert extends Component
{
    public $displayingModal = false;

    public $state = [
        'title' => '',
        'message' => '',
    ];

    protected $listeners = [
        'displayAlert' => 'display',
    ];

    public function display($title, $message)
    {
        $this->state['title'] = $title;
        $this->state['message'] = $message;

        $this->displayingModal = true;
    }

    public function render()
    {
        return view('livewire.alert');
    }
}
Enter fullscreen mode Exit fullscreen mode

The blade file:

<div>
    <x-jet-dialog-modal wire:model="displayingModal">
        <x-slot name="title">
            {{ $state['title'] }}
        </x-slot>

        <x-slot name="content">
            <p>
                {{ $state['message'] }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-jet-button class="ml-3" wire:click="$set('displayingModal', false)" wire:loading.attr="disabled">
                {{ __('Close') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>
Enter fullscreen mode Exit fullscreen mode

Once you have the component configured, you may use and trigger by using emitTo:

$this->emitTo('alert', 'displayAlert',  'Greeting', 'Hello World!');
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more