@mentions with Alpine.js, Livewire & Tributeq

create-comment.blade.php

<x-mention wire:model="body" :mentionables="$mentionables" />

CreateComment.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class CreateComment extends Component
{
    public $mentionables;
    public $body;


    public function mount()
    {
        $this->mentionables = User::all()
            ->map(function ($user) {
                return [
                    'key' => $user->name,
                    'value' => $user->username,
                ];
            });
    }
}

mention.blade.php

@props([
    'mentionables' => []
])

<div
    x-data
    x-init='
        ()=> {
            let tribute = new Tribute({
                trigger: "@",
                values: @json($mentionables)
            });
            tribute.attach($refs.textarea);
        }
    '
    wire:ignore
>
    <textarea x-ref="textarea" {{ $attributes->merge(['class' => 'form-control']) }}></textarea>
</div>

@once
    @push('styles')
        <link href="https://unpkg.com/browse/[email protected]/dist/tribute.css" rel="stylesheet" />
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/browse/[email protected]/dist/tribute.min.js"></script>
    @endpush
@endonce