Laravel Livewire powerful yet simple way to add backend functionality to your Devisto projects. In fact, it's the only way to add backend code to your Devisto project. You can make many different components with Livewire, like contact forms, filter forms, cookie notices, and so on.
Knowledge of Livewire is recommended. Take a look at the official Laravel Livewire documentation for more information.
When you create a new Livewire Component in Devisto, you will be presented with this contents:
<div>
{{-- Your template goes here --}}
</div>
<?php
class MyComponent extends Component
{
//
}Note that the template and the component class are in the same file (just like single-file Vue components). In regular Livewire projects, this is not possible. But in Devisto it is, because we compile it down to 2 files automatically for you. It's a convenient way to see everything about the component together in 1 place.
However, you can always work with separate files if you want to, just like Livewire works by default. Just move the view to a new file livewire/my-component.blade.php:
<div>
{{-- Your template goes here --}}
</div>And a change your component code to:
<?php
class MyComponent extends Component
{
//
}The convention for Livewire component names is StudlyCase, for both the file and the class. So a contact form component could live in a ContactForm.php file, and the class name in the file will be ContactForm.
If you nest the component in a folder, that folder should also be named in StudlyCase, for example MyForms/ContactForm.php. The class name inside the file stays just ContactForm. You don't have to do anything special to make it work inside a folder, we handle namespaces automatically for you.
Pay attention when you rename a component file. Don't forget to change the class name inside the file as well!
Unless regular Livewire components, in Devisto you don't have to define a render() method. We handle this for you automatically.
However, you can still define data that is passed to the view, as follows:
// As a property
protected $renderData = [
'name' => 'John',
];
// Or as a method
protected function renderData()
{
return [
'name' => 'John',
];
}Livewire components can be previewed, even when they're not (yet) included in some view on your website. Right-click the name of the component in the tree and choose Open Preview to initialize the component preview.
If you receive data in your component on mount, then you have to do one more thing to make the preview work. Let's say we have something like this:
<div>
My name is {{ $name }}.
</div>
<?php
class MyName extends Component
{
public $name;
public function mount($name)
{
$this->name = $name;
}
}This component can be included in your views as follows:
@livewire('my-name', ['name' => 'John'])However, when previewing a component, that extra data is not available. To make the preview work, you'll have to add previewData to your component:
// As a property
protected $previewData = [
'name' => 'John',
];
// Or as a method
protected function previewData()
{
return [
'name' => 'John',
];
}We provide a saveAsset helper method on the component to save assets in forms:
<div>
<form wire:submit.prevent="save">
<input type="file" wire:model="photo">
<button type="submit">Save Photo</button>
</form>
</div>
<?php
class ContactForm extends Component
{
public $photo;
public function save()
{
$this->validate([
'photo' => 'image|max:1024',
]);
$asset = $this->storeAsset($this->photo);
}
}Take a look at our Snippets section for some complete examples.
Component can be included anywhere in your views as follows:
{{-- Regular syntax --}}
@livewire('my-component', ['name' => 'John'])
{{-- Alternative syntax --}}
<livewire:my-component name="John" />