Localization plugin for vue-formily.

Links

• 📚   Documentation

Installation

NPM

# 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:

<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/date-format';

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/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, Field, and props for all form elements. Here are some examples:

• Localize Using Vue Formily I18n
• 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.

License

MIT