kazupon/vue-i18n

Pluralization not working using arguments inside a JSON file

felixzapata opened this issue · 1 comments

felixzapata commented

Reporting a bug?

I'm trying to use pluralization on my application, passing arguments and reading the text from a JSON file, like for example:

{
"announcerUsersList": "There are no users | There is 1 user | There are {usersCounter} users",
}

console.log(t('announcerUsersList', { usersCounter: 2 }));

But it shows me always There is 1 user.

By the way, if I use this other format: console.log(t('announcerUsersList', 2));, it shows There are users

I only have this problem reading the text and arguments from a JSON file.

Expected behavior

Given this text in a JSON file:

{
"announcerUsersList": "There are no users in the filtered list | There is 1 user | There are {usersCounter} users",
}

console.log(t('announcerUsersList', 0)); --> There are no users.
console.log(t('announcerUsersList', 1)); --> There is 1 user.
console.log(t('announcerUsersList', { usersCounter: 2 })); --> There are 2 users.

Reproduction

i18n.ts

import { createI18n } from 'vue-i18n';
import type { LocaleMessage } from '@intlify/core-base';
import type { VueMessageType } from 'vue-i18n';
/*
 * All i18n resources specified in the plugin `include` option can be loaded
 * at once using the import syntax
 */
import messages from '@intlify/unplugin-vue-i18n/messages';

export default createI18n({
  locale: 'en-US',
  fallbackLocale: 'en-US',
  legacy: false,
  globalInjection: true,
  messages: messages as { [x: string]: LocaleMessage<VueMessageType>; }
});

main.ts

import { createApp } from 'vue';
import type { Component } from 'vue';
import './assets/main.css'
import App from './App.vue';
import router from './router'
import i18n from './i18n';

const app = createApp(App as Component);

app
  .use(router)
  .use(i18n)
app.mount('#app');

en-US.json

{
"announcerUsersList": "There are no users | There is 1 user | There are {usersCounter} users",
}

myComponent.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n();

function foobar() {
  console.log(t('announcerUsersList', { usersCounter: 2 }));
}

</script>

<template>
  <h1>Foobar</h1>
<button @click="foobar">Button</button>
</template>

vite.config.ts

import { fileURLToPath, URL } from 'node:url';
import { resolve, dirname } from 'node:path';

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueI18nPlugin({
      runtimeOnly: true,
      include: resolve(
        dirname(fileURLToPath(import.meta.url)),
        './src/locales/**',
      ),
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

System Info

System:
    OS: macOS 11.6.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.23 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 3.2.3 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Chrome Canary: 109.0.5366.0
    Firefox: 105.0.3
    Safari: 15.5
    Safari Technology Preview: 15.4
  npmPackages:
    @intlify/core-base: 9.2.2 => 9.2.2 
    @intlify/unplugin-vue-i18n: 0.7.0 => 0.7.0 
    @vitejs/plugin-vue: 3.1.2 => 3.1.2 
    @vue/eslint-config-typescript: 11.0.2 => 11.0.2 
    @vue/test-utils: 2.1.0 => 2.1.0 
    @vue/tsconfig: 0.1.3 => 0.1.3 
    vite: 3.1.8 => 3.1.8 
    vitest: 0.24.3 => 0.24.3 
    vue: 3.2.41 => 3.2.41 
    vue-i18n: 9.2.2 => 9.2.2 
    vue-loader: 17.0.0 => 17.0.0 
    vue-router: 4.1.5 => 4.1.5 
    vue-tsc: 1.0.8 => 1.0.8

Screenshot

No response

Additional context

No response

Validations

felixzapata commented

closed because I created the issue on the wrong repository. I am using the version for Vue 3.