https://github.com/vue-formily/i18n-plugin
Localization plugin for vue-formily.
https://github.com/vue-formily/i18n-plugin
i18n localization plugin vue vue-formily
Last synced: about 2 months ago
JSON representation
Localization plugin for vue-formily.
- Host: GitHub
- URL: https://github.com/vue-formily/i18n-plugin
- Owner: vue-formily
- License: mit
- Created: 2021-08-30T11:29:03.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-27T10:20:10.000Z (over 4 years ago)
- Last Synced: 2025-08-08T23:58:44.768Z (11 months ago)
- Topics: i18n, localization, plugin, vue, vue-formily
- Language: JavaScript
- Homepage: https://vue-formily.netlify.app/plugins/i18n
- Size: 107 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Localization plugin for [**vue-formily**](https://vue-formily.netlify.app).
## Links
- [📚  Documentation](https://vue-formily.netlify.app/plugins/i18n)
## Installation
### NPM
```sh
# install with yarn
yarn add @vue-formily/i18n
# install with npm
npm install @vue-formily/i18n --save
```
### CDN
You can use **i18n** plugin with a script tag and a CDN, import the library like this:
```html
```
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**](https://vue-formily.netlify.app).
If you are using native ES Modules, there is also an ES Modules compatible build:
```html
import i18n from 'https://unpkg.com/@vue-formily/i18n@latest/dist/i18n-plugin.esm.js'
```
### Set Up
### Vue 3.x
```typescript
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
```typescript
import Vue from 'vue';
import { createFormily } from '@vue-formily/formily';
import i18n from '@vue-formily/date-format';
const formily = createFormily();
formily.plug(i18n, {} as I18nOptions);
Vue.use(formily);
```
## Options
```typescript
type Resource = Record;
type Locale = {
code: string;
localize?: Record;
resource?: Resource;
};
type I18nOptions = {
defaultLocale: string;
locales?: Locale[];
}
```
## Basic Usage
### Stand Along
```typescript
import i18n from 'vue-formily/plugins/i18n';
// Install plugin and locale
VueFormily.plug(i18n, {
locales: [{
...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']
}
}]
});
Vue.use(VueFormily);
// Translation
i18n.translate('hi'); // Hi, Jo.
// Nested object
// The localize data can be checked directly by 2nd parameter
i18n.translate('validation.dupplicated', {
field: 'Email'
}); // Email is invalid.
// Array
i18n.translate('weekday[6]'); // Today is Saturday.
i18n.addLocale({
code: 'fr-ca',
resource: {
hi: 'Bonjour, {name}.'
},
localize: {
name: 'Jo'
}
});
i18n.switchLocale('fr-ca');
i18n.translate('hi') // Bonjour, Jo.
```
### In Vue Formily
In **vue-formily**, the **i18n** is used in the [Rule](https://vue-formily.netlify.app/api/rule), [Field](https://vue-formily.netlify.app/api/field), and [props](https://vue-formily.netlify.app/api/element#properties) for all form elements. Here are some examples:
- [Localize Using Vue Formily I18n](https://vue-formily.netlify.app/examples/localize#using-vue-formily-i18n)
- [Localize Using External Library](https://vue-formily.netlify.app/examples/localize#using-external-library)
## Contributing
You are welcome to contribute to this project, but before you do, please make sure you read the [Contributing Guide](https://github.com/vue-formily/formily/blob/main/.github/CONTRIBUTING.md).
## License
[MIT](./LICENSE)