Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

205
Views
vee-validate 4.x error messages change language with i18n?

I want it to automatically replace the vee-validate error messages with i18n and the messages in the tr package, but when I set setLocale, it does not translate. How can I do this?

I want to use language packs in localization rather than write translations for required or other features.

I'm sorry that there may be places wrongly written in my code. my codes.

<template>
  <div
      class="TextInput"
      :class="{ 'has-error': !!errorMessage, success: meta.valid }"
  >
    <label :for="name">{{ label }}</label>
    <InputText
        :name="name"
        :type="type"
        :id="name"
        :value="inputValue"
        :placeholder="placeholder"
        @input="handleChange"
        @change="handleChangeModal"
        @blur="handleBlur"
        v-bind="$attrs"
    />

    <p class="help-message" v-show="errorMessage || meta.valid">
      {{ errorMessage || successMessage }}
    </p>
  </div>
</template>

<script>
import { useField } 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 tr from '@vee-validate/i18n/dist/locale/tr.json';
export default {
  props: {
    type: {
      type: String,
      default: "text",
    },
    modelValue:String,
    value: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    successMessage: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  emits: ['update:modelValue'],
  setup(props,{emit}) {

    const handleChangeModal = (event) =>{
      emit('update:modelValue', event.target.value);
    }

    const {
      value:inputValue,
      errorMessage,
      handleBlur,
      handleChange,
      meta,
    } = useField(props.name, undefined, {
      initialValue: props.value,
    });

    configure({
      generateMessage: localize({
        en,
        tr,
      }),
    });
    setLocale('tr');
    return {
      handleChange,
      handleBlur,
      errorMessage,
      meta,
      inputValue,
      handleChangeModal
    };
  },
};
</script> 
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!