Frontend Livewire Components

This page documents the Livewire components used on the frontend of LaraCMS, including user profiles, galleries, and user interface elements.

Profile

Namespace: App\Livewire\Frontend\Profile Location: app/Livewire/Frontend/Profile.php:9 Displays the authenticated user’s profile with tabbed navigation.

Properties

Property	Type	Default	Description
`$user`	User	null	The authenticated user model
`$activeTab`	string	`'profile'`	Currently active tab

Public Methods

mount()

Initializes the component with the authenticated user.

public function mount()

Behavior:

Loads the authenticated user
Sets the user property

setTab($tab)

Switches to a different tab.

public function setTab($tab)

Parameters:

$tab (string) - The tab identifier to activate

Example tab values: 'profile', 'settings', 'activity', etc.

Usage in Blade

<livewire:frontend.profile />

Example with Tabs:

<div>
    <div class="tabs">
        <button wire:click="setTab('profile')" 
                class="{{ $activeTab === 'profile' ? 'active' : '' }}">
            Profile
        </button>
        <button wire:click="setTab('settings')" 
                class="{{ $activeTab === 'settings' ? 'active' : '' }}">
            Settings
        </button>
    </div>
    
    <div class="tab-content">
        @if($activeTab === 'profile')
            <!-- Profile content -->
        @elseif($activeTab === 'settings')
            <!-- Settings content -->
        @endif
    </div>
</div>

UserMenu

Namespace: App\Livewire\UserMenu Location: app/Livewire/UserMenu.php:7 Displays the user dropdown menu in the navigation bar.

Usage in Blade

<livewire:user-menu />

Typical Implementation:

<nav>
    <div class="nav-left">
        <!-- Logo and main navigation -->
    </div>
    
    <div class="nav-right">
        @auth
            <livewire:user-menu />
        @else
            <a href="{{ route('login') }}">Login</a>
            <a href="{{ route('register') }}">Register</a>
        @endauth
    </div>
</nav>

Gallery Components

LaraCMS includes three gallery components for displaying photo albums and images.

Gallery Index

Namespace: App\Livewire\Gallery\Index Location: app/Livewire/Gallery/Index.php:8 Displays a paginated grid of photo albums.

Render Method

Loads and paginates albums:

public function render()
{
    $albums = Album::latest()->paginate(20); // 5x4 grid
    return view('livewire.gallery.index', compact('albums'));
}

Configuration:

Displays 20 albums per page (5x4 grid)
Ordered by most recent first

Usage in Blade

<livewire:gallery.index />

Route Example:

Route::get('/gallery', \App\Livewire\Gallery\Index::class)
    ->name('gallery.index');

Gallery Album

Namespace: App\Livewire\Gallery\Album Location: app/Livewire/Gallery/Album.php:8 Displays images within a specific album.

Properties

Property	Type	Description
`$album`	Album	The album model being displayed

Public Methods

mount(Album $album)

Initializes the component with an album.

public function mount(Album $album)

Parameters:

$album (Album) - The album to display

Render Method

Loads images from the album:

public function render()
{
    $images = $this->album->images; // Assuming hasMany relation
    return view('livewire.gallery.album', compact('images'));
}

Model Relationship Required: The Album model should have an images() relationship:

public function images()
{
    return $this->hasMany(Image::class);
}

Usage in Blade

<livewire:gallery.album :album="$album" />

Route Example:

Route::get('/gallery/{album}', \App\Livewire\Gallery\Album::class)
    ->name('gallery.album');

Gallery Image

Namespace: App\Livewire\Gallery\Image Location: app/Livewire/Gallery/Image.php:9 Displays a single image with album context.

Properties

Property	Type	Description
`$album`	Album	The parent album
`$image`	Image	The image being displayed

Public Methods

mount(Album $album, Image$ image)

Initializes the component with album and image.

public function mount(Album $album, Image $image)

Parameters:

$album (Album) - The parent album
$image (Image) - The specific image to display

Usage in Blade

<livewire:gallery.image :album="$album" :image="$image" />

Route Example:

Route::get('/gallery/{album}/{image}', \App\Livewire\Gallery\Image::class)
    ->name('gallery.image');

Example View Implementation:

<div class="image-viewer">
    <div class="breadcrumbs">
        <a href="{{ route('gallery.index') }}">Gallery</a>
        <span>/</span>
        <a href="{{ route('gallery.album', $album) }}">{{ $album->title }}</a>
        <span>/</span>
        <span>{{ $image->title }}</span>
    </div>
    
    <div class="image-container">
        <img src="{{ $image->url }}" alt="{{ $image->title }}">
    </div>
    
    <div class="image-navigation">
        @if($previousImage)
            <a href="{{ route('gallery.image', [$album, $previousImage]) }}">
                Previous
            </a>
        @endif
        
        @if($nextImage)
            <a href="{{ route('gallery.image', [$album, $nextImage]) }}">
                Next
            </a>
        @endif
    </div>
</div>

Settings Components

User settings components for managing profile and account preferences.

Settings Profile

Namespace: App\Livewire\Settings\Profile Location: app/Livewire/Settings/Profile.php:11 Manages user profile information updates.

Properties

Property	Type	Default	Description
`$name`	string	`''`	User’s name
`$email`	string	`''`	User’s email address

Public Methods

mount()

Initializes the form with current user data.

public function mount(): void

Behavior:

Loads authenticated user’s name and email

updateProfileInformation()

Updates the user’s profile information.

public function updateProfileInformation(): void

Validation Rules:

[
    'name' => ['required', 'string', 'max:255'],
    'email' => ['required', 'string', 'lowercase', 'email', 'max:255', Rule::unique(User::class)->ignore($user->id)],
]

Behavior:

Validates name and email
Updates user record
Resets email verification if email changed
Dispatches ‘profile-updated’ event

resendVerificationNotification()

Resends email verification notification.

public function resendVerificationNotification(): void

Behavior:

Checks if email is already verified
Sends verification notification
Flashes ‘verification-link-sent’ status

Usage in Blade

<livewire:settings.profile />

Settings Password

Namespace: App\Livewire\Settings\Password Location: app/Livewire/Settings/Password.php:11 Allows users to update their password.

Properties

Property	Type	Default	Description
`$current_password`	string	`''`	Current password
`$password`	string	`''`	New password
`$password_confirmation`	string	`''`	Password confirmation

Public Methods

updatePassword()

Updates the user’s password.

public function updatePassword(): void

Validation Rules:

[
    'current_password' => ['required', 'string', 'current_password'],
    'password' => ['required', 'string', Password::defaults(), 'confirmed'],
]

Behavior:

Validates current password
Validates new password meets requirements
Updates password with hash
Logs out other devices
Resets form fields
Dispatches ‘password-updated’ event

Security:

Clears form fields on validation error
Invalidates sessions on other devices

Usage in Blade

<livewire:settings.password />

Delete User Form

Namespace: App\Livewire\Settings\DeleteUserForm Location: app/Livewire/Settings/DeleteUserForm.php:9 Allows users to permanently delete their account.

Properties

Property	Type	Default	Description
`$password`	string	`''`	Password confirmation

Public Methods

deleteUser(Logout $logout)

Deletes the authenticated user’s account.

public function deleteUser(Logout $logout): void

Parameters:

$logout (Logout) - Logout action dependency injection

Validation:

Password must be required, string, and match current password

Behavior:

Validates password
Logs out the user
Deletes user account
Redirects to home page

Security:

Requires password confirmation
Cannot be undone

Usage in Blade

<livewire:settings.delete-user-form />

Example Implementation:

<div class="delete-account-section">
    <h3>Delete Account</h3>
    <p class="warning">Once your account is deleted, all of its resources and data will be permanently deleted.</p>
    
    <form wire:submit="deleteUser">
        <input type="password" wire:model="password" placeholder="Confirm your password">
        @error('password') <span>{{ $message }}</span> @enderror
        
        <button type="submit" class="danger">Permanently Delete Account</button>
    </form>
</div>

Models

Controllers

Livewire Components

​Frontend Livewire Components

​Profile

​Properties

​Public Methods

​mount()

​setTab($tab)

​Usage in Blade

​UserMenu

​Usage in Blade

​Gallery Components

​Gallery Index

​Render Method

​Usage in Blade

​Gallery Album

​Properties

​Public Methods

mount(Album $album)

​Render Method

​Usage in Blade

​Gallery Image

​Properties

​Public Methods

mount(Album album,Imagealbum, Image album,Imageimage)

​Usage in Blade

​Settings Components

​Settings Profile

​Properties

​Public Methods

mount()

updateProfileInformation()

resendVerificationNotification()

​Usage in Blade

​Settings Password

​Properties

​Public Methods

updatePassword()

​Usage in Blade

​Delete User Form

​Properties

​Public Methods

deleteUser(Logout $logout)

​Usage in Blade

Build docs developers (and LLMs) love

Frontend Livewire Components

Profile

Properties

Public Methods

mount()

setTab($tab)

Usage in Blade

UserMenu

Usage in Blade

Gallery Components

Gallery Index

Render Method

Usage in Blade

Gallery Album

Properties

Public Methods

Render Method

Usage in Blade

Gallery Image

Properties

Public Methods

mount(Album $album, Image$ image)

Usage in Blade

Settings Components

Settings Profile

Properties

Public Methods

Usage in Blade

Settings Password

Properties

Public Methods

Usage in Blade

Delete User Form

Properties

Public Methods

Usage in Blade