Livewire Starter Kit

With a foundational understanding of routing and Blade views established, we can now delve into the Livewire starter kit. Initially, we'll examine the full registration and login process, followed by an exploration of the layout structure and its constituent components. Acquiring a thorough grasp of the starter kit's layout and components will empower us to construct our own tailored layout page and elements in the next chapters.

Registration and Login Routes

Upon executing the php artisan route:list --except-vendor command, a multitude of routes associated with the registration and login functionalities become apparent. These routes collectively orchestrate the user authentication flow.

Register

To initiate the process, navigate to https://vinyl_shop.test/register and complete the registration form to create a new user account.

Following successful registration, you will be redirected to a rudimentary dashboard interface, featuring a prominent link to the home page, accessible via the Laravel Starter Kit link positioned at the top of the page.

Update Profile

Within the popup menu located at the bottom of the dashboard, a link to the settings page is provided. Clicking this link will lead you to a page where you can modify your profile settings, including your name, email address, password and switch between light and dark modes.

Forgot Password

To simulate a forgotten password scenario, log out of your account and access the login page. Just above the password field, you'll find a Forgot your password? link. Clicking this link will redirect you to a password reset request form.

Enter the email address associated with your account and click the Send password reset link button. Subsequently, check your email inbox at https://localhost:8025 for a password reset link.

Click the link provided in the email to access the password reset form.

The reset password link brings you to this page:

Enter your new password, confirm it, and submit the form. Upon successful password reset, you can log in using your newly established credentials.

With the registration and login functionality in place, the next step is to understand the layout components that structure the application's user interface.

Layout Components

The starter kit incorporates two primary layout components, each serving a distinct purpose:

• The auth layout is employed for authentication-related pages such as login, registration, and password reset.
• The app layout is used for pages accessible to authenticated users, including the dashboard and settings pages.

Both of these components are implemented as Blade components. All Blade components reside within the resources/views/components directory and are invoked using the x- prefix, followed by the component's path and filename, separated by dots. When a component directory includes an index.blade.php file, that file acts as the root view for the component. This structure allows for organized and reusable view components.

Some examples of Blade components and their corresponding render directives are as follows:

Component	Render
resources/views/components/layouts/auth.blade.php	<x-layouts.auth>
resources/views/components/layouts/auth/simple.blade.php	<x-layouts.auth.simple>
resources/views/components/app-logo.blade.php	<x-app-logo>
resources/views/components/component-x.blade.php	<x-component-x>
resources/views/components/component-x/index.blade.php	<x-component-x>

In the subsequent section, we'll focus on creating our custom layout components, and after that, we'll explore reusable components. For this section, the focus is understanding the starter kit's components to effectively build our own.

Auth Layout

The fundamental layout for the starter kit is located in the resources/views/components/layouts/auth.blade.php file. This component essentially nests another component, resources/views/components/layouts/auth/simple.blade.php, and injects content into it via the $slot variable.
The {{ $slot }} directive serves as a placeholder where the content passed to the layout is rendered. Slots will be further elaborated in the next chapter.

<x-layouts.auth.simple>
    {{ $slot }}
</x-layouts.auth.simple>

Examining the resources/views/components/layouts/auth/ directory reveals three distinct layout variations, offering different visual styles for authentication pages. To switch between these layouts, simply modify the opening and closing tags within the resources/views/components/layouts/auth.blade.php file to reference the desired layout.

<x-layouts.auth.simple>
    {{ $slot }}
</x-layouts.auth.simple>

App Layout

The primary layout for the application's authenticated sections is defined in the resources/views/components/layouts/app.blade.php file. Two layout variants are available: a sidebar layout and a header layout. The title attribute can be passed to the layout component to dynamically set the page title. (Attributes will be explained in detail in the next chapter).

The sidebar layout incorporates a collapsible sidebar, positioned on the left side of the page, which adapts its visibility based on screen size, remaining closed on smaller screens and expanded on larger screens.

<x-layouts.app.sidebar :title="$title ?? null">
    <flux:main>
        {{ $slot }}
    </flux:main>
</x-layouts.app.sidebar>

Flux UI Components

Now equipped with a fundamental knowledge of Blade layout components, we can proceed to explore the Flux UI components. In the next section, we'll base our custom layout component on the sidebar layout; thus, we'll focus on the Flux UI components employed within the sidebar layout.

Flux UI components are a key part of the Livewire starter kit, providing pre-designed, reusable elements that simplify the creation of interactive and responsive user interfaces.

Open the resources/views/components/layouts/app/sidebar.blade.php file and identify the Flux UI components used in the sidebar layout. This component features a sidebar equipped with a toggle button, a dropdown menu, and a menu containing various items.

For our current focus, we'll primarily examine the Flux components within the body tag. The @include() and @fluxScripts directives are not pertinent to our immediate objective.

Flux UI components are specified using the <flux:component> tag, which represents a custom HTML tag used to render a Flux UI component. Each Flux component possesses its own set of attributes that can be passed to it. The <flux:component> tag can also contain child tags, such as flux:button, flux:menu, flux:menu.item, flux:icon, etc.

Flux UI Components provide a collection of reusable components tailored for Livewire applications. The library facilitates the rapid development of modern, interactive, and responsive interfaces by offering pre-styled elements that maintain consistency across the application. The library includes components for sidebars, navigation lists, dropdown menus, and headers. For more comprehensive information, refer to the official Flux UI website.

Let's examine the Flux components utilized within the sidebar layout.

Flux:sidebar

The flux:sidebar component renders a vertical navigation container, typically positioned on the side of the application. It integrates various child components—such as toggles, navlists, and menus—into a cohesive structure. Key attributes include:

• sticky: Keeps the sidebar in view as the page scrolls.
• stashable: Manages the open/collapsed state of the sidebar seamlessly.
• Class attributes: Allow customization of borders, backgrounds, and themes suitable for both light and dark modes.

Flux:sidebar.toggle

The flux:sidebar.toggle component provides an interactive mechanism to show or hide the sidebar. It typically appears as a button equipped with an icon and is essential for responsive designs. The component accepts properties such as:

• icon: To specify the toggle icon (e.g., "x-mark" or "bars-2").
• Responsive classes: Such as lg:hidden to control visibility on different screen sizes.
• Optional inset attributes: For positioning adjustments (common in mobile headers).

Flux:navlist

The flux:navlist component organizes navigation items into a structured list. It is used to group multiple links together and can be styled in variants like "outline" for a distinct look. This component serves as a container for both grouped items and individual navigation links.

Flux:navlist.group

Within a navlist, the flux:navlist.group component helps to bundle related navigation items under a common heading. It accepts attributes such as:

• heading: A bound property for setting the group's title.
• Class attributes: For grid or layout customizations.

This grouping enhances usability by logically categorizing navigation options.

Flux:navlist.item

The flux:navlist.item represents an individual navigation link within a navlist group. Its key properties include:

• icon: Displays an icon next to the navigation text.
• href: Specifies the destination URL.
• current: A boolean value to indicate if the item is active, often used for highlighting the current page.
• Livewire integration: Via directives like wire:navigate to enable smooth, reactive transitions.

Flux:spacer

The flux:spacer component is a simple utility used to insert vertical spacing between groups of elements. This separation enhances visual clarity and organization without introducing complex layout code. It can be easily customized with additional styling classes as needed.

Flux:dropdown

The flux:dropdown component creates a dropdown container that encapsulates interactive menu elements. It supports properties such as:

• position: Determines vertical alignment relative to the trigger (e.g., "bottom", "top", "left", or "right").
• align: Controls horizontal placement (e.g., "start", "center" or "end").

Flux:profile

Designed to display a concise user profile summary, the flux:profile component is often used within dropdown menus or headers. It renders details like:

• name: The user's full name.
• initials: A shorthand representation, frequently used as an avatar substitute.
• icon-trailing: An optional trailing icon (such as "chevrons-up-down" or "chevron-down") that indicates additional interactive options.

Flux:menu

The flux:menu component defines the overall container for dropdown menu items. It provides structure to the content within a dropdown and works seamlessly with nested components. Custom classes and styling options allow it to integrate with the overall design aesthetic of your application.

Flux:menu.radio.group

Within a menu, the flux:menu.radio.group component is used to logically group related menu items that behave like radio buttons allowing users to select only one option within the group. This grouping simplifies interaction management and enhances visual consistency.

Flux:menu.item

The flux:menu.item component defines an individual actionable entry within a dropdown menu. It offers flexible configuration through properties such as:

• href: To navigate to a specified URL.
• icon: For displaying an associated icon to visually represent the action.
• as: To conditionally render the element as a different HTML tag (e.g., a button).
• type: Which is particularly useful when the item functions within a form context.

It also supports Livewire directives like wire:navigate to handle dynamic transitions.

Flux:menu.separator

The flux:menu.separator component is used to insert a visual divider between groups of menu items. Typically rendered as a horizontal line, it helps to clarify sections within the menu and contributes to a neater, more organized layout.

Flux:header

The flux:header component is tailored for responsive designs, particularly for mobile views. It serves as a fixed top navigation area that can include elements like toggles and profile dropdowns. This component ensures that critical navigation controls remain visible and accessible on smaller screens while maintaining a clean layout.