Looking for a way to translate(i18n) laravels form validation rules inside a Vue form - laravel

Question

So I have build an form in laravel with Vue with some validation rules and this works, when there's an error it will show me an message but I also have an locales switcher present which also works for the text in the form but not for the validation output, so there are always in English. I am using the i18n
plugin to translate the text.
Is there a way to make the validation rules i18n ready?
registerController.php
protected function validator(array $data)
{
$customMessages = [
'name' => 'some custom message can go here...',
];
$validator = Validator::make($data, [
'name' => ['required', 'min:2', 'string', 'max:100'],
'email' => ['required', 'email', 'string', 'max:255', 'unique:users'],
'password' => [
'required'
'min:10',
'regex:/[a-z]/', // must contain at least one lowercase letter
'regex:/[A-Z]/', // must contain at least one uppercase letter
'regex:/[0-9]/', // must contain at least one digit
'regex:/[#$!%*#?&]/', // must contain a special character
],
], $customMessages);
return $validator;
}
componentForm.vue
<template>
<form #submit.prevent="formSubmit">
<el-input type="text" name="name" v-model="fields.name"
label="Name" :error="errors.name"/>
<el-input type="email" name="email" v-model="fields.email"
label="E-mailaddress" :error="errors.email"/>
<el-input type="password" name="password" v-model="fields.password"
label="Password" :error="errors.password"/>
<button type="submit" class="btn btn--primary btn--xl btn--block">
{{ $t("auth.register") }}
</button>
</form>
</template>
<script>
import espressoLocale from '../../Components/Contextual/Locale';
import espressoCard from '../../Components/UI/Card';
import elInput from '../../Components/Forms/Input';
export default {
components: {
elInput,
},
data() {
return {
fields:{
name: "",
email: "",
password: "",
},
errors: {
name: null,
email: null,
password: null,
},
}
},
methods: {
resetFields () {
this.fields.name = "";
this.fields.email = "";
this.fields.password = "";
},
formSubmit (e) {
e.preventDefault();
this.errors = {};
axios.get('/sanctum/csrf-cookie').then(response => {
axios({
method: 'post',
url: '/api/register',
data: {
name: this.fields.firstname,
email: this.fields.email,
password: this.fields.password,
},
validateStatus: (status) => {
return true;
}
}).then(response => {
if (response.data.success) {
} else {
this.errors = response.data.errors || {};
}
}).catch(function (error) { });
});
}
},
}
</script>

Answer 1

You should write :error="$t(errors.name)" in your components as you write {{ $t("auth.register") }} to show translated text about register. I assume that you get i18n locale structured object in your errors response, something like this:
errors: {
name: 'errors.name',
...
}