useToggleScope
A composable for conditionally managing Vue effect scopes based on reactive boolean conditions with automatic cleanup.
Usage
The useToggleScope composable wraps Vue’s effectScope API to create and destroy reactive effect scopes based on a boolean condition. When the condition becomes true, a new scope is created and your callback runs. When false, the scope is stopped and all effects are cleaned up automatically.
<script setup lang="ts">
import { useToggleScope } from '@vuetify/v0'
import { shallowRef, watch } from 'vue'
const isEnabled = shallowRef(false)
const data = shallowRef(0)
const { isActive } = useToggleScope(isEnabled, () => {
// This watch is only active when isEnabled is true
watch(data, (value) => {
console.log('Data changed:', value)
})
})
</script>
<template>
<div>
<button @click="isEnabled = !isEnabled">
{{ isEnabled ? 'Disable' : 'Enable' }} Watcher
</button>
<p>Scope active: {{ isActive }}</p>
<input v-model.number="data" type="number">
</div>
</template>Architecture
useToggleScope wraps Vue’s effectScope for conditional reactive effect management:
Reactivity
| Property/Method | Reactive | Notes |
|---|---|---|
isActive | Computed from scope ref | |
source | WatchSource, triggers scope on/off | |
start() | Create and run the effect scope | |
stop() | Stop and clean up all effects in the scope | |
reset() | Stop then immediately restart the scope |
Examples
Conditional Effects
An event listener that only tracks mouse movement while a toggle is active, showing how useToggleScope starts and stops the effect scope on demand.
The mousemove listener only exists while the scope is active. Starting the scope creates the listener; stopping it removes it automatically via effectScope cleanup.
Functions
useToggleScope
(source: WatchSource<boolean>, fn: (() => void) | ((controls: ToggleScopeControls) => void)) => ToggleScopeControlsConditionally manages an effect scope based on a reactive boolean source.