Vue Composables

What are Composables?

Composables are functions that use Vue's Composition API to encapsulate and reuse stateful logic. They are Vue's equivalent of React's custom hooks. By convention, composable function names start with use.

Composables — useFetch, useLocalStorage, useDebounce

// composables/useFetch.js
import { ref, watchEffect, toValue } from 'vue'

export function useFetch(url) {
    const data    = ref(null)
    const error   = ref(null)
    const loading = ref(false)

    watchEffect(async () => {
        // Reset state
        data.value  = null
        error.value = null
        loading.value = true

        // toValue() unwraps refs or returns plain values
        const resolvedUrl = toValue(url)
        if (!resolvedUrl) return

        try {
            const res = await fetch(resolvedUrl)
            if (!res.ok) throw new Error(`HTTP ${res.status}`)
            data.value = await res.json()
        } catch (err) {
            error.value = err.message
        } finally {
            loading.value = false
        }
    })

    return { data, error, loading }
}

// Usage in component:
// const { data: users, loading, error } = useFetch('/api/users')
// const { data: post } = useFetch(computed(() => `/api/posts/${postId.value}`))

// composables/useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
    const stored = localStorage.getItem(key)
    const value = ref(stored ? JSON.parse(stored) : defaultValue)

    watch(value, (newVal) => {
        if (newVal === null || newVal === undefined) {
            localStorage.removeItem(key)
        } else {
            localStorage.setItem(key, JSON.stringify(newVal))
        }
    }, { deep: true })

    return value
}

// composables/useDebounce.js
import { ref, watch } from 'vue'

export function useDebounce(value, delay = 500) {
    const debouncedValue = ref(value.value)

    watch(value, (newVal) => {
        const timer = setTimeout(() => {
            debouncedValue.value = newVal
        }, delay)
        return () => clearTimeout(timer)
    })

    return debouncedValue
}

// Usage:
// const theme = useLocalStorage('theme', 'light')
// theme.value = 'dark'  // auto-saves to localStorage

// composables/useWindowSize.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
    const width  = ref(window.innerWidth)
    const height = ref(window.innerHeight)

    function update() {
        width.value  = window.innerWidth
        height.value = window.innerHeight
    }

    onMounted(() => window.addEventListener('resize', update))
    onUnmounted(() => window.removeEventListener('resize', update))

    return { width, height }
}

// composables/useToggle.js
import { ref } from 'vue'

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

// composables/useClipboard.js
import { ref } from 'vue'

export function useClipboard() {
    const copied = ref(false)

    async function copy(text) {
        await navigator.clipboard.writeText(text)
        copied.value = true
        setTimeout(() => copied.value = false, 2000)
    }

    return { copied, copy }
}

// Usage in component:
// <script setup>
// import { useWindowSize } from '@/composables/useWindowSize'
// import { useToggle } from '@/composables/useToggle'
// import { useClipboard } from '@/composables/useClipboard'
//
// const { width, height } = useWindowSize()
// const { value: isOpen, toggle } = useToggle()
// const { copied, copy } = useClipboard()
// </script>

Previous Next

Vue Composables

What are Composables?

Ready to Level Up Your Skills?