Vue.js: Custom Composables

// ❌ Broken version: 5 components, 5 copies of the same code
// OrdersSearch.vue
let timer = null
const searchQuery = ref('')
const results = ref([])

watch(searchQuery, (val) => {
  if (timer) clearTimeout(timer)
  timer = setTimeout(async () => {
    const res = await fetch(`/api/orders?q=${val}`)
    results.value = await res.json()
  }, 300)
})

// ProductsSearch.vue - identical logic (only the URL differs)
// UsersSearch.vue - identical logic (only the URL differs)
// ... 2 more ...

// composables/useSearch.js - a single composable
const { ref, watch } = Vue

export function useSearch(apiUrl, options = {}) {
  const { debounceMs = 300, minLength = 0 } = options
  const searchQuery = ref('')
  const results = ref([])
  const loading = ref(false)
  
  let timer = null
  watch(searchQuery, (val) => {
    if (timer) clearTimeout(timer)
    if (val.length < minLength) {
      results.value = []
      return
    }
    timer = setTimeout(async () => {
      loading.value = true
      const res = await fetch(`${apiUrl}?q=${val}`)
      results.value = await res.json()
      loading.value = false
    }, debounceMs)
  })
  
  return { searchQuery, results, loading }
}

<!-- OrdersSearch.vue - a one-line call -->
<script setup>
import { useSearch } from '@/composables/useSearch'
const { searchQuery, results, loading } = useSearch('/api/orders', { debounceMs: 500, minLength: 3 })
</script>

<!-- ProductsSearch.vue - the same one line (different URL) -->
<script setup>
import { useSearch } from '@/composables/useSearch'
const { searchQuery, results, loading } = useSearch('/api/products', { debounceMs: 500, minLength: 3 })
</script>

// ✅ Correct: useXxx naming
useMouse()
useLocalStorage('key')
useFetch('/api/users')
useDebounce(searchQuery, 500)
useToggle(false)

// ❌ Wrong: other naming
fetchUser()        // doesn't start with use
mouseTracker()     // doesn't start with use
getStorage()      // get/set verbs don't count as hooks

src/
├── components/        # components
├── views/             # pages
├── composables/       # composable functions (the focus)
│   ├── useMouse.js
│   ├── useLocalStorage.js
│   ├── useFetch.js
│   ├── useDebounce.js
│   ├── useToggle.js
│   └── index.js       # single barrel export
├── stores/            # Pinia stores
└── App.vue

Two green-bordered cards side by side, "Counter A" and "Counter B", both starting at "10 (double 20)".
Click A's "+1" three times → A shows "13 (double 26)" while B stays at "10 (double 20)" — each useCounter call creates a fresh, isolated state.
Click A's "Reset" → it returns to 10 and B is completely unaffected.

// composables/useMouse.js
const { ref, onMounted, onUnmounted } = Vue

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  
  function update(event) {
    x.value = event.clientX
    y.value = event.clientY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  return { x, y }
}

<!-- MouseTracker.vue -->
<script setup>
import { useMouse } from '@/composables/useMouse'
const { x, y } = useMouse()
</script>

<template>
  <p>Mouse: {{ x }}, {{ y }}</p>
</template>

// composables/useLocalStorage.js
const { ref, watch } = Vue

export function useLocalStorage(key, defaultValue) {
  const stored = localStorage.getItem(key)
  const data = ref(stored !== null ? JSON.parse(stored) : defaultValue)
  
  watch(data, (val) => {
    localStorage.setItem(key, JSON.stringify(val))
  }, { deep: true })
  
  return data
}

<!-- ThemeToggle.vue -->
<script setup>
import { useLocalStorage } from '@/composables/useLocalStorage'
const theme = useLocalStorage('theme', 'light')
</script>

<template>
  <button @click="theme = theme === 'light' ? 'dark' : 'light'">
    Current: {{ theme }}
  </button>
</template>

// composables/useFetch.js
const { ref } = Vue

export function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  async function fetchData() {
    loading.value = true
    error.value = null
    try {
      const res = await fetch(url.value || url)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      data.value = await res.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  // Fetch immediately
  fetchData()
  
  return { data, loading, error, refetch: fetchData }
}

<!-- UserList.vue -->
<script setup>
import { useFetch } from '@/composables/useFetch'
const { data: users, loading, error, refetch } = useFetch('/api/users')
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
  <button @click="refetch">Refresh</button>
</template>

// composables/useDebounce.js
const { customRef } = Vue

export function useDebounce(value, delay = 300) {
  let timer = null
  // Keep independent internal state instead of proxying the original ref
  let state = value
  return customRef((track, trigger) => ({
    get() {
      track()
      return state
    },
    set(newValue) {
      clearTimeout(timer)
      state = newValue
      timer = setTimeout(() => {
        trigger()
      }, delay)
    }
  }))
}

// Usage
const searchInput = ref('')
const debouncedSearch = useDebounce(searchInput, 500)

watch(debouncedSearch, (val) => {
  console.log('Search:', val)
  // Only runs after 500ms
})

// composables/useToggle.js
const { ref } = Vue

export function useToggle(initialValue = false) {
  const value = ref(initialValue)
  
  function toggle() {
    value.value = !value.value
  }
  
  function setTrue() {
    value.value = true
  }
  
  function setFalse() {
    value.value = false
  }
  
  return { value, toggle, setTrue, setFalse }
}

<!-- ModalToggle.vue -->
<script setup>
import { useToggle } from '@/composables/useToggle'
const { value: showModal, setTrue, setFalse } = useToggle(false)
</script>

<template>
  <button @click="setTrue">Open Modal</button>
  <Modal v-if="showModal" @close="setFalse" />
</template>

Three bordered panels render. Panel 1 reads Current: ON with a Toggle button;
hiding it also hides panel 2.
Panel 2 shows X: 0, Y: 0 and tracks the pointer as you move the mouse.
Panel 3 shows Current username: (empty), an input, and Save / Clear buttons—saving writes the name to localStorage so it survives a page refresh.

1. useToggle switch
Current: ON
[ Toggle ]

2. useMouse pointer position (move the mouse)
X: 320, Y: 180

3. useLocalStorage persistence (survives refresh)
Current username: (empty)
[ Enter a name     ] [ Save ] [ Clear ]

# after typing "Alice" and clicking Save:
Current username: Alice      ← still Alice after F5

// 1. Simple parameters
useDebounce(value, 300)

// 2. An options object
useFetch(url, { method: 'POST', body: data })

// 3. Reference types (reactive)
useFetch(ref('/api/users'))

// 4. Function parameters (callback)
useEventListener('click', (e) => console.log(e))

// 5. Multiple parameters
useLocalStorage('key', defaultValue, { mergeDefaults: true })

// 6. Generics (TypeScript)
useLocalStorage<User>('user', { name: '', age: 0 })

// 1. Return a ref directly
export function useCounter() {
  const count = ref(0)
  return { count }
}

// 2. Return a ref + methods
export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

// 3. Return a namespace (recommended)
export function useCounter() {
  const count = ref(0)
  return {
    state: { count },
    actions: { increment: () => count.value++ }
  }
}

// 4. Return a ref (destructuring friendly)
export function useCounter() {
  return ref(0)  // return the ref directly; consumers use .value
}

// 5. Return readonly (prevent outside mutation)
const { readonly } = Vue
export function useCounter() {
  const count = ref(0)
  return { count: readonly(count) }
}

// 1. onMounted + onUnmounted (most common)
export function useEventListener(event, handler) {
  onMounted(() => window.addEventListener(event, handler))
  onUnmounted(() => window.removeEventListener(event, handler))
}

// 2. Automatic watch cleanup
export function useWatch(source, callback) {
  const stop = watch(source, callback)
  onUnmounted(() => stop())
}

// 3. Automatic setInterval cleanup
export function useInterval(fn, delay) {
  let timer = null
  onMounted(() => { timer = setInterval(fn, delay) })
  onUnmounted(() => clearInterval(timer))
}

// 4. Automatic setTimeout cleanup
export function useTimeout(fn, delay) {
  let timer = null
  onMounted(() => { timer = setTimeout(fn, delay) })
  onUnmounted(() => clearTimeout(timer))
}

// 5. Cancelling async tasks
export function useAsyncTask(task) {
  let cancelled = false
  onUnmounted(() => { cancelled = true })
  return async () => {
    if (cancelled) return
    await task()
  }
}

// 6. Cleanup on route leave
import { onBeforeRouteLeave } from 'vue-router'
export function useRouteLeave(callback) {
  onBeforeRouteLeave((to, from) => {
    if (callback()) return false  // block navigation
  })
}

# Install
npm install @vueuse/core

import { useMouse, useLocalStorage, useDebounceFn, useEventListener, useToggle } from '@vueuse/core'

// 1. Mouse position
const { x, y } = useMouse()

// 2. Reactive localStorage
const theme = useLocalStorage('theme', 'light')

// 3. Function debouncing
const debouncedFn = useDebounceFn(() => {
  console.log('Debounced!')
}, 500)

// 4. Global event listener
useEventListener('resize', () => {
  console.log('Window resized')
})

// 5. Boolean toggling
const { value, toggle } = useToggle()

A heading Search (500ms debounce), an input, and two lines render.
Typing vue fires 3 watcher updates, so Actual trigger count climbs to 3, while Debounced search term stays (empty) until 500ms after the last keystroke, then becomes the typed text.

Search (500ms debounce)
[ Enter a search term... ]
Actual trigger count: 3
Debounced search term: (empty)     ← while still typing "vue"
Debounced search term: vue         ← 500ms after the last keystroke