Jump to another example:
Basics
Store
Composables
Events
Forms
Features
Feature Showcase: URL Sync
Keep component state and query string synchronized with #[Url].
How it works
Properties marked with #[Url] stay aligned with the query string.
Here we use v-watch so filter changes sync quickly,
then LiVue updates the URL and server-rendered result list.
Reactive values
q:
status:
These values are mirrored into the query string via #[Url].
Server filtered list
- Write architecture notes open
- Review pull request open
- Ship docs update done
- Prepare showcase cards done
- Check error boundary open
app/LiVue/UrlSyncDemo.php
#[Url(as: 'q', history: true, except: '')]
public string $search = '';
#[Url(except: 'all')]
public string $status = 'all';
resources/views/livue/url-sync-demo.blade.php
<div v-watch.debounce.300ms="'search'">
<input v-model="search" />
</div>
<div v-watch="'status'">
<select v-model="status">...</select>
</div>