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

Basic Usage

<!-- Using v-navigate directive -->
<a href="/dashboard" v-navigate>Dashboard</a>

<!-- Using JavaScript API -->
<button @click="livue.navigate('/dashboard')">
    Go to Dashboard
</button>

Server-side Redirect

public function save()
{
    $this->user->save();

    // Full page redirect
    return $this->redirect('/users');

    // SPA navigation (no full reload)
    return $this->redirect('/users', navigate: true);
}

Prefetching

Links are prefetched on mousedown for faster navigation.

<!-- Default: prefetch on mousedown -->
<a href="/about" v-navigate>About</a>

<!-- Prefetch on hover (60ms delay) -->
<a href="/about" v-navigate.hover>About</a>

Persisting Elements

Keep elements alive across navigations. Works with video/audio players and LiVue components.

Video player

@persist('player')
    <video src="/video.mp4" autoplay></video>
@endpersist

LiVue component (sidebar with scroll preservation)

@persist('sidebar')
    @livue('docs-sidebar')
@endpersist

When a LiVue component is wrapped in @persist, its Vue app and reactive state are preserved across navigations. Combine with v-scroll to also preserve scroll position.

Progress Bar

A progress bar is automatically shown during navigation. Customize via config:

config/livue.php

'navigate' => [
    'progress_bar' => true,
    'progress_color' => '#42b883',
],

Navigation Events

// Before navigation (cancellable)
document.addEventListener('livue:navigate', (e) => {
    if (hasUnsavedChanges) {
        e.preventDefault();
    }
});

// After navigation
document.addEventListener('livue:navigated', () => {
    console.log('Navigation complete');
});

JavaScript API

// Navigate programmatically
LiVue.navigate('/dashboard');

// Prefetch a page
LiVue.prefetch('/about');

// Clear navigation cache
LiVue.clearNavigationCache();

// Check if navigating
if (LiVue.isNavigating()) { ... }