vue-i18n-next

Internationalization plugin for Vue.js

Silver Sponsors

Bronze Sponsors

Status: Alpha

The current codebase has most of the existing features on Vue I18n v8.x and is usable.

Since the library is still unstable and because we want feedback on bugs and missing features, it will probably go through a few breaking changes.

If you use stable Vue I18n version, see this repository

⭐ New Features

Composable API

New style API for Vue 3. See the following docs:

• createI18n
  • I18nOptions
  • ComposerOptions
  • VueI18nOptions
• useI18n
  • ComposerOptions
• Composer
• VueI18n

<i18n-t> Component (formerly called <i18n> component)

You can use pluralization on the component. See the blow examples:

• Example with using Composable API
• Example with using Legacy API

<i18n-d> Component

You can use datetime format on the component, like <i18n-n> component.

See the below examples:

• Example with using Composable API
• Example with using Legacy API

🍭 Examples

See the examples directory.

The examples are offered that use the following two API styles:

• composable
  • Examples with using new vue-i18n API optimized for Vue 3
• legacy
  • Examples with using vue-i18n API that almost compatible with vue-i18n v8.x

❗ Known issues

💥 Breaking changes compared to vue-i18n v8.x

APIs

• The return value of $t and t methods is string only. object and array values ​​are no longer returned.
  • As an alternative way, you can use $tm / tm
• The return value of $tc and tc methods is string only. object and array values ​​are no longer returned.
  • As an alternative way, you can use $tm / tm
• VueI18n class cannot used with new. It can only be used via the $i18n property of Vue instance.
  • In vue-i18n-next, by replacing new VueI18n with createI18n, you can use existing VueI18n options as they are.
  • See the examples/legacy directory.
• VueI18n.prototype.getChoiceIndex
  • -> Legacy API style: pluralizationRules option of createI18n factory function (like new VueI18n(...))
  • -> Compsable API style: pluralRules option of createI18nComposer factory function
• warnHtmlInMessage option:
  • Composable API: warnHtmlMessage boolean property, default true.
  • Legacy API: warnHtmlInMessage property.
  • For development mode, warning is default.
  • For production mode, HTML message detect is not check due to performance.
• Legacy API sync option:
  • default: change to false from true
• v-t directive
  • preserve modifier deprecated, keep Element content
  • Legacy API preserveDirectiveContent option, and property deprecated
• VueI18n.version -> import { VERSION } from 'vue-i18n'
• VueI18n.availabilities -> import { availabilities } from 'vue-i18n'
• See the details here

Components

• <i18n> component
  • Rename to <i18n-t> component
  • Remove Boolean type from tag prop
  • if tag prop is not specified, return the Fragment
  • Remove the below props:
    • place prop
    • places prop
    • path prop (Rename to keypath prop)
• <i18n-n> component
  • Remove Boolean type from tag prop
  • if tag prop is not specified, return the Fragment

⚡ Improvements

• See the vue-i18n issues that labeld with Status: Ready

🔨 Missing features

• Custom formatting
• Tooling
  • @intlify/devtools
  • vue-cli-plugin-i18n
  • @intlify/eslint-plugin-vue-i18n

💿 Installation

npm

npm install --save vue-i18n@next

yarn

yarn add vue-i18n@next

✅ TODOs

©️ License

MIT