Livewire 4 er her – og det er mer hype enn et lynedslag! ⚡

Caleb Porzio droppet bomben på Laracon US 2025, og folkens, Livewire 4 er akkurat så bra som vi håpet på. Kanskje bedre. Kanskje MYE bedre.

Den store elefanten i rommet

La oss være ærlige: Livewire hadde blitt litt... rotete. Tre forskjellige måter å lage komponenter på? Inline, class-based, Blade-only? Det var som å ha tre fjernkontroller til én TV – teknisk sett funker det, men hvorfor?

Calebs løsning? En fjerde måte. Ja, du leste riktig. Men denne gangen blir det den eneste måten du trenger.

Single-file components – endelig orden i kaoset

Det største grepet i Livewire 4 er single-file components. Alt lever sammen i én fil: PHP-logikken din, Blade-templaten, og til og med JavaScript hvis du trenger det.

<!-- counter.wire.php -->
@php
new class extends \Livewire\Component {
    public int $count = 0;
    
    public function increment() {
        $this->count++;
    }
}
@endphp

<div>
    <div>Count: {{ $count }}</div>
    <button wire:click="increment">Increment</button>
</div>

Ingen hopping mellom filer. Ingen "var det counter.php eller CounterComponent.php igjen?". Alt er der det skal være. Det er som å gå fra kaos til zen på et øyeblikk.

Og ja, du kan fortsatt splitte til multi-file components når ting vokser seg store. Fleksibilitet uten forvirring.

Blaze: Rakettdrivstoffet under panseret 🚀

Her kommer den virkelige magien: Blaze compiler. I Calebs demo på Laracon falt renderingstiden fra 329ms til 19ms. Det er ikke en forbedring – det er en revolusjon.

Blade-komponenter blir nå "code-folded" og prekompilert. De statiske delene rendres på compile-time, ikke runtime. Resultat? Dine sider blir lynraske uten at du trenger å gjøre noe som helst.

Det er som å få turbomotor på bilen din mens du sitter på bensinstasjonen.

Slots – endelig! 🎉

Alle som har bedt om slots i Livewire-komponenter (les: alle), jubler nå. Livewire 4 støtter endelig Blade-lignende slots:

<livewire:modal>
    <x-slot name="header">
        <h1>Opprett innlegg</h1>
    </x-slot>
    
    <form wire:submit="save">
        <input wire:model="title">
        <button>Lagre</button>
    </form>
</livewire:modal>

Din modal-komponent kan nå bruke {{ $slot }} akkurat som vanlige Blade-komponenter. Det er sånn det alltid burde ha vært.

Loading states som faktisk funker

Sliter du med å vise loading-spinners? Livewire 4 har løsningen. Når du trigger en request, får HTML-elementet automatisk et data-loading attributt.

Med Tailwind blir det latterlig enkelt:

<button 
    wire:click="save" 
    class="btn data-[loading]:opacity-50"
>
    Lagre
</button>

Ingen kompleks wire:loading konfigurasjon. Bare ren, vakker Tailwind.

PHP 8.4 property hooks – native power

Livewire 4 støtter PHP 8.4s nye property hooks fullt ut:

public int $count {
    set => max(1, $value);  // Kan aldri bli negativ
}

public int $double {
    get => $this->count * 2;  // Computed property
}

Ikke mer Livewire-magi – dette er ren PHP. Renere kode, mindre forvirring, mer kontroll.

Wire:ref for pinpoint precision

Trenger du å kommunisere med en spesifikk child-komponent? wire:ref er din nye beste venn:

<livewire:modal wire:ref="modal">
    <form wire:submit="save">...</form>
</livewire:modal>

public function save() {
    $this->dispatch('close')->to(ref: 'modal');
}

Slutt med generelle events som treffer alle. Nå snakker du direkte til den komponenten du vil.

Islands – partial hydration for de kule kidsa

Har du dyre komponenter som bremser siden? Islands lar deg isolere dem:

<x-livewire::island>
    <livewire:expensive-chart />
</x-livewire::island>

Den dyre grafen din blokkerer ikke resten av siden fra å rendre. Det er som å ha VIP-lane på motorveien.

Den gode nyheten for late utviklere (oss alle)

Ingen store breaking changes. Din Livewire 3-kode funker fortsatt. Du kan migrere i ditt eget tempo, teste nye features én om gangen, og fortsette å shippe mens du lærer.

Det er oppdateringen vi fortjener, men ikke den vi trodde vi ville få.

⚡-emojien i filnavnet?

Ja, du kan faktisk bruke lynbolt-emojien i filnavnene dine: ⚡counter.blade.php. Det er Unicode, det funker overalt, og Livewire-komponentene dine sorterer til toppen.

Er det nødvendig? Nei. Er det kult? Absolutt. Kommer jeg til å bruke det? Kanskje ikke i produksjon, men definitivt i side-prosjektene mine.

Konklusjon: Livewire 4 leverer varene

Caleb og teamet har levert en oppdatering som løser reelle problemer uten å lage nye. Det er raskere, renere, og mer intuitivt – uten å ofre noe av det som gjorde Livewire fantastisk i utgangspunktet.

Om du bygger en enkel widget eller et komplekst dashboard, gir Livewire 4 deg verktøyene du trenger for å jobbe raskere og smartere.

Nå er det bare å vente på at beta-en modnes til stable release. I mellomtiden kan du sjekke ut upgrade-guiden og begynne å planlegge oppgraderingen din.

Og til Caleb: Takk for at du fortsetter å gjøre Laravel-økosystemet til det beste stedet å bygge ting. Vi setter pris på det! ⚡