Skip to content

useTemporal | Add temporal support by polyfill #4792

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
4 tasks done
JonathanSchndr opened this issue Jun 3, 2025 · 0 comments
Open
4 tasks done

useTemporal | Add temporal support by polyfill #4792

JonathanSchndr opened this issue Jun 3, 2025 · 0 comments

Comments

@JonathanSchndr
Copy link

JonathanSchndr commented Jun 3, 2025

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:

  1. Core Features:

    • Reactive Temporal.ZonedDateTime with auto-updates
    • Timezone conversion utilities
    • Calendar system switching
    • Duration-based calculations
    • Formatting options
  2. 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
  3. 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

JonathanSchndr added a commit to JonathanSchndr/vueuse that referenced this issue Jun 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants