Livewire Docs

[Azucena Mcquay]

WhileLaracord has not been thoroughly tested with everything Livewire has to offer, it has been tested with basic full page components and can be a very quick and powerful way to create a basic web interface to interact with your bot instance in real-time without Javascript.

In this example, we will install Livewire and create a simple message component that is capable of showing every user visible to the bot in a select dropdown and firing off a message using the bot instance when clicking send.

The component view is located in resources/views/livewire/message.blade.php and will be composed of a simple select dropdown, a textarea, and a send message button. I won't go into specifics for this one:

I did come across that github issue in my troubleshooting and, though that thread is pretty anti-climactic, I managed to get the livewire.js assets to work, which I believe was when I ran the vendor:publish command.

If you can checkout the nginx error logs (need to ssh first and then run something like tail -f /var/log/nginx/error.log and refresh the page. It might give you some insights on what it is trying to load.

So, i tried the asset_url adjustment and that still didnt work for the Filament assets but you mentioned the Nginx log, so I checked that out and saw that it was logging errors for the path that it was looking for. I then copied the Filament assets directly to the path that was logged in the Nginx logs and BAM! its working!!

So in this particular edge case (because Filament is not complying with the conventions and isnt affected by the usual approaches), I am just going to make a couple custom flow steps which copy these assets during deployment.

It's important that you use the $this->form->fill() method instead of assigning the data directly to the $this->data property. This is because the post's data needs to be internally transformed into a useful format before being stored.

In some cases, the form's model is not available until the form has been submitted. For example, in a Create Post form, the post does not exist until the form has been submitted. Therefore, you can't pass it in to $form->model(). However, you can pass a model class instead:

On its own, this isn't as powerful as passing a model instance. For example, relationships won't be saved to the post after it is created. To do that, you'll need to pass the post to the form after it has been created, and call saveRelationships() to save the relationships to it:

In all of our previous examples, we've been saving the form's data to the public $data property on the Livewire component. However, you can save the data to individual properties instead. For example, if you have a form with a title field, you can save the form's data to the $title property instead. To do this, don't pass a statePath() to the form at all. Ensure that all of your fields have their own public properties on the class.

By default, the InteractsWithForms trait only handles one form per Livewire component - form(). To add more forms to the Livewire component, you can define them in the getForms() method, and return an array containing the name of each form:

Filament is also able to generate forms for a specific Eloquent model. These are more powerful, as they will automatically save the data in the form for you, and ensure the form fields are properly configured to access that model.

By default, passing a model to the make:livewire-form command will result in a form that creates a new record in your database. If you pass the --edit flag to the command, it will generate an edit form for a specific record. This will automatically fill the form with the data from the record, and save the data back to the model when the form is submitted.

Under the hood, wire:model adds an event listener to update a property every time the input event is dispatched on or under the element. Another way to communicate between Livewire and Alpine is by using Alpine to dispatch an input event with some data within or on an element with wire:model on it.

Fortunately a library like Pikaday adds it's extra DOM at the end of the page. Many other libraries manipulate the DOM as soon as they are initialized and continue to mutate the DOM as you interact with them.

If you can follow, you should be able to see the potential here. This API allows you to interact with a Livewire component, programatically, from JavaScript. This pattern unlocks all sorts of potential.

You may be wondering, "But how do I get the unique component id?". Well, you can inspect the source and look at the wire:id attribute on the root element of the component. OR you can use this very handy syntax from inside your Livewire component's view:

If you followed, Livewire has a Blade directive called @this that is an alias for window.livewire.find('...'). This directive makes it extremely easy to talk to the current Livewire component from JavaScript, particularly AlpineJS expressions.

WarningThis Vite plugin, as Livewire needs to persist in page, is not fully compatible with other plugins that full refresh the page when a .blade.php file changes (i.e. laravel/vite-plugin with refresh option active)in order to make them work together, blade files in **/livewire/** should be excluded from blade hot reload. For Laravel Vite plugin, this config would solve the issue:

3a8082e126