How to use Vue Composables
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Vue composables enable logic reuse across components by extracting reactive functionality into standalone functions. As the creator of CoreUI with 12 years of Vue development experience, I’ve built composable libraries for production Vue applications that reduced code duplication by 60% while improving maintainability for enterprise teams.
The most effective approach creates focused composables that encapsulate a single piece of reusable logic with reactive state and lifecycle hooks.
Basic Composable
Create src/composables/useCounter.js:
import { ref } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
const reset = () => {
count.value = initialValue
}
return {
count,
increment,
decrement,
reset
}
}
Usage in component:
<script setup>
import { useCounter } from '@/composables/useCounter'
const { count, increment, decrement, reset } = useCounter(10)
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="reset">Reset</button>
</div>
</template>
Fetch Data Composable
Create src/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)
const fetchData = async () => {
loading.value = true
error.value = null
data.value = null
try {
const response = await fetch(toValue(url))
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
data.value = await response.json()
} catch (e) {
error.value = e.message
} finally {
loading.value = false
}
}
watchEffect(() => {
fetchData()
})
return { data, error, loading, refetch: fetchData }
}
Usage:
<script setup>
import { ref } from 'vue'
import { useFetch } from '@/composables/useFetch'
const userId = ref(1)
const { data: user, loading, error, refetch } = useFetch(
() => `/api/users/${userId.value}`
)
</script>
<template>
<div>
<input v-model.number="userId" type="number" />
<div v-if="loading">Loading...</div>
<div v-else-if="error">Error: {{ error }}</div>
<div v-else-if="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</div>
<button @click="refetch">Refresh</button>
</div>
</template>
Local Storage Composable
Create src/composables/useLocalStorage.js:
import { ref, watch } from 'vue'
export function useLocalStorage(key, defaultValue) {
const storedValue = localStorage.getItem(key)
const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
watch(
data,
(newValue) => {
localStorage.setItem(key, JSON.stringify(newValue))
},
{ deep: true }
)
const remove = () => {
localStorage.removeItem(key)
data.value = defaultValue
}
return {
data,
remove
}
}
Usage:
<script setup>
import { useLocalStorage } from '@/composables/useLocalStorage'
const { data: theme, remove } = useLocalStorage('theme', 'light')
const toggleTheme = () => {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>
<template>
<div :class="theme">
<p>Current theme: {{ theme }}</p>
<button @click="toggleTheme">Toggle Theme</button>
<button @click="remove">Reset Theme</button>
</div>
</template>
Mouse Position Composable
Create src/composables/useMouse.js:
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
const x = ref(0)
const y = ref(0)
const update = (event) => {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => {
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
window.removeEventListener('mousemove', update)
})
return { x, y }
}
Debounce Composable
Create src/composables/useDebounce.js:
import { ref, watch, unref } from 'vue'
export function useDebounce(value, delay = 300) {
const debouncedValue = ref(unref(value))
let timeout
watch(
() => unref(value),
(newValue) => {
clearTimeout(timeout)
timeout = setTimeout(() => {
debouncedValue.value = newValue
}, delay)
}
)
return debouncedValue
}
Usage:
<script setup>
import { ref, watch } from 'vue'
import { useDebounce } from '@/composables/useDebounce'
const searchQuery = ref('')
const debouncedQuery = useDebounce(searchQuery, 500)
watch(debouncedQuery, (newQuery) => {
console.log('Searching for:', newQuery)
// Perform API call
})
</script>
<template>
<input v-model="searchQuery" placeholder="Search..." />
<p>Debounced: {{ debouncedQuery }}</p>
</template>
Window Size Composable
Create src/composables/useWindowSize.js:
import { ref, onMounted, onUnmounted } from 'vue'
export function useWindowSize() {
const width = ref(window.innerWidth)
const height = ref(window.innerHeight)
const update = () => {
width.value = window.innerWidth
height.value = window.innerHeight
}
onMounted(() => {
window.addEventListener('resize', update)
})
onUnmounted(() => {
window.removeEventListener('resize', update)
})
return { width, height }
}
Best Practice Note
This is the same composables architecture we use in CoreUI’s Vue admin templates. Composables provide powerful code reuse without the complexity of mixins or the limitations of Vue 2 options API. Always return reactive state and methods, use descriptive naming prefixed with use, and keep composables focused on a single responsibility.
For production applications, consider using CoreUI’s Vue Admin Template which includes a comprehensive library of pre-built composables for common patterns.
Related Articles
For complete Composition API understanding, check out how to use Vue Composition API and how to manage state in Vue.
