Skip to content

[Integration] Convert Vuetify to use @vuetify/0 useDate #111

@johnleider

Description

@johnleider

Summary

Convert Vuetify 3 to use @vuetify/v0 useDate.

Research Findings

Major Consideration: Ecosystem Change

Vuetify 3 uses date-io ecosystem (dayjs, luxon, date-fns, moment adapters).
v0 uses Temporal API with @js-temporal/polyfill.

This is the most significant integration challenge.

Options

Option A: Keep Temporal, Create Adapters

  • Build @vuetify/v0-date-dayjs, @vuetify/v0-date-luxon, etc.
  • These wrap Temporal internally but accept library-specific input
  • Maintains v0's richer API (62 methods vs 52)

Option B: Create Bridge Package

  • @vuetify/v0-date-io that wraps date-io adapters
  • Loses some v0 methods but gains ecosystem compatibility
  • Less work for existing Vuetify 3 users

Option C: Gradual Migration

  • Vuetify 3 can use both date systems during transition
  • v0 for new features, date-io for existing components
  • Eventually consolidate

Recommendation

Option A - Create v0-native adapters for popular libraries. This:

  • Maintains v0's SSR safety and Intl-first approach
  • Provides ecosystem flexibility
  • Keeps the richer API surface

v0 API Advantages Worth Preserving

  • addSeconds(), addYears() - More complete arithmetic
  • isAfterMonth(), isBeforeDay() - Granular comparisons
  • getDaysInMonth(), getMonthArray() - Calendar helpers
  • formatByString() - Token-based formatting
  • Auto locale sync with useLocale()

Dependencies

Tasks

  • Decide on integration strategy (A, B, or C)
  • Create first adapter package (recommend dayjs)
  • Test with VDatePicker, VTimePicker components
  • Document migration path from date-io
  • Benchmark Temporal vs native Date performance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions