Getting Started

Minimal Setup

Installation:

composer require livewire/flux

For Pro features:

php artisan flux:activate

Include Assets: Add these directives to your layout file (e.g., resources/views/layouts/app.blade.php):

<head>
    @fluxAppearance
    <!-- Optional: Inter font -->
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
</head>
<body>
    @fluxScripts
</body>

Tailwind Configuration: Update resources/css/app.css:

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@theme {
    --font-sans: Inter, sans-serif;
}

First Use Case: Button Component

Replace a basic <button> with Flux’s <flux:button>:

<flux:button wire:click="submitForm">
    Submit
</flux:button>

Pro Tip: Use variant="primary" or color="red" for styling:

<flux:button variant="primary" color="red">
    Delete
</flux:button>

Implementation Patterns

1. Component Integration Workflow

Basic Usage

Replace native HTML: Swap <button>, <select>, etc., with Flux components (e.g., <flux:button>, <flux:dropdown>).
Wire Integration: Leverage Livewire’s wire:model, wire:click, and wire:change directly:
```
<flux:input wire:model="name" placeholder="Type here..." />
```

Dynamic Styling

Use props for real-time updates:

<flux:button
    wire:click="toggle"
    :variant="isActive ? 'primary' : 'outline'"
    :disabled="loading"
>
    {{ isActive ? 'Active' : 'Inactive' }}
</flux:button>

Slots and Children

Customize content via slots:

<flux:dropdown>
    <x-slot name="trigger">
        <flux:button>Options</flux:button>
    </x-slot>
    <flux:dropdown.item wire:click="action1">Action 1</flux:dropdown.item>
    <flux:dropdown.item wire:click="action2">Action 2</flux:dropdown.item>
</flux:dropdown>

2. Form Handling

Validation Feedback

Use invalid prop for error states:

<flux:input
    wire:model="email"
    invalid="{{ $errors->has('email') }}"
    error-message="{{ $errors->first('email') }}"
/>

Form Submission

Wrap forms in <flux:form> for built-in handling:

<flux:form wire:submit="save">
    <flux:input wire:model="title" name="title" />
    <flux:button type="submit">Save</flux:button>
</flux:form>

3. Pro Component Workflow

Activation

Run:

php artisan flux:activate

Then use Pro-only components (e.g., <flux:table>, <flux:modal>).

Customization

Publish component templates:

php artisan flux:publish --all

Edit published files in resources/views/vendor/flux/.

4. Common Patterns

Use Case	Flux Solution	Example
Tooltips	`<flux:tooltip>`	`<flux:button><flux:tooltip>Help</flux:tooltip></flux:button>`
Icons	`<flux:icon name="bell" />`	Uses Lucide icons.
Separators	`<flux:separator />`	Horizontal dividers.
Dropdowns	`<flux:dropdown>`	Multi-level menus.
Modals (Pro)	`<flux:modal>`	Full-screen or inline modals.
Tables (Pro)	`<flux:table>`	Sortable, paginated tables.

Gotchas and Tips

1. Common Pitfalls

CSP Violations

Issue: Flux uses inline scripts by default, which may trigger CSP errors.
Fix: Ensure your CSP allows inline scripts or use flux:scripts with nonce:
```
@fluxScripts nonce="{{ csp_nonce() }}"
```

Tailwind Conflicts

Issue: Custom Tailwind classes may override Flux styles.
Fix: Use Flux’s utility classes (e.g., flux-button) or scope your custom styles:
```
.my-custom-button {
    @apply flux-button flux-button-primary;
}
```

Pro Component Access

Issue: Using Pro components without activation throws errors.
Fix: Run php artisan flux:activate and ensure your license is valid.

Blaze Compatibility

Issue: Some components (e.g., <flux:modal>) may not work with Blaze.

Fix: Use scroll="body" prop for modals:

<flux:modal scroll="body">
    <!-- Content -->
</flux:modal>

2. Debugging Tips

Console Errors

Common Causes:
- Missing @fluxScripts or @fluxAppearance.
- Incorrect Tailwind configuration (e.g., missing @import).
- Pro components used without activation.
Debug Steps:
1. Check browser console for flux.js errors.
2. Verify resources/css/app.css includes Flux imports.
3. Run php artisan flux:activate if using Pro.

Styling Issues

Reset Defaults: Override Flux classes with !important sparingly. Instead, use Tailwind’s group-* utilities:

<div class="group">
    <flux:button class="group-hover:bg-red-500">
        Hover Me
    </flux:button>
</div>

Performance

Lazy-Load Components: Use x-data or Alpine.js to lazy-load heavy components (e.g., <flux:chart>).

Memoize Data: Cache expensive computations in Livewire properties:

public function getChartData()
{
    return $this->cacheData('chart_data', function () {
        return ExpensiveCalculation::run();
    });
}

3. Advanced Customization

Extending Components

Publish and Modify: Use php artisan flux:publish to override Blade templates.
Example: Customize <flux:button>:
```
php artisan flux:publish --component=button
```
Edit resources/views/vendor/flux/button.blade.php.

Dynamic Props

Bind to Livewire Properties:

<flux:button :variant="getButtonVariant()" />

public function getButtonVariant()
{
    return $this->isAdmin ? 'primary' : 'outline';
}

Accessibility

ARIA Attributes: Flux components include ARIA by default. Extend with custom attributes:
```
<flux:dropdown aria-label="User actions">
    
</flux:dropdown>
```

Dark Mode

Automatic Support: Flux respects Tailwind’s dark: variants. Ensure your layout includes:
```
<html class="dark">
    
</html>
```

4. Pro-Specific Tips

Table Customization

Columns: Define columns dynamically:

<flux:table>
    @foreach($columns as $column)
        <flux:table.column wire:key="col-{{ $column }}">
            {{ $column }}
        </flux:table.column>
    @endforeach
</flux:table>

Modal Management

Stacking: Use stack prop to manage multiple modals:

<flux:modal stack="user-actions">
    <!-- Content -->
</flux:modal>

Chart Interactivity

Tooltips: Enable with tooltip prop:

<flux:chart type="line" tooltip>
    <!-- Data -->
</flux:chart>

5. Community and Updates

Stay Updated: Regularly run:

composer update livewire/flux livewire/flux-pro

Changelog: Review [Fl

Flux Laravel Package