Get your next remote job on LaraJobs.

Laravel Volt: simplify how you write Livewire components

Table of contents:

Laravel Volt: simplify how you write Livewire components

Introduction

Laravel Volt was introduced in Laracon US 2023. The package brings single-file components à la Vue.js to Livewire v3.

This is a step-by-step tutorial to help you quickly get started with this elegant addition to the Laravel ecosystem.

Please understand that to be able to follow this tutorial, being familiar with class-based Livewire v3 components is necessary.

What is Laravel Volt?

Laravel Volt is a way to write single-file Livewire v3 components by leveraging a new declarative API.

If you are familiar with JavaScript frameworks like Vue.js, you know what I’m talking about.

For the others, don’t worry, you’ll get it once you see it!

How to install Laravel Volt

First, install Laravel Volt using the following command:

composer require livewire/volt:^1.0@beta

Note that Volt is under the livewire namespace, not laravel.

Then, install the necessary boilerplate to make Laravel Volt work:

php artisan volt:install

This will create VoltServiceProvider.php in app/Providers and register it in your config/app.php file.

How to create a basic newsletter component

To create a component, use the volt:make command:

php artisan volt:make Newsletter

This will spawn a new file in ./resources/views/livewire/newsletter.blade.php.

Before we continue, did you know that you can also create tests simultaneously? Just pass the --test option. You can even ensure it’s a Pest test with the additional --pest option.

php artisan volt:make Newsletter --test --pest

A test will be created in tests/Feature/Livewire/NewsletterTest.php. But we’ll get back to it shortly!

Now, let’s take a look at our Volt component. Don’t worry; I will detail every line of code.

<?php
 
use function Livewire\Volt\{rules,state};
 
state([
'email' => '',
'done' => false,
]);
 
rules([
'email' => 'required|email',
]);
 
$submit = function () {
$this->validate();
 
// Subscribe the user.
 
$this->done = true;
};
 
?>
 
<div>
@if ($done)
<p>Thank you for subscribing!</p>
@else
<form wire:submit="submit">
<input type="email" wire:model="email" required />
 
<button>
Subscribe
</button>
</form>
 
@error('email')
<p>{{ $message }}</p>
@enderror
@endif
</div>

This Volt component aims to subscribe people to our newsletter without sending them to another page. We want the process to feel fast and modern.

  1. We create the form in a classic Laravel-fashion.
  2. We display validation errors.
  3. We intercept the submit action: Instead of using method="POST" action="/some-uri", we bind the submit action to a Livewire function we will define.
  4. We bind the value of our input field to an email state property we will define.
  5. We conditionally display a confirmation message thanks to another state property we will define.
  6. We define our state properties: this is done in a PHP code block at the top of the file. The state properties are email and done.
  7. We validate the email property. Our component must be secure and not store junk data in the database.
  8. We define a submit function that will be called when the form is submitted. Inside, we validate the user’s input based on the previously defined rules, subscribe the user, and set the done state property to true, which will trigger the confirmation message.

Make sure everything works in your browser, and let’s see in the next section how to test that this Volt component behaves as expected.

Keep using class-based components in a single file

If you have a big Laravel project that you want to slowly transition to Volt, you have the possibility of using your existing class-based Livewire v3 components inside your single-file component.

Here’s the newsletter that we created in the previous section, but class-based:

<?php
 
use Livewire\Volt\Component;
 
new class extends Component {
public $email = '';
 
public $done = false;
 
$rules = ['email' => 'required|email'];
 
public function submit() {
$this->validate();
 
// Subscribe the user.
 
$this->done = true;
};
};
 
?>
 
<div>
@if ($done)
<p>Thank you for subscribing!</p>
@else
<form wire:submit="submit">
<input type="email" wire:model="email" required />
 
<button>
Subscribe
</button>
</form>
 
@error('email')
<p>{{ $message }}</p>
@enderror
@endif
</div>

How cool is that? And people not happy with the new declarative API will certainly be happy about class-based single file Volt components.

How to test our basic newsletter component

This hasn’t changed much if you are already familiar with writing Livewire tests. Let’s review how I wrote this test:

use Livewire\Volt\Volt;
 
it('can render', function () {
$component = Volt::test('newsletter');
 
$component
// Test the initial state of the component.
->assertSet('email', '')
->assertSet('done', false)
// Simulate the user entering an email address.
->set('email', 'homer@simpson.com')
// Simulate the user submitting the form.
->call('submit')
// Test the state properties have changed.
->assertSet('email', 'homer@simpson.com')
->assertSet('done', true)
// Test the confirmation message is displayed.
->assertSee('Thank you for subscribing!');
 
// There, you can also test that the user has been subscribed successfully.
});
  1. We render the component using Volt::test('newsletter').
  2. We test the initial state for the expected values.
  3. We simulate the user’s input and action.
  4. We test for the expected state.
  5. We test for the expected confirmation message to be displayed.
  6. We test that the user has been successfully subscribed.

All good? Now run php artisan test and enjoy the greenery and confidence tests give you!

Learn more about how to test Volt components on the official documentation.

Laravel Volt presented by Taylor Otwell

Oh, before I leave, I wanted to share with you the video from Laracon US where Taylor Otwell himself unveils and demos Laravel Volt (skip to 40:32). Enjoy!

Benjamin Crozat

Written by Benjamin Crozat

Indie hacker, blogger, and AI enthusiast building things with the TALL stack. 🔥

Follow me on:

Recommended articles

9 testing best practices for Laravel in 2023 9 testing best practices for Laravel in 2023

Are you familiar with testing? Good. Here are a bunch of best practices to help you level up even more!

Modified on Oct 27, 2023

20+ Laravel best practices, tips and tricks to use in 2023 20+ Laravel best practices, tips and tricks to use in 2023

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Modified on Oct 17, 2023

Fix the /livewire/livewire.js 404 not found error Fix the /livewire/livewire.js 404 not found error

Learn how to fix the 404 error occurring for /livewire/livewire.js.

Modified on Oct 17, 2023

7 Laravel RESTful APIs best practices for 2023 7 Laravel RESTful APIs best practices for 2023

Master the art of crafting RESTful APIs with Laravel thanks to these best practices.

Modified on Oct 10, 2023

How does Laravel work? A crystal clear explanation. How does Laravel work? A crystal clear explanation.

Discover my step by step and simple explanation of how Laravel makes your life easier.

Published on Oct 31, 2023

Gold sponsors New

  • Wire Elements
    Beautiful handcrafted Livewire components.
    Check site
Your business here

Partners

If you buy from one of my partners below, I will be compensated at no cost to you. These are services I use or used, and 100% stand behind.

  • Scalable and reliable VPS hosting.
    Bonus: $200 of free credits
    Check site
  • The Google Analytics alternative without compromise.
    Free trial: 30 days
    Bonus: $10 off your first invoice
    Check site
  • Flare
    Track PHP and JavaScript errors in one place.
    Free trial: 10 days
    Check site
  • Keep track of your Google rankings.
    Free trial: 7 days
    Promo code: WELCOME30
    Check site
- / -