search

logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.79k stars 1.26k forks source link

Custom Localization Files #4772

Closed okaroir closed 3 days ago

okaroir commented 4 months ago

What happened?

The following code is provided in the vee-validate version 4 documentation (https://vee-validate.logaretm.com/v4/guide/i18n/#overview):

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import ar from '@vee-validate/i18n/dist/locale/ar.json';

configure({
  generateMessage: localize({
    en,
    ar,
  }),
});

I copied two files ar.json and en.json from folder @vee-validate/i18n/dist/locale/ar.json and @vee-validate/i18n/dist/locale/en.json to another folder . My new code is:

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@/languages/vee-validate/en.json';
import ar from '@/languages/vee-validate/ar.json';

configure({
  generateMessage: localize({
    en,
    ar,
  }),
});

But this code does not work properly and shows the following error in the console:

Uncaught (in promise) TypeError: template.replace is not a function

I have not changed the json files, but the default codes work correctly, but my codes have errors.

Reproduction steps

The following code is provided in the vee-validate version 4 documentation (https://vee-validate.logaretm.com/v4/guide/i18n/#overview):

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import ar from '@vee-validate/i18n/dist/locale/ar.json';

configure({
  generateMessage: localize({
    en,
    ar,
  }),
});

I copied two files ar.json and en.json from folder @vee-validate/i18n/dist/locale/ar.json and @vee-validate/i18n/dist/locale/en.json to another folder . My new code is:

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@/languages/vee-validate/en.json';
import ar from '@/languages/vee-validate/ar.json';

configure({
  generateMessage: localize({
    en,
    ar,
  }),
});

But this code does not work properly and shows the following error in the console:

Uncaught (in promise) TypeError: template.replace is not a function

I have not changed the json files, but the default codes work correctly, but my codes have errors.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

Relevant log output

No response

Demo link

https://example.com

Code of Conduct

logaretm commented 3 days ago

Can you provide an example in an online demo or repo?