Back to Snippets
Lifecycle / Hooks
Complex

Cross-Tab Sync with BroadcastChannel (Auto Cleanup)

Synchronize state across browser tabs using BroadcastChannel and close the channel on unmount. This is a modern, low-latency approach compared to polling and avoids common pitfalls like forgetting to remove listeners. Includes safe feature detection for environments that do not support it. Use cases: Logout-all-tabs, draft sync, live collaboration signals, feature flag refresh.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

Related Snippets

Lifecycle / Hooks
Complex

Lifecycle & Side Effect Management with Cleanup

Implement safe side effect management (timers, API calls, event listeners) with proper cleanup to prevent memor...

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const countdown = ref<number>(60);
  let timer: NodeJS.Timeout | null = null;
  let abortController: AbortController | null = null;
  
  // Simulate API call with abort capability
Lifecycle / Hooks
Complex

Document Title Sync with State + Restore on Unmount

Keep the browser tab title in sync with component state (e.g., unread count) and safely restore the previous title w...

<script setup lang="ts">
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
  
  // Example state that influences the tab title
  const unreadCount = ref<number>(3);
  const baseTitle = 'Inbox';
  
  // Store the title that existed before this component mounted
Lifecycle / Hooks
Complex

Defer Heavy Work with requestIdleCallback (Cancelable)

Defer non-urgent and potentially expensive work until the browser is idle, while keeping the UI responsive. This sni...

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  // Minimal typing to keep the snippet self-contained across TS configs
  type IdleDeadlineLike = { didTimeout: boolean; timeRemaining: () => number };
  type IdleHandle = number;
  
  const status = ref<'idle' | 'scheduled' | 'running' | 'done' | 'canceled'>('idle');