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

63 Views Asked by At

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: '/'
            }
        }
    }
})
0

There are 0 best solutions below