Laravel Volt: Enables Single-Page Application (SPA) development with Livewire


With Laravel Volt, the Livewire code can be placed in the blade.php file.

Previously, the code for Livewire had to be managed in a separate file.

With Laravel Volt, Livewire code can be consolidated into a single file, just like a Vue.js single page application (SPA).

I will show you how to use Laravel Volt.

How to use Laravel Volt

Let’s start with the installation process. After installation, I will show you how to use Laravel Volt at each of the four levels.

Laravel Volt Installation

Execute the following command:

Continue to install the service provider by performing the following:

LevLevel1: Create a counter in Laravel Volt.

First, let’s create a simple counter.

Create a volt file named counter.

In resources/views/livewire, you will find a counter.blade.php file. Open the file and edit as follows


Edit the resources/views/welcome.blade.php file as follows so that the counter file you created is displayed.


If you view the welcome.blade.php file (top page), you will see the following counter. Press [クリックしてね(Click here)] and the number will increase.

The counter was easily made.

Level 2: Try to incorporate counters into other pages

With the method on level 1, you would have to put the code inside the Livewire page. In the end, two files are needed, right?

In Level 2, instead of creating a Livewire page, we will implement the counter function in a single file.

Put the following code in the resources/views/welcome.blade.php file.


<?php ~ ? > part was previously placed in app/Http/Livewire, but with Laravel Volt, it can be placed in the blade.php file as shown here.

When the top page is opened, the counter is displayed in the same way as in level 1.

 Level 3: Modal creation with Laravel Volt

Let’s implement some more advanced features. The following article shows how to create a modal using Livewire.

This will be done using Laravel Volt. Please refer to the above article for details on how it works. Laravel Breeze should also be installed beforehand.

In this article, I will rewrite the code introduced in the above article using Laravel Volt.

Open the resources/views/welcome.blade.php file again. Insert the code as follows:


Run npm run dev. When you open the top page, the modal function is implemented.

Click [モーダルを表示(Show Modal)], and the modal will appear as shown below.

Level 4: Laravel Folio and Laravel Volt together

Finally, we will use a combination of Laravel Folio and Laravel Volt. For more information, please see the following.

By using Laravel Folio, you can display files for Laravel Volt without writing route settings.

First, install Laravel Folio.

Next, create a modal.blade.php file in resources/views/pages. There, paste the code created in level 3 as it is.

When /modal is opened, the modal is displayed as follows.


You can create a modal without setting up a route or creating a file for Livewire. It is quite efficient.


I have introduced Laravel Volt. In addition to what we have introduced, you can do a lot more. For more information, please refer to the official manual below

When I actually used it, I thought it was convenient, but at the same time, I also felt that it would be difficult to manage if the amount of code was large.

Depending on the project, it may be easier to create separate codes for Livewire as in the past.

By the way, Laravel Volt, along with Laravel Folio and Laravel 11, are new features introduced in the July 2023 Laracon (Laravel’s conference) video.

If you are interested in Laravel 11 or Laravel Folio, please take a look here.