JAVASCRIPT
Creating a Simple Vue 3 Composable for Toggle Logic
Learn to create a basic, reusable Vue 3 composable (`useToggle`) for managing boolean states, simplifying component logic and promoting code organization.
// 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 as readonly or computed for extra safety
return { isActive: computed(() => isActive.value), toggle, setTrue, setFalse };
}
// App.vue
<template>
<div>
<p>Status: {{ isActive ? 'Active' : 'Inactive' }}</p>
<button @click="toggle">Toggle</button>
<button @click="setTrue">Set Active</button>
<button @click="setFalse">Set Inactive</button>
<hr />
<p>Another Status: {{ isModalOpen ? 'Open' : 'Closed' }}</p>
<button @click="toggleModal">Toggle Modal</button>
</div>
</template>
<script setup>
import { useToggle } from './composables/useToggle';
const { isActive, toggle, setTrue, setFalse } = useToggle(true);
const { isActive: isModalOpen, toggle: toggleModal } = useToggle(); // defaults to false
</script>
How it works: This snippet introduces the concept of a Vue 3 composable by creating a simple `useToggle` function. This composable encapsulates the logic for managing a boolean state (`isActive`) and provides methods to toggle, set true, or set false. It demonstrates how to export reactive state and functions, allowing them to be reused across multiple components, improving code modularity and readability without repeating similar logic.