Vuelidate with i18n: Key not found in locale messages

So in my i18n-validators.js file I want to export validators with translated messages to my language of choice and use them in my vue component to validate a form.

My code:

// import * as VuelidateValidators from 'https://cdn.jsdelivr.net/npm/@vuelidate/validators';
// import * as VueI18n from 'https://unpkg.com/vue-i18n@9';

const messages = {
  en: {
    validations: {
      required: 'The field {property} is required.',
    }
  },
  cs: {
    validations: {
      required: 'Toto pole {property} je povinné',
    }
  },
}


const i18n = VueI18n.createI18n({
  locale: 'cz',
  fallbackLocale: 'en',
  messages
})

const withI18nMessage = VuelidateValidators.createI18nMessage({ 
  t: VueI18n.createI18n().global.t.bind(i18n)
})

export const required = withI18nMessage(VuelidateValidators.required)

Console:

Not found 'validations.required' key in 'en-US' locale messages. vue-i18n@9
Fall back to translate 'validations.required' key with 'en' locale. vue-i18n@9
Not found 'validations.required' key in 'en' locale messages.

And I want the validator to throw me the specified message instead of the "validations.required" message

First make sure you have installed vuelidade and vue-i18n

Following your example, you can change the file above to:

import * as validators from "@vuelidate/validators";
import { createI18n } from "vue-i18n";

const { createI18nMessage } = validators;

const messages = {
  en: {
    validations: {
      required: "The field {property} is required.",
    },
  },
  cs: {
    validations: {
      required: "Toto pole {property} je povinné",
    },
  },
};

const i18n = createI18n({
  locale: "cs",
  fallbackLocale: "en",
  messages,
});

const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) });
export const required = withI18nMessage(validators.required);

as a component you can follow this one as example:

<template>
  ...
  <div class="mb-3">
    <input
      v-model="formData.name"
      className="form-control"
      placeholder="Insert your name.."
    />
  </div>

  <span v-for="error in v$.name.$errors" :key="String(error.$uid)">
    <span class="text-danger">{{ error.$message }}</span>
  </span>

  <div class="mt-5 submit">
    <button class="btn btn-primary btn-sm" type="button" @click="submitForm">
      Next
    </button>
  </div>
  ...
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import useVuelidate from "@vuelidate/core";
import { required } from "@/utils/validators/i18n-validators";

export default defineComponent({
  name: "InitialDataForm",
  setup() {
    const formData = reactive({
      name: "",
    });
    const rules = {
      name: { required },
    };
    const v$ = useVuelidate(rules, formData);
    return {
      formData,
      v$,
    };
  },
  methods: {
    async submitForm() {
      const result = await this.v$.$validate();
      if (result) {
        alert("validation passed");
      }
    },
  },
});
</script>

and now you should be able to see the translated message:

Here is my i18n plugin and composable files :
In plugin you will define nuxt plugin like :

import { createI18n } from 'vue-i18n'
import en from '~/i18n/locales/en.json'
import cs from '~/i18n/locales/cs.json'
export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    fallbackLocale: 'en',
    locale: 'en',
    messages: {
        en,
        cs
    },
    defaultBrowserLanguage:false,
    locales: [
      {
        code: 'en',
      },
      {
        code: 'cs',
      },
    ],
  })

  vueApp.use(i18n)//Important
})

And then make your composable like file i18n-validators.ts:

import * as validators from "@vuelidate/validators";
import { NuxtI18nInstance } from '@nuxtjs/i18n'
export const useI18nValidators = () => {
  const { createI18nMessage } = validators;
  const { vueApp } = useNuxtApp();
  const i18n = vueApp.config.globalProperties.$t;
  const withI18nMessage = createI18nMessage({ t:  i18n });
  const required = withI18nMessage(validators.required);
  const email = withI18nMessage(validators.email);
  // You can add more validators
  return {
    required,
    email,
  };
};

Then you can use is in Vue like :

import { useVuelidate } from "@vuelidate/core";
import { useI18nValidators } from "~/composables/i18n-validators";
export default {
  data() {
    return {
      v$: useVuelidate(),
      role: {
        name: "",
      },
    };
  },
  validations() {
    const { required } = useI18nValidators();
    return {
      role: {
        name: { required },
      },
    };
  },

};

</details>