Create a Reusable Vue 3 Composable Function with TypeScript
Generate a TypeScript Vue 3 composable with proper reactivity, error handling, SSR support, cleanup logic, and usage examples.
📝 The Prompt
Write a reusable Vue 3 composable function called `use[COMPOSABLE_NAME]` in TypeScript that handles [FUNCTIONALITY_DESCRIPTION].
**Functional Requirements:**
- The composable should accept these configuration options: [CONFIG_OPTIONS]
- It must manage the following reactive state: [STATE_VARIABLES]
- Expose these methods to the consuming component: [PUBLIC_METHODS]
- Support [LIFECYCLE_BEHAVIOR] (e.g., auto-cleanup on unmount, lazy initialization)
**Technical Specifications:**
1. **TypeScript**: Define explicit interfaces for the input options, return type, and any internal data structures. Use generics if the composable should work with [GENERIC_USE_CASE].
2. **Reactivity**: Use `ref`, `computed`, and `watch` appropriately. Explain why you chose each reactivity primitive for each piece of state.
3. **Error Handling**: Implement an `error` ref and an `isLoading` ref. Handle async failures gracefully and expose error state to consumers.
4. **SSR Compatibility**: Ensure the composable works with Nuxt 3 SSR by guarding browser-only APIs with `onMounted` or `import.meta.client` checks.
5. **Cleanup**: Use `onUnmounted` or `onScopeDispose` to clean up event listeners, timers, or subscriptions.
**Deliverables:**
- The composable file with full JSDoc comments
- A usage example in a `<script setup>` component
- One unit test using Vitest demonstrating the core behavior
Follow Vue 3 Composition API best practices and the conventions from VueUse as a style reference.
💡 Tips for Better Results
Describe the exact functionality in plain English in [FUNCTIONALITY_DESCRIPTION] — e.g., 'debounced search with caching' gives much better results than vague descriptions. Reference VueUse composables as style inspiration for consistent patterns. Always request SSR guards if you're using Nuxt.
🎯 Use Cases
Vue/Nuxt developers use this when extracting repeated logic from components into clean, testable, and shareable composable functions.