I18n
I18n Plugin
Localization plugin for vue-formily.
Links
Install
yarn add @vue-formily/i18n
npm install @vue-formily/i18n --save
CDN
You can use i18n plugin with a script tag and a CDN, import the library like this:
<script src="https://unpkg.com/@vue-formily/i18n@latest"></script>
This will inject a I18nPlugin global object, which you will use to access the various methods exposed by the plugin or register to vue-formily.
If you are using native ES Modules, there is also an ES Modules compatible build:
<script type="module">
import i18n from 'https://unpkg.com/@vue-formily/i18n@latest/dist/i18n-plugin.esm.js'
</script>
Set Up
Vue 3.x
import { createApp } from 'vue'
import { createFormily } from '@vue-formily/formily';
import i18n from '@vue-formily/i18n';
const formily = createFormily();
formily.plug(i18n, {} as I18nOptions);
const app = createApp(App)
app.use(formily);
Vue 2.x
import Vue from 'vue';
import { createFormily } from '@vue-formily/formily';
import i18n from '@vue-formily/i18n';
const formily = createFormily();
formily.plug(i18n, {} as I18nOptions);
Vue.use(formily);
Options
type Resource = Record<string, string | string[]>;
type Locale = {
code: string;
localize?: Record<string, any>;
resource?: Resource;
};
type I18nOptions = {
defaultLocale: string;
locales?: Locale[];
}
Basic Usage
Stand Along
import i18n from '@vue-formily/i18n';
// Add locale
i18n.addLocale({
...enUS,
resource: {
hi: 'Hi, {name}.',
weekday: 'Today is {date[6]}.',
validation: {
dupplicated: '{field} is invalid.'
}
},
// The data will be used to translate the messages above
localize: {
name: 'Jo',
date: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}
});
translate('hi'); // Hi, Jo.
// Nested object
// The localize data can be checked directly by 2nd parameter
translate('validation.dupplicated', {
field: 'Email'
}); // Email is invalid.
// Array
translate('weekday[6]'); // Today is Saturday.
addLocale({
code: 'fr-ca',
resource: {
hi: 'Bonjour, {name}.'
},
localize: {
name: 'Jo'
}
});
switchLocale('fr-ca');
translate('hi') // Bonjour, Jo.
In Vue Formily
In vue-formily, the localizer is used in the Rule, Field, and props property for all form elements. Here are some examples:
Methods
translate
Translate with the resource key.
Signatures
translate(
key: string,
data?: Record<string, any> | Record<string, any>[],
{ locale = 'en-US' } = {}
): string;
If locale is not provided, the plugin will use the current active locale. The default locale is en-US
Parameters
- key - The registered resource key.
- data - The data to use in the resource message. These datas will be merged with
locale.localizedata, then do the localization. - options - The options.
{
// The locale that mapped with locale when installing this plugin
locale?: string;
}
switchLocale
Switch to another registered locale.
Signatures
switchLocale(locale: string): void;
Parameters
- locale - The resource key.
addLocale
Add more locale
Signatures
addLocale(locale: Locale): void;
Parameters
- locale - The locale object.
removeLocale
Remove locale.
Signatures
removeLocale(locale: string): void;
Parameters
- locale - The locale code.
getLocale
Get registered locale.
Signatures
getLocale(locale: string): Locale;
Parameters
- locale - The locale code.