How to Generate vCard (.vcf) Files in Laravel 11 – Complete Tutorial

What is a vCard and Why Generate vCard Files in Laravel 11?

             A vCard (also known as a .vcf file) is a standard electronic business card format used to share contact information seamlessly across devices, apps, and platforms. It stores details like name, phone number, email, company, job title, address, website, photo, and even social links in a lightweight, universally compatible text file. When someone opens or imports your vCard, their phone or email client automatically adds the contact—no manual typing required.

In today's digital-first world, generating dynamic vCards has become essential for professionals, freelancers, sales teams, and businesses. Instead of static paper cards, a Laravel-powered vCard lets you create personalized, updatable digital business cards pulled straight from your database. This is especially useful for CRM systems, employee directories, event apps, or SaaS platforms offering custom contact sharing.

With Laravel 11, you can build a robust vCard generator using modern packages like astrotomic/laravel-vcard or jeroendesloovere/vcard. These tools handle proper formatting, line endings, character encoding, and advanced fields (QR codes, logos, etc.), avoiding common pitfalls of manual string concatenation. Whether you're exporting single contacts or enabling bulk downloads, integrating vCard functionality improves user experience, boosts networking efficiency, and adds real value to your Laravel application in 2025–2026.

In this step-by-step tutorial, you'll learn exactly how to generate and download vCard (.vcf) files in Laravel 11 using best practices, a reliable package, and clean code. Let's get started!

Table Of Content

1 Prerequisites

• PHP 8.2+
• Composer
• Mysql
• Basic knowledge of Laravel, Eloquent, Blade, and routes

2 Introduction

In this comprehensive guide, you'll discover how to implement a powerful Laravel vCard generator to dynamically create and export professional vCard (.vcf) files from your Laravel 11 application. Whether you're building a CRM, employee directory, networking tool, or digital business card platform, generating vCards allows users to instantly share contact details with smartphones, email clients, and address books — no manual entry required. Follow our step-by-step tutorial to set up a complete contact management system with seamless vCard downloads using best-practice packages and clean, maintainable code. By the end, you'll have a fully functional feature ready to enhance user experience and streamline professional networking in 2025–2026.

3 Create / Install a Laravel Project

3.1 Install Laravel Project

First, ensure Composer is installed on your system. Use the following command to install a new Laravel Project:

composer create-project laravel/laravel laravel11-vcard-app

Navigate to your project directory:

cd laravel11-vcard-app

3.2 Configure Database (.env)

Open the .env file and input the necessary database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_vcard
DB_USERNAME=root
DB_PASSWORD=

4 Create Migration

Next, create a migration for the posts table using the Laravel artisan command:

    php artisan make:migration create_contacts_table

In the migration file located at database/migrations, add the following code to define the contacts table structure:

    
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('contacts', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->string('phone');
    $table->string('company')->nullable();
    $table->string('job_title')->nullable();
    $table->timestamps();
});
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('contacts');
    }
};

Run the migration:

php artisan migrate

5 Create Model

Now, create the Contact model for the posts table. Create the file at app/Models/Contact.php and add the following code:

    
<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'email', 'phone', 'company', 'job_title'];
}

6 Install vCard Package

Use astrotomic/laravel-vcard (fluent, modern, supports advanced fields):

composer require astrotomic/laravel-vcard

(Alternative: jeroendesloovere/vcard for simpler needs.)

7 Create Contact Controller

Generate a ContactController:

php artisan make:controller ContactController

Add the following methods to manage contacts and generate a Laravel vCard:

<?php
namespace App\Http\Controllers;

use App\Models\Contact;
use Astrotomic\Vcard\Vcard;
use Illuminate\Http\Request;
use Illuminate\Support\Str;

class ContactController extends Controller
{
    public function index()
    {
        $contacts = Contact::all();
        return view('contacts.index', compact('contacts'));
    }

    public function store(Request $request)
    {
        $data = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|unique:contacts',
            'phone' => 'required|string|max:20',
            'company' => 'nullable|string|max:255',
            'job_title' => 'nullable|string|max:255',
        ]);

        Contact::create($data);

        return response()->json(['success' => true, 'message' => 'Contact added successfully']);
    }

    public function export($id)
    {
        $contact = Contact::findOrFail($id);

        $vcard = Vcard::make()
            ->fullName($contact->name)
            ->email($contact->email)
            ->tel($contact->phone, ['pref', 'cell'])
            ->company($contact->company)
            ->jobtitle($contact->job_title)
            ->build();

        $filename = Str::slug($contact->name) . '.vcf';

        return response($vcard)
            ->header('Content-Type', 'text/vcard; charset=utf-8')
            ->header('Content-Disposition', 'attachment; filename="' . $filename . '"');
    }
}
?>

8 Create view (Blade)

In the resources/views/contactsdirectory, create index.blade.php for the main view:

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 vCard Generator</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <!-- SweetAlert2 CSS (for notifications) -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Contact Management with vCard Export</h1>
        
        <!-- Add Contact Button -->
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addContactModal">Add Contact</button>
        
        <!-- Contacts Table -->
        <table id="contactsTable" class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Company</th>
                    <th>Job Title</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($contacts as $contact)
                <tr>
                    <td>{{ $contact->id }}</td>
                    <td>{{ $contact->name }}</td>
                    <td>{{ $contact->email }}</td>
                    <td>{{ $contact->phone }}</td>
                    <td>{{ $contact->company ?? 'N/A' }}</td>
                    <td>{{ $contact->job_title ?? 'N/A' }}</td>
                    <td>
                        <a href="{{ route('contacts.export', $contact->id) }}" class="btn btn-sm btn-success">Download vCard</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Add Contact Modal -->
    <div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addContactModalLabel">Add New Contact</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addContactForm">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone</label>
                            <input type="text" class="form-control" id="phone" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label for="company" class="form-label">Company (Optional)</label>
                            <input type="text" class="form-control" id="company" name="company">
                        </div>
                        <div class="mb-3">
                            <label for="job_title" class="form-label">Job Title (Optional)</label>
                            <input type="text" class="form-control" id="job_title" name="job_title">
                        </div>
                        <button type="submit" class="btn btn-primary">Save Contact</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            $('#contactsTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
            });

            // Handle Form Submission with AJAX
            $('#addContactForm').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route("contacts.store") }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                        }).then(() => {
                            location.reload(); // Reload to update table
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON.message || 'An error occurred.',
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>   
    

9 Define Routes

In routes/web.php, define the necessary routes:

use App\Http\Controllers\ContactController;
use Illuminate\Support\Facades\Route;

Route::get('/contacts', [ContactController::class, 'index'])->name('contacts.index');
Route::post('/contacts', [ContactController::class, 'store'])->name('contacts.store');
Route::get('/contacts/{id}/export', [ContactController::class, 'export'])->name('contacts.export');

10 Folder Structure

11 Run & Test

Use the command below to test the Laravel vCard generator:

php artisan serve

Visit /contacts, add a contact, and download its vCard.

Common Issues & Troubleshooting

• vCard corrupted? Ensure \r\n line endings (package handles this).
• No download? Check headers and no extra output (e.g., whitespace).
• ]Add photo/QR? Extend with package methods like photo().

12 Conclusion

This improved approach uses a reliable package instead of fragile string building, making your Laravel 11 app more maintainable and feature-rich. You can expand it with bulk exports, QR codes, or digital business card pages.

For advanced features, explore jeroendesloovere/vcard or build a full SaaS vCard platform.

Frequently Asked Questions