⌘K

Start Here

Getting Started

This guide covers the production setup for Wire in a Laravel application.

This guide covers the production setup for Wire in a Laravel application.

Requirements

Dependency Version
PHP ^8.2
Laravel 10, 11, or 12
Livewire 3.x
Tailwind CSS 3.x+
Alpine.js 3.x+ (included with Livewire)

Installation

Full ecosystem (table + forms + core)

composer require nyoncode/wire-table

Only forms (forms + core)

composer require nyoncode/wire-forms

Only core

composer require nyoncode/wire-core

Sortable package (drag and drop row reordering)

composer require nyoncode/wire-sortable

Service providers register automatically via Laravel auto-discovery.

Production Checklist

Before you render the first component, make sure all of these are true:

  • Livewire 3 is installed
  • Tailwind scans the Wire vendor views
  • your app defines a primary color
  • the main layout includes @vite, @livewireStyles, and @livewireScripts
  • the layout renders <x-wire-notifications::toast-container /> if you want built-in toasts

Tailwind CSS Configuration

Add Wire view paths to your tailwind.config.js:

module.exports = {
    content: [
        // ...your paths
        './vendor/nyoncode/wire-core/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-forms/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-table/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-sortable/resources/views/**/*.blade.php',
    ],
}

Primary Color

Wire components use primary as the default accent color (buttons, badges, focus rings, etc.). You must define it in your Tailwind config:

Tailwind 3 (tailwind.config.js):

const colors = require('tailwindcss/colors')
 
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: colors.blue, // or any color palette
            },
        },
    },
}

Tailwind 4 (app.css):

@theme {
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);
}

Without a primary color defined, buttons and other interactive elements will be invisible (white text on a transparent background).

Layout Template

Your main layout must include Vite assets and Livewire. Add the notifications container if you use action feedback or toasts.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body>
    {{ $slot }}
 
    <x-wire-notifications::toast-container />
 
    @livewireScripts
</body>
</html>

Do not install Alpine separately. Livewire 3 already ships it.

Config Publishing (optional)

php artisan vendor:publish --tag=wire-core-config
php artisan vendor:publish --tag=wire-forms-config
php artisan vendor:publish --tag=wire-table-config
php artisan vendor:publish --tag=wire-sortable-config

View Publishing (optional)

php artisan vendor:publish --tag=wire-core-views
php artisan vendor:publish --tag=wire-forms-views
php artisan vendor:publish --tag=wire-table-views
php artisan vendor:publish --tag=wire-sortable-views

Quick Start: Table

use Livewire\Component;
use NyonCode\WireTable\Concerns\WithTable;
use NyonCode\WireTable\Table;
use NyonCode\WireTable\Columns\TextColumn;
use NyonCode\WireTable\Columns\BadgeColumn;
use NyonCode\WireTable\Filters\SelectFilter;
use NyonCode\WireCore\Actions\Action;
use NyonCode\WireCore\Actions\DeleteAction;
use NyonCode\WireCore\Actions\DeleteBulkAction;
 
class UserTable extends Component
{
    use WithTable;
 
    public function table(Table $table): Table
    {
        return $table
            ->model(User::class)
            ->columns([
                TextColumn::make('name')
                    ->sortable()
                    ->searchable(),
 
                TextColumn::make('email')
                    ->searchable(),
 
                BadgeColumn::make('role')
                    ->colors([
                        'primary' => 'admin',
                        'success' => 'editor',
                        'gray' => 'viewer',
                    ]),
 
                TextColumn::make('created_at')
                    ->dateTime('d.m.Y')
                    ->sortable(),
            ])
            ->filters([
                SelectFilter::make('role')
                    ->options([
                        'admin' => 'Admin',
                        'editor' => 'Editor',
                        'viewer' => 'Viewer',
                    ]),
            ])
            ->actions([
                Action::make('edit')
                    ->icon('pencil')
                    ->url(fn (User $r) => route('users.edit', $r)),
                DeleteAction::make(),
            ])
            ->bulkActions([
                DeleteBulkAction::make(),
            ])
            ->defaultSort('name')
            ->searchable()
            ->paginated();
    }
}
<div>
    {{ $this->table }}
</div>

Next: Columns, Filters, Actions

Quick Start: Form

use Livewire\Component;
use NyonCode\WireForms\Forms\Form;
use NyonCode\WireForms\Forms\WithForms;
use NyonCode\WireForms\Components\TextInput;
use NyonCode\WireForms\Components\Select;
use NyonCode\WireForms\Components\Toggle;
 
class EditUser extends Component
{
    use WithForms;
 
    public array $data = [];
 
    public function mount(User $user): void
    {
        $this->form()->model($user)->fill($user->toArray());
    }
 
    public function form(Form $form): Form
    {
        return $form
            ->statePath('data')
            ->model(User::class)
            ->schema([
                TextInput::make('name')->required()->maxLength(255),
                TextInput::make('email')->email()->required(),
                Select::make('role')
                    ->options(['admin' => 'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer'])
                    ->required(),
                Toggle::make('active'),
            ])
            ->successMessage('User saved.');
    }
 
    public function save(): void
    {
        $this->form()->save();
    }
}
<form wire:submit="save">
    {{ $this->form }}
    <button type="submit">Save</button>
</form>

Next: Field Reference, Validation, Save Lifecycle

Troubleshooting

Styles are missing

  • verify the Wire vendor paths are present in Tailwind content or @source
  • rebuild assets with npm run build
  • clear compiled views with php artisan view:clear

Components render without JavaScript behavior

  • confirm the layout includes @livewireScripts
  • remove any standalone Alpine bootstrap from resources/js/app.js

Notifications do not appear

  • confirm the layout renders <x-wire-notifications::toast-container />
  • verify your configured notification driver is valid
  • check whether the action actually sends a success or failure notification

Development (monorepo)

git clone ...
composer install
 
# Run all tests
composer test
 
# Per-package
composer test:core    # 793 tests
composer test:forms   # 212 tests
composer test:table    # 369 tests
composer test:sortable # 10 tests
 
# Code style
composer lint          # Pint (Laravel preset)
 
# Static analysis
composer analyse       # PHPStan level 6

Next Steps