How to Export CSV File in Laravel 11 with Livewire 3
Websolutionstuff | Mar-28-2025 | Categories : Laravel
Hey there! If you’re like me, you might have wondered how to export data into a CSV file in Laravel 11 using Livewire 3. I recently figured this out, and I’m excited to share it with you in a simple way.
Laravel is awesome for building web apps, and Livewire makes it even easier by letting us create dynamic features without tons of JavaScript.
In this article, I’ll walk you through how I set up a CSV export feature step-by-step.
Step-by-Step Guide to Export CSV in Laravel 11 with Livewire 3
First, I needed a fresh Laravel 11 project. If you haven’t set one up yet, you can do it with this command in your terminal:
composer create-project --prefer-dist laravel/laravel csv-export-app
cd csv-export-app
Since I wanted to use Livewire 3, I installed it next. It’s super easy—just run this command.
composer require livewire/livewire
After that, I added Livewire’s scripts to my resources/views/layouts/app.blade.php file like this:
<!DOCTYPE html>
<html>
<head>
<title>CSV Export App</title>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>
For this example, I decided to export a list of users. So, I created a User model with a migration using this command.
php artisan make:model User -m
Then, I opened the migration file in database/migrations/ and added some fields to the users table.
// database/migrations/xxxx_xx_xx_create_users_table.php
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->timestamps();
});
}
I ran the migration to create the table:
php artisan migrate
To test it, I added some dummy data to the User model using a seeder. Here’s how I did it:
php artisan make:seeder UserSeeder
In database/seeders/UserSeeder.php, I added:
namespace Database\Seeders;
use App\Models\User;
use Illuminate\Database\Seeder;
class UserSeeder extends Seeder
{
public function run()
{
User::create(['name' => 'John Doe', 'email' => '[email protected]']);
User::create(['name' => 'Jane Smith', 'email' => '[email protected]']);
}
}
Then, I ran the seeder:
php artisan db:seed --class=UserSeeder
Now, I created a Livewire component to handle the CSV export. I ran this command:
php artisan make:livewire ExportUsers
This created two files:
- app/Livewire/ExportUsers.php (the component class)
- resources/views/livewire/export-users.blade.php (the view)
In app/Livewire/ExportUsers.php, I added the logic to export users to a CSV file:
namespace App\Livewire;
use App\Models\User;
use Livewire\Component;
use Illuminate\Http\Response;
class ExportUsers extends Component
{
public function export()
{
$users = User::all();
$filename = 'users.csv';
$headers = [
'Content-Type' => 'text/csv',
'Content-Disposition' => "attachment; filename=\"$filename\"",
];
$columns = ['ID', 'Name', 'Email'];
$callback = function () use ($users, $columns) {
$file = fopen('php://output', 'w');
fputcsv($file, $columns);
foreach ($users as $user) {
fputcsv($file, [$user->id, $user->name, $user->email]);
}
fclose($file);
};
return response()->stream($callback, 200, $headers);
}
public function render()
{
return view('livewire.export-users');
}
}
In resources/views/livewire/export-users.blade.php, I added a simple button to trigger the export.
<div>
<h1>Export Users to CSV</h1>
<button wire:click="export" class="btn btn-primary">Download CSV</button>
</div>
I also added some basic CSS in resources/css/app.css to make the button look nice:
.btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
Then, I compiled the CSS with:
npm install && npm run dev
I added a route in routes/web.php to display the component:
use App\Livewire\ExportUsers;
Route::get('/export-users', ExportUsers::class);
Finally, run laravel application using the following command:
php artisan serve
You might also like:
- Read Also: How to Import CSV File in Laravel 11 with Livewire 3
- Read Also: Laravel 11 Livewire 3 Pagination Example
- Read Also: Datatable Custom Export Button Example
- Read Also: How to Export CSV File in Laravel
Recommended Post
Featured Post
How to Convert UTC Time to Loc...
As a Laravel developer, working with time zones is a common requirement, especially when dealing with global application...
Mar-11-2024
Laravel 11 Image Intervention...
In this article, we'll see how to use intervention images in laravel 11. Here, we'll use the intervention/i...
May-15-2024
How To Install Bootstrap In Re...
In this article, we will see how to install bootstrap in react js. Also, we will see how to use bootstrap in react...
Sep-08-2022
Laravel 11 Move Data from One...
Moving data from one table to another is a common task when managing databases in Laravel applications. Laravel provides...
Dec-26-2024