How Laravel Volt Simplifies Writing Livewire Components

Laravel Volt, introduced at Laracon US 2023, brings single-file components similar to Vue.js into the Laravel ecosystem, designed specifically for Livewire v3. This guide will walk you through getting started with Laravel Volt. Basic knowledge of class-based Livewire v3 components is recommended before following this tutorial.

What is Laravel Volt?

Laravel Volt allows developers to create single-file Livewire v3 components through a new, simplified declarative API. If you’ve used JavaScript frameworks like Vue.js, you’ll recognize the approach, but even new users can quickly grasp it after seeing it in action.

Installing Laravel Volt

To set up Laravel Volt, use the following command:

composer require livewire/volt

Remember, Volt is under the livewire namespace, not laravel.

Next, install the required boilerplate:

php artisan volt:install

This command adds VoltServiceProvider.php to app/Providers and registers it in your config/app.php file.

Creating a Basic Newsletter Component