Installation Guide

Prerequisites

• PHP ^8.2
• Laravel ^11.0
• Livewire ^4.0
• A Flux UI Livewire starter kit application

Step 1: Install the Package

composer require agenticmorf/fluxui-avatar

Step 2: Publish the Config

php artisan vendor:publish --tag=fluxui-avatar-config

Step 3: Choose a Storage Driver

Option A: Disk Driver (Default)

Add the avatar_path column to your users table:

php artisan make:migration add_avatar_path_to_users_table --table=users

// database/migrations/xxxx_add_avatar_path_to_users_table.php
public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('avatar_path')->nullable()->after('email');
    });
}

php artisan migrate

Add avatar_path to your User model's $fillable array:

protected $fillable = [
    'name',
    'email',
    'password',
    'avatar_path',
];

Option B: Spatie Media Library Driver

Install Spatie Media Library:

composer require spatie/laravel-medialibrary
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"
php artisan migrate

Update your User model:

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class User extends Authenticatable implements HasMedia
{
    use InteractsWithMedia;

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('avatars')->singleFile();
    }
}

Set the driver in your .env:

FLUXUI_AVATAR_DRIVER=spatie

Step 4: Add the Component to Your Profile Page

{{-- resources/views/livewire/settings/profile.blade.php or similar --}}
<livewire:avatar-manager />

Step 5: Verify

Run your application and navigate to your profile page. You should see the avatar upload component. Upload an image and verify it appears in the navigation header automatically.

Optional: Publish Views

If you need to customise the views:

php artisan vendor:publish --tag=fluxui-avatar-views

This copies the views to resources/views/vendor/fluxui-avatar/.