Description
Clear and concise description of the problem
As a developer using VueUse, I want to have access to the modern Temporal API through a Vue composable so that I can handle dates, times, and timezones more reliably and consistently across different calendar systems. The current Date object has many limitations and inconsistencies that the Temporal API solves.
This implementation provides a reactive wrapper around the Temporal API using the @js-temporal/polyfill package, offering:
- 🌍 Timezone conversion and management
- 📅 Multiple calendar system support (Gregorian, Islamic, Hebrew, etc.)
- ⚡ Reactive updates with configurable intervals
- 🎯 Full TypeScript support
- 🔧 Rich set of date/time manipulation utilities
I have already implemented this feature and am submitting a PR (#4793).
Suggested solution
In the VueUse integrations module, we have implemented useTemporal composable that provides a reactive interface to the Temporal API:
-
Core Features:
- Reactive Temporal.ZonedDateTime with auto-updates
- Timezone conversion utilities
- Calendar system switching
- Duration-based calculations
- Formatting options
-
Implementation Details:
- Uses @js-temporal/polyfill for browser compatibility
- Provides both composable (useTemporal) and utility (createTemporal) functions
- Full TypeScript support with proper types
- Comprehensive test coverage
- Demo component showcasing main features
-
API Structure:
- Simple configuration options (timezone, calendar, interval, immediate)
- Intuitive methods for common operations
- Consistent with Vue's reactivity system
- Proper cleanup and lifecycle management
The implementation is complete with full documentation, tests, and a demo component showing real-world usage scenarios.
Alternative
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.