Back to Snippets
Lifecycle / Hooks
Complex

Observe DOM Changes with MutationObserver (Third-Party Widget Friendly)

Observe DOM mutations to integrate safely with third-party scripts/widgets that imperatively modify the DOM. The observer is created on mount and disconnected on unmount to avoid leaking callbacks. This pattern is useful when you cannot fully control a subtree rendered by external code. Use cases: Payment widgets, embedded charts, CMS embeds, A/B testing DOM injections.

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

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');