Category: Laravel

Synaptic Livewire

How to use Livewire & Trix Editor

Today I’m going to write a very fast recipe to install Trix Editor and use in our Laravel 7.x with laravel-mix.

For this tutorial I’m using Laravel Boilerplate, so, Livewire is already installed and working.

To use with our boilerplate we need to install trix through npm:

npm i trix --only=dev

Open resource/js/backend/app.js and add:

import 'trix/dist/trix'; // importing trix

Now we need to add styles, open resource/js/backend/app.scsss and add:

@import '~trix/dist/trix.css';

Now lets compile our assets:

npm run dev

Now we have our libraries to use Trix in our blades, to use in a blade we need to add the tag <trix-editor /> in this way:

<div class="row">
<div class="col" wire:model.debounce.365ms="msg" wire:ignore>
<input id="msg" value="Hello LiveWire & Trix" type="hidden" name="content">
<trix-editor input="msg"></trix-editor>

Let’s explain a bit

wire:ignore its to avoid livewire updates to the DOM.

wire:model.debounce.365ms is used to bind the input field with our livewire component.

And it’s all, pretty easy… i tried other text editor’s but this was more easy to deploy.