2

In a vue 3.2 project I'm working with vue-i18n-next v9, the composition api and the <script setup> approach.

I'm trying to create a translated message with some variables indicated by {}'s. For example

export default {
    conclusion: `After reviewing the above invoices, it was found that there is currently a difference of about {total_difference} in your {advantage_type} on the whole of these invoices.`
}

My vue component looks like this:

<script setup>
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { getHumanPrice } from '@/utils/helpers';

    const { t } = useI18n();

    const total_difference = ref(2000);

    const conclusion = computed(() => {
        return t('conclusion', 1, {
            total_difference: total_difference.value
            advantage_type: total_difference.value >= 0 ? t('advantage', 1).toLowerCase() : t('disadvantage', 1).toLowerCase(),
        });
    });
</script>

The result is a string without the variable parts After reviewing the above invoices, it was found that there is currently a difference of about in your on the whole of these invoices.

Previously, when using vue-i18n-next package with the options api in vue 2, there was no problem and the string was correctly formed with the variables. The code looked like this:

<script>
    export default: {
        data() {
            return {
                total_difference: 2000,
            }
        },
        computed: {
            conclusion() {
                return this.$tc('conclusion', 1, {
                    total_difference: this.$filters.getHumanPrice(this.total_difference, 2),
                    advantage_type: this.total_difference >= 0 ? t('advantage', 1).toLowerCase() : t('disadvantage', 1).toLowerCase(),
                });
            },
        }
    }
</script>

The output was After reviewing the above invoices, it was found that there is currently a difference of about $2500,00 in your advantage on the whole of these invoices.

Any idea what has been changed or what I could be doing wrong with the composition api approach?

Thore
  • 1,918
  • 2
  • 25
  • 50
  • It's unknown what's not working. "Previously I could use this code with the options api and $tc without any problem" - which code exactly? Are Vue and i18n versions the same? – Estus Flask Feb 16 '22 at 16:49
  • @EstusFlask I have reworked the question. I hope it's clearer now. My Vue version is 3.2.30, vue-i18n is version 9.2.0-beta.14 – Thore Feb 17 '22 at 10:40
  • You changed `$tc` to `t` and should expect that there will be differences in use. – Estus Flask Feb 17 '22 at 13:52

1 Answers1

0

$tc provides a translation with pluralization, a drop-in replacement for it would be tc:

tc('conclusion', 1, { ... })

t is general translation function, although it allows to use pluralization, it cannot accept an object for named interpolation as an argument because there may be other options, in this case it should be:

t('conclusion', 1, { named: { ... } })
Estus Flask
  • 206,104
  • 70
  • 425
  • 565