Localization of numbers and dates is not working in Nuxt3 + VueI18n

Question

I've tried to configure Nuxt 3 along with the VueI18n plugin as described here. It works fine for "normal" translations using $t() within the template or using t() in the script part. I load my files containing the translations lazy from a S3 bucket, each language its own file. Also the localization of URLs is working.

Only the localization of numbers ($n()) and dates ($d()) is not working. I followed this guide without success.

Here is my Vue component:

<template>
    <div class="container">
        <h1>{{ $t('index.hello') }}</h1>
        <p>
            Number {{ $n(5000, 'currency') }}
        </p>

        <p>
            {{ $d(new Date()) }}
        </p>
    </div>
</template>

<script setup></script>

$n() gives me a warning on the console: [intlify] Not found 'currency' key in 'de_DE' locale messages.

$d() gives me a 500 error with this message: Incorrect locale information provided. Providing a locale as second parameter $d("2023-05-06", "de_DE") gives me this error message: [intlify] Not found 'de_DE' key in 'de_DE' locale messages.)`

Please see my Nuxt configuration file below:

export default defineNuxtConfig({
    pages: true
    app: {},
    modules: [
        'nuxt-gtag',
        '@nuxtjs/i18n'
    ],
    i18n: {
        defaultLocale: 'de_DE',
        lazy: true,
        langDir: 'lang',
        locales: [{ code: 'de_DE', file: 'loadFromS3.ts', iso: 'de-DE', isCatchallLocale: true }],
        strategy: 'prefix_except_default',
        customRoutes: 'config',
        pages: {
            'catalog/index': {
                de_DE: '/katalog'
            },
            'index': {
                de_DE: '/'
            }
        }
    }
})

Sunwise

Answer 1

This is quite a strange error imo, but this is what I tried doing and what works. So I tried fresh installing Nuxt 3 + @nuxtjs/i18n and added the numberFormats and datetimeFormats, and I can reproduce your error. Turns out it actually start to work if you move the module config outside and also provide vueI18n key inside i18n key, and add the path of the module config like so (I followed the offical guide):

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

Now you need to move your config to the ./i18n.config.ts file, like so:

export default defineI18nConfig(() => ({
  defaultLocale: "de_DE",
  lazy: true,
  langDir: "lang",
  locales: [
    {
      code: "de_DE",
      file: "loadFromS3.ts",
      iso: "de-DE",
      isCatchallLocale: true,
    },
  ],
  strategy: "prefix_except_default",
  customRoutes: "config",
  pages: {
    "catalog/index": {
      de_DE: "/katalog",
    },
    index: {
      de_DE: "/",
    },
  },
}));

Then don't forget to add the numberFormats, datetimeFormats in the config (depends on your preference):

export default defineI18nConfig(() => ({
  defaultLocale: "de_DE",
  lazy: true,
  ...
  numberFormats: {
    'de-DE': {
      currency: {
        style: 'currency', currency: 'EUR', notation: 'standard'
      },
    }
  },
  datetimeFormats: {
    'de-DE': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'short', day: 'numeric',
        weekday: 'short', hour: 'numeric', minute: 'numeric'
      }
    },
  },
}))

Not sure why it has to be like this and to be honest, I'm not very experienced with this Vue I18n stuff, but it seems to me that Vue I18n is not the same as @nuxtjs/i18n (they share same stuffs, but there are some differences).

Synn