npm install @vueuse/core

<script setup lang="ts">
import {
  useLocalStorage,
  useDark,
  useToggle,
  useIntersectionObserver,
  useDebounce,
} from '@vueuse/core';
import { ref } from 'vue';

// Persist user preferences to localStorage — reactive, auto-synced
const theme = useLocalStorage('user-theme', 'light');

// Dark mode toggle that syncs with OS preference
const isDark = useDark();
const toggleDark = useToggle(isDark);

// Lazy-load a section when it scrolls into view
const targetSection = ref<HTMLElement | null>(null);
const isVisible = ref(false);
useIntersectionObserver(targetSection, ([{ isIntersecting }]) => {
  isVisible.value = isIntersecting;
});

// Debounced search input — only fires after user stops typing
const searchQuery = ref('');
const debouncedQuery = useDebounce(searchQuery, 300);
</script>

<template>
  <button @click="toggleDark()">
    {{ isDark ? '☀️ Light' : '🌙 Dark' }} Mode
  </button>
  <p>Saved theme: {{ theme }}</p>

  <div ref="targetSection">
    <p v-if="isVisible">Section is visible!</p>
  </div>

  <input v-model="searchQuery" placeholder="Search..." />
  <p>Searching for: {{ debouncedQuery }}</p>
</template>