vue-i18n date localization not localizing

Question

I have an app that's localized with vue-i18n. All the strings are saved in a JSON file and the translation works. Now I need to add a datetime localization as seen here but the module doesn't pick up my configuration and I get warnings in the console about "Fall back to 'en-US' datetime formats from 'en datetime formats."

config

import messages from './messages.json'
const dateTimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages,
  dateTimeFormats
})

template

<b-col cols="7" lg="12"><p class="margin-0">{{ $d(new Date(), 'short') }}</p></b-col>

I've tried explicitly setting {{ $d(new Date(), 'short', 'en-US') }} , I've tried only passing the dateTimeFormats I keep getting the same warning and nothing prints in my markup

Answer 1

Everything works like expected. Take a look on the snippet bellow.
Maybe your problem come from elsewhere?

 const dateTimeFormats = { 'en-US': { short: { year: 'numeric', month: 'short', day: 'numeric' } } } const messages = { 'en-US': { foo: 'bar' } } const i18n = new VueI18n({ locale: 'en', messages, dateTimeFormats }) new Vue({ i18n }).$mount("#app"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.14.0/vue-i18n.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p>{{ $d(new Date(), 'short') }}</p> <p>{{ $t('foo') }}</p> </div>