Jump to another example:
Basics
Store
Composables
Events
Forms
Features
Feature Showcase: Tab Sync
Synchronize state changes across browser tabs with #[TabSync].
How it works
This component uses #[TabSync(reactive: true)].
Trigger an action in one tab, then watch another tab update automatically.
Use the button below to open the same page in a second tab quickly.
Blade value (server)
0
Vue value (client)
Last update
Never
With #[TabSync(reactive: true)], updates in one tab are broadcast to the others and then synced back to the server.
app/LiVue/TabSyncDemo.php
#[TabSync(reactive: true)]
class TabSyncDemo extends Component
{
public int $count = 0;
public function increment(): void
{
$this->count++;
}
}
resources/views/livue/tab-sync-demo.blade.php
<button v-click="increment">+1</button>
<button @click="openMirrorTab">Open in new tab</button>
@script
const openMirrorTab = () => window.open(window.location.href, '_blank');
return { openMirrorTab };
@endscript