• Reading time ~ 2 min
  • 04.08.2023

The Laravel team recently released Volt, which allows you to build full Livewire components right in your Blade views. Initially, it was released with a functional syntax. You can import Volt's functions and wrap your Livewire functionality for state, computed properties, actions, etc. in those.

For example, a simple component for creating a post using the functional syntax:

<?php
use App\Models\Post;
use function Livewire\Volt\{state};
use function Livewire\Volt\{rules};

state([
    'title' => '',
    'content' => '',
]);
rules([
    'title' => ['required', 'max:250'],
    'content' => ['required', 'max:10000'],
]);
$save = function () {
    $this->validate();

    Post::create([
        'title' => $this->title,
        'content' => $this->content,
    ]);
    return redirect('/posts');
}
?>
<form wire:submit="save">
    <div>
        <label>Title</label>
        <input wire:model="title" type="text" />
    </div>
    <div>
        <label>Content</label>
        <textarea wire:model="content"></textarea>
    </div>

    <button>Save</button>
</form>

As of today, the Laravel team has released v1.0-beta.3 which introduces a new class-based syntax for Volt components. This allows you to write Livewire components using the more traditional syntax you're used to, but still all inside your Blade files.

For example, the same create post component written with the new class-based syntax:

<?php
use App\Models\Post;
use Livewire\Volt\Component;
use Livewire\Attributes\Rule;

new class extends Component
{
    #[Rule(['required', 'max:250'])]
    public $title = '';

    #[Rule(['required', 'max:10000'])]
    public $content = '';

    public function save() {
        $this->validate();

        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);
        return redirect('/posts');
    }
}
?>
<form wire:submit="save">
    <div>
        <label>Title</label>
        <input wire:model="title" type="text" />
    </div>
    <div>
        <label>Content</label>
        <textarea wire:model="content"></textarea>
    </div>

    <button>Save</button>
</form>

What do you think? Do you prefer the functional syntax or the more traditional class-based syntax? Personally, I like the class-based syntax a little more, but it's awesome to see the Laravel team providing multiple ways for people to build functionality!

Comments

No comments yet
Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Replies

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Yurij Finiv

Yurij Finiv

Full stack

ABOUT

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

About author CrazyBoy49z
WORK EXPERIENCE
Contact
Ukraine, Lutsk
+380979856297