JAVASCRIPT
Creating a Reusable Composable (useToggle)
Learn to create a custom, reusable Composition API composable in Vue 3 to encapsulate reactive logic. This example shows a `useToggle` composable for simple boolean state management.
// src/composables/useToggle.js
import { ref, computed } from 'vue';
/**
* A reusable composable for managing a boolean toggle state.
* @param {boolean} [initialValue=false] - The initial state of the toggle.
* @returns {{value: Ref<boolean>, toggle: function, setTrue: function, setFalse: function}}
*/
export function useToggle(initialValue = false) {
const value = ref(initialValue);
const toggle = () => {
value.value = !value.value;
};
const setTrue = () => {
value.value = true;
};
const setFalse = () => {
value.value = false;
};
return {
value, // The reactive boolean state
toggle, // Function to flip the state
setTrue, // Function to set state to true
setFalse, // Function to set state to false
};
}
// src/App.vue
<template>
<div>
<h1>useToggle Example</h1>
<p>Toggle State: {{ isOpen.value ? 'Open' : 'Closed' }}</p>
<button @click="isOpen.toggle()">Toggle</button>
<button @click="isOpen.setTrue()">Set Open</button>
<button @click="isOpen.setFalse()">Set Closed</button>
<hr />
<h2>Another Toggle Instance</h2>
<p>Another State: {{ isActive.value ? 'Active' : 'Inactive' }}</p>
<button @click="isActive.toggle()">Toggle Another</button>
</div>
</template>
<script setup>
import { useToggle } from './composables/useToggle';
// Create a toggle instance with default false
const isOpen = useToggle();
// Create another toggle instance with initial true
const isActive = useToggle(true);
</script>
How it works: This snippet demonstrates how to create and use a custom Vue 3 composable called `useToggle`. A composable is a function that leverages the Composition API to encapsulate and reuse stateful logic. In `useToggle.js`, `ref` is used to create a reactive boolean `value`, along with helper functions `toggle`, `setTrue`, and `setFalse`. This function is then exported. In `App.vue`, `useToggle` is imported and called to create independent instances of the toggle logic (`isOpen`, `isActive`). This pattern promotes code reusability, modularity, and better organization of logic across components without boilerplate, leading to cleaner and more maintainable codebases.