JAVASCRIPT
Build a Generic `useToggle` Composable for Boolean States in Vue 3
Learn to create a simple, reusable `useToggle` composable in Vue 3 to manage boolean states, providing methods to toggle, set to true, or set to false.
// composables/useToggle.js
import { ref, computed } from 'vue';
export function useToggle(initialValue = false) {
const isActive = ref(initialValue);
const toggle = () => {
isActive.value = !isActive.value;
};
const setTrue = () => {
isActive.value = true;
};
const setFalse = () => {
isActive.value = false;
};
// Optionally expose a readonly ref
const value = computed(() => isActive.value);
return {
value, // or isActive, if direct modification is allowed
toggle,
setTrue,
setFalse,
};
}
// App.vue
<template>
<div>
<h2>`useToggle` Composable Example</h2>
<p>Is light on? {{ isLightOn.value ? 'Yes' : 'No' }}</p>
<button @click="isLightOn.toggle()">Toggle Light</button>
<button @click="isLightOn.setTrue()">Turn Light On</button>
<button @click="isLightOn.setFalse()">Turn Light Off</button>
<hr>
<p>Is menu open? {{ isMenuOpen.value ? 'Open' : 'Closed' }}</p>
<button @click="isMenuOpen.toggle()">Toggle Menu</button>
</div>
</template>
<script setup>
import { useToggle } from './composables/useToggle';
const isLightOn = useToggle(true); // Initial state: true
const isMenuOpen = useToggle(); // Initial state: false (default)
</script>
How it works: Many UI components need to manage simple boolean states (e.g., for modals, dropdowns, visibility). This `useToggle` composable provides a clean and encapsulated way to handle these states, promoting reusability and cleaner component logic across your application. By returning a reactive `value` along with methods like `toggle`, `setTrue`, and `setFalse`, it abstracts away the boilerplate of managing a `ref` directly.