[v4] Does localizing field names only work for <Field>?

[1Luc1]

I was wondering if Localizing Field Names only works with <Field> ? If so, is it possible to get this working with e.g. the following setup?

<template>
  <form @submit.prevent="save" novalidate>
    <v-text-field
      name="forename"
      :label="$t('forename')"
      v-model="forename.value.value"
      :error-messages="forename.errorMessage.value"
    />
    <v-btn
      color="primary"
      type="submit"
      :loading="isSubmitting"
      >{{ $t("save") }}</v-btn>
  </form>
</template>

<script setup>
  import { useForm, useField } from "vee-validate";
  import { useI18n } from "vue-i18n";

  const { t } = useI18n();
  const { handleSubmit, isSubmitting } = useForm();
  const forename = useField("forename", "required");
  
  const save = handleSubmit(() => {
    console.log("do save");
  });
</script>

and the vee-validate plugin setup

import { defineRule } from "vee-validate";
import { configure } from "vee-validate";
import { localize, setLocale } from "@vee-validate/i18n";
import en from "@vee-validate/i18n/dist/locale/en.json";
import de from "@vee-validate/i18n/dist/locale/de.json";
import { required } from "@vee-validate/rules";

export function defineValidationRules() {
  defineRule("required", required);

  configure({
    generateMessage: localize({
      en: {
        ...en,
        names: {forename: "OVERRIDE IT"}
      },
      de: {
        ...de,
      },
    }),
  });

  setLocale('en');
}

vue: 3.2.47
vee-validate: 4.7.4
vuetify: 3.1.5

[logaretm]

You can pass the label in the field options in the third argument of useField.

const { t } = useI18n();
const forename = useField("forename", "required", { label: t('forename') });

<Field /> is just using useField under the hood with some nice behavioral addons, so most options still apply to useField.

[1Luc1]

Thanks for the answer and information about what Field does under the hood. I hoped, I can avoid using the label option on all my definitions. Anyway, at least I was on the right track :).

---

By the way, using the label option with i18n doesn't change the label with setLocale from import { setLocale } from "@vee-validate/i18n"; on the fly. The whole side has to be reloaded to do so.

Selected language 'de':

Let validation message and change language to 'en':

Re-trigger validation with language 'en':

If i hard reload the whole page with still language 'en' selected:

The label doesn't change where the validation message does. Tested this with <Field /> and it seems to work there.

[logaretm]

Yep, changing the locale does not regenerate the messages at the moment. While it could be useful I think it is very rare that you want to change the site language on the fly.

[1Luc1]

Yea you are right. Its a really rare case.
Anyway, I'll mark your initial answer as accepted answer.
Thanks for your help.