[Feature Request] Improved i18n support

Problem to solve

When working with vue-i18n there is an issue with dynamic language changes.

For example when using input rules on v-text-field. Within the rule one can call i18n.t('...') to translate error-messages. The problem is, that on language-change the messages don’t get updated to the new locale unless the validation is triggered again.

There is a similar issue on the usage of hints and labels. Avoiding the $t for performance-reasons leads to very bloated code and is not always possible (see example).

<v-text-field
    :rules="[val => !!val || $t('messages.required')]"
    :hint="$t('messages.hint')"
>
    <template #label>
        <span v-t="'messages.label'"></span>
    </template>
</v-text-field>

Just assume the keys messages.required, messages.label and messages.hint exist.

The label can be displayed with the better performing v-t directive and the ‘label’ slot, for the hint $t has to be used even if you try to avoid it.

Proposed solution

It would be nice to have a property like use-i18n or similar. If set to true, the component would take the strings provided for hint, label and as return of the rules and try to use it for the path on i18n translation.

This behavior could also be extended to the item-text values of v-select components.

To have better control about where this behavior is applied or not the property could accept an object like { label: true, hint: false, rules: true}.

This feature is intended to input components but could be used on other components too.

[SteDeshain]

Is there any known good workaround for the issue originally described in the report (changing language doesn’t change language of validation error messages when using i18n.t(‘…’) within the rules)?

v-text-field and other v-input elements all have a scoped slot named message, so you can use the same way mentioned above to solve the problem, but need some tricks.

The tricks are that you should pass a i18n key rather than $t(...) to the rule function, like this :rules="[ v => !!v || 'an-i18n-key' ]". And then you should call $t('an-i18n-key') in the slot template to show the translated messages.

<v-text-field :rules="[ v => !!v || 'an-i18n-key' ]">
    <template #message="{ message }">
        {{ $t(message) }}
    </template>
</v-text-field>

My English is bad, I hope you can get what I mean ;D

[jacekkarczmarczyk]

bit less boilerplate

<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
{{ $vuetify.lang.t(`$vuetify.${header.text}`) }}
</template>