Create a Vue 3 Composable Function with Reactive State and Lifecycle Integration
Generate a Vue 3 composable with reactive state, watchers, lifecycle management, SSR support, and TypeScript types.
📝 The Prompt
Write a Vue 3 composable function called `use[COMPOSABLE_NAME]` using the Composition API and TypeScript that provides [COMPOSABLE_PURPOSE] (e.g., real-time data synchronization, local storage persistence, intersection observer, form validation, geolocation tracking).
Composable Specifications:
- Input: [INPUT_PARAMS_DESCRIPTION]
- Reactive state to manage: [STATE_VARIABLES_WITH_TYPES]
- Events/watchers needed: [WATCH_TARGETS]
Please implement the following:
1. **Function Signature**: Define the composable with typed parameters and return type interface. Use Vue's `MaybeRef` / `MaybeRefOrGetter` for inputs that should accept both raw values and refs.
2. **Reactive State**: Set up internal state using `ref()`, `reactive()`, and `computed()` as appropriate. Explain the choice between `ref` and `reactive` for each piece of state.
3. **Watchers**: Implement `watch` or `watchEffect` for [WATCH_TARGETS] with:
- `immediate` and `deep` options where needed
- Proper flush timing (`pre`, `post`, or `sync`)
- Cleanup via `onCleanup` for invalidating stale async operations
4. **Lifecycle Hooks**: Integrate `onMounted`, `onUnmounted`, and `onActivated`/`onDeactivated` (for keep-alive support) to manage [LIFECYCLE_RESOURCE] (e.g., event listeners, timers, subscriptions, DOM references).
5. **Methods**: Expose these action methods:
- [METHOD_1]: [METHOD_1_DESCRIPTION]
- [METHOD_2]: [METHOD_2_DESCRIPTION]
- `reset()`: Restore all state to initial values
6. **SSR Compatibility**: Add guards for browser-only APIs using `import.meta.env.SSR` or `typeof window` checks. Provide fallback behavior for server-side rendering with Nuxt 3.
7. **Return Value**: Return a well-structured object with readonly state (using `toRefs` or `readonly` where mutation should be prevented) and methods.
8. **Usage Example**: Show the composable used in a `<script setup>` component with template bindings demonstrating [REAL_WORLD_SCENARIO].
Include JSDoc comments for public API documentation and ensure the composable is tree-shakeable.
💡 Tips for Better Results
Specify whether your composable will be used in Nuxt 3 for SSR so the output includes proper server/client guards. Use [WATCH_TARGETS] to list exactly which reactive values should trigger side effects — this prevents over-watching. Listing your methods with descriptions in [METHOD_1] ensures the composable's public API matches your component requirements exactly.
🎯 Use Cases
Vue.js developers use this when building shared logic that multiple components consume, replacing mixins with composables. Ideal for teams migrating from Options API or creating a shared utilities package.
🔗 Related Prompts
💻 Coding
beginner
Explain Code Like Im a Beginner
Get any code explained in plain English with line-by-line breakdowns, analogies, and learning suggestions.
💻 Coding
beginner
Debug My Code and Explain the Fix
Get your code debugged with clear explanations of what went wrong and why, plus the corrected version.
💻 Coding
intermediate
Write Unit Tests for My Code
Generate thorough unit tests covering edge cases, error handling, and both positive and negative scenarios.
💻 Coding
intermediate
Convert Code Between Languages
Convert code between any programming languages while maintaining idiomatic patterns and best practices.
💻 Coding
intermediate
Write a REST API Endpoint
Generate production-ready REST API endpoints with validation, error handling, and documentation.
💻 Coding
advanced
Create a GitHub Actions CI/CD Workflow for Automated Testing and Deployment
Generate a complete GitHub Actions CI/CD workflow with build, test, deploy, and notification jobs for your project.