Back to Snippets
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 when the component unmounts. This is a common enterprise UX requirement for inboxes, dashboards, and monitoring pages. The key is to treat document.title as a side effect and always provide cleanup to avoid leaking state across navigations. Use cases: Unread badges in title, route-specific titles, temporary override during async flows.

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

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

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');
Lifecycle / Hooks
Complex

Smooth UI Animation Loop with requestAnimationFrame (Reduced Motion Aware)

Implement a smooth animation loop using requestAnimationFrame and cancel it during unmount to avoid leaks and invali...

<script setup lang="ts">
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  
  const isRunning = ref<boolean>(true);
  const progress = ref<number>(0); // 0..100
  
  let rafId: number | null = null;
  let startTs: number | null = null;