SuperEasy Livewire : Laravel Volt

Laravel Livewire Volt

If you are new to Livewire please refer to Tutorial-1 and Tutorial-2 .

Tall Stack is here to stay. Livewire is awesome. It helps us create dynamic interfaces without leaving the comfort of Laravel. Laravel Volt is LiveWire++. It provides simplified way to create Livewire components as single-file components. This means component logic and blade template co-exist in the same file.

Volt allows us to create components using functional syntax or class based syntax. We are creating a simple increment-decrement counter.

A Simple increment decrement counter using Laravel Livewire Volt

Let us look at functional syntax first:

We have used a single file to define logic and view. This makes development much easier.

The same component written using class-syntax:

Since I am from the days of core php, I prefer class based syntax over functional syntax. You are free to go with anyone.

Forms and validation

Adding Validation rules is super-easy. We want $inputvalue as required field, accept numeric value only.

#[Rule(['required', 'numeric'])]
    public $inputvalue = 0;

Validation is performed using $this->validate(); method

 $this->validate();

Error message specific to a field is displayed as:

 @error('inputvalue')
 {{ $message }}
 @enderror

The complete component is:

Component in action:

Installation

laravel new my-awesome-app
cd my-awesome-app
composer require livewire/livewire "^3.0@beta"
composer require livewire/volt "^1.0@beta"
composer install
php artisan volt:install

Creating a new Volt Component

php artisan make:volt counter

If you want learn more , refer this section for Livewire and this for Volt .

Source code may be downloaded from this repository.

Just open welcolme.blade.php and add any component as

<livewire:counterfn />
<livewire:counter />
<livewire:calculator />

Happy coding.