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

Basic Usage

Add v-navigate to links to enable SPA-style navigation without full page reloads.

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

<!-- Prefetch on hover (more aggressive) -->
<a href="/posts" v-navigate.hover>Posts</a>

<!-- Alias for .hover -->
<a href="/settings" v-navigate.prefetch>Settings</a>

How Prefetching Works

Mousedown (Default)

Prefetch starts between mousedown and click (~100ms). Balanced approach that minimizes wasted requests.

Hover (.hover)

Prefetch starts after 60ms of hovering. Faster navigation but more network requests for content user may not click.

Smart Behavior

v-navigate automatically falls back to normal navigation for:

External links (different origin)
Links with target="_blank"
Links with download attribute
Clicks with modifier keys (Ctrl, Cmd, Shift)

v-navigate vs livue.navigate()

v-navigate (for links)

<a href="/page" v-navigate>Go</a>

livue.navigate() (programmatic)

<button @click="livue.navigate('/page')">Go</button>

Combined with v-current

<nav class="flex gap-4">
    <a href="/dashboard"
       v-navigate
       v-current="'text-blue-500 font-bold'"
       class="text-gray-400 hover:text-white">
        Dashboard
    </a>
    <a href="/posts"
       v-navigate.hover
       v-current="'text-blue-500 font-bold'"
       class="text-gray-400 hover:text-white">
        Posts
    </a>
</nav>

Learn More

v-navigate is part of the SPA Navigation system. See SPA Navigation for page caching, scroll restoration,

, and navigation lifecycle events.