LiVue - Server-driven reactivity for Laravel using Vue.js

Basic Usage

Use #[Transition] to control how the browser animates DOM changes after a method call.

use LiVue\Attributes\Transition;

class Wizard extends Component
{
    public int $step = 1;

    #[Transition(type: 'forward')]
    public function nextStep()
    {
        $this->step++;
    }

    #[Transition(type: 'backward')]
    public function previousStep()
    {
        $this->step--;
    }
}

Transition Types

Built-in transition types provide directional animations:

Type	Animation	Use Case
`'forward'`	Slide left (content enters from right)	Next step, pagination forward
`'backward'`	Slide right (content enters from left)	Previous step, pagination backward
`null` (default)	Crossfade	General updates
`'custom'`	Your CSS animations	Custom effects

Skipping Transitions

Use skip: true for instant updates without animation:

class Wizard extends Component
{
    #[Transition(skip: true)]
    public function resetToStart()
    {
        // Instant update, no animation
        $this->step = 1;
    }

    #[Transition(skip: true)]
    public function updateCount()
    {
        // Frequent updates shouldn't animate
        $this->count++;
    }
}

Custom Transitions

Create custom animations using CSS and the View Transitions API:

Component

#[Transition(type: 'zoom')]
public function openDetail()
{
    $this->showDetail = true;
}

CSS

/* Zoom in animation */
::view-transition-old(root)[data-livue-transition="zoom"] {
    animation: zoom-out 0.3s ease-out;
}
::view-transition-new(root)[data-livue-transition="zoom"] {
    animation: zoom-in 0.3s ease-out;
}

@keyframes zoom-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

Use Cases

Multi-Step Wizards

Slide animations give users a sense of progression through steps.

Carousels & Sliders

Directional transitions for next/previous navigation.

Tab Panels

Crossfade between different content views.

Master-Detail Views

Zoom transitions when opening detail views.

Full Example

use LiVue\Attributes\Transition;

class OnboardingWizard extends Component
{
    public int $step = 1;
    public int $totalSteps = 4;

    #[Transition(type: 'forward')]
    public function next()
    {
        if ($this->step < $this->totalSteps) {
            $this->step++;
        }
    }

    #[Transition(type: 'backward')]
    public function back()
    {
        if ($this->step > 1) {
            $this->step--;
        }
    }

    #[Transition(skip: true)]
    public function goToStep(int $step)
    {
        // Direct jump, no animation
        $this->step = $step;
    }
}

Browser Support

Progressive Enhancement

The View Transitions API is supported in Chrome 111+, Edge 111+, and Safari 18+. On unsupported browsers, updates happen instantly without animation - the functionality still works, just without the visual transition.

No JavaScript errors or fallback code needed - the browser handles this gracefully.