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

Basic Usage

Automatically apply CSS classes to links when they match the current route.

<nav>
    <a href="/dashboard" v-current="'text-blue-500 font-bold'">
        Dashboard
    </a>
    <a href="/posts" v-current="'text-blue-500 font-bold'">
        Posts
    </a>
    <a href="/settings" v-current="'text-blue-500 font-bold'">
        Settings
    </a>
</nav>

Matching Modes

Mode	Current URL	href="/posts"
(default)	/posts/123	Matches
.exact	/posts/123	No match
.exact	/posts	Matches
.strict	/posts/	No match (trailing slash)

Modifiers

(default) - Partial Match

Matches if the current URL starts with the href path. Good for sections with sub-pages.

<!-- Matches /posts, /posts/123, /posts/new -->
<a href="/posts" v-current="'active'">Posts</a>

.exact - Exact Match

Only matches if paths are identical (ignoring trailing slashes).

<!-- Only matches /posts exactly, not /posts/123 -->
<a href="/posts" v-current.exact="'active'">All Posts</a>

.strict - Strict Match

Exact match including trailing slash. Rarely needed.

<!-- /posts/ does not match /posts -->
<a href="/posts" v-current.strict="'active'">Posts</a>

Works with SPA Navigation

v-current automatically updates when using SPA navigation. It listens to popstate and livue:navigated events to update the active state without page reloads.

Multiple Classes

<!-- Apply multiple Tailwind classes -->
<a href="/dashboard"
   v-current="'bg-blue-500 text-white rounded-lg shadow-md'"
   class="px-4 py-2 text-gray-600">
    Dashboard
</a>