JSPM

vue-i18n

9.0.0-alpha.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1721044
  • Score
    100M100P100Q182909F
  • License MIT

Internationalization plugin for Vue.js

Package Exports

  • vue-i18n
  • vue-i18n/dist/vue-i18n.esm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-i18n-next

Internationalization plugin for Vue.js

Silver Sponsors

Bronze Sponsors


Status: Alpha Test

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:

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

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

<i18n-d> Component

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

See the below examples:

🍭 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.
  • The return value of $tc and tc methods is string only. object and array values ​​are no longer returned.
  • 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
  • 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 the below props:
      • place prop
      • places prop
      • path prop (Rename to keypath prop)

⚡ Improvements

🔨 Missing features

  • v-t directive
  • preserveDirectiveContent option (depend on v-t)
  • HTML format suppression with warnHtmlInMessage option
  • SSR
  • Custom formatting
  • Tooling
    • vue-cli-plugin-i18n
    • @intlify/rollup-plugin-vue-i18n
    • @intlify/vue-i18n-extensions
    • @intlify/eslint-plugin-vue-i18n

💿 Installation

npm

npm install --save vue-i18n@next

yarn

yarn add vue-i18n@next

✅ TODOs

  • Intlify message format compiler
    • vue-i18n message format
    • sourcemap
    • error handling
    • more unit tests!
  • Intlify core runtime
    • translate function
    • datetime function
    • number function
    • warnHtmlInMessage
    • improve translate args typing
    • improve locale messages typing: LocaleMessages / LocaleMessage / LocaleMessageDictiory
    • postTranslation context option
  • Composable API: I18n Composer
    • properties
      • locale
      • fallbackLocale
      • availableLocales
      • messages
      • modifiers
      • pluralRules
      • missingWarn
      • fallbackWarn
      • fallbackRoot
      • fallbackFormat
      • dateTimeFormats
      • numberFormats
    • methods
      • t
      • getLocaleMessages
      • setLocaleMessages
      • mergeLocaleMessages
      • d
      • getDateTimeFormat
      • setDateTimeFormat
      • mergeDateTimeFormat
      • n
      • getNumberFormat
      • setNumberFormat
      • mergeNumberFormat
      • getPostTranslationHandler
      • setPostTranslationHandler
      • getMissingHandler
      • setMissingHandler
  • Legacy API: compatible supporting
    • VueI18n
      • locale
      • fallbackLocale
      • availableLocales
      • messages
      • pluralizationRules
      • dateTimeFormats
      • numberFormats
      • formatter
      • missing
      • silentTranslationWarn
      • silentFallbackWarn
      • formatFallbackMessages
      • preserveDirectiveContent
      • warnHtmlInMessage
      • postTranslation
      • t
      • tc
      • te
      • getLocaleMessage
      • setLocaleMessage
      • mergeLocaleMessage
      • d
      • getDateTimeFormat
      • setDateTimeFormat
      • mergeDateTimeFormat
      • n
      • getNumberFormat
      • setNumberFormat
      • mergeNumberFormat
      • getChoiceIndex
    • Inejctted in Vue Prototype API
      • $i18n
      • $t
      • $tc
      • $te
      • $d
      • $n
    • Component options
      • messages
      • pluralRule
      • dateTimeFormats
      • numberFormats
      • sharedMessages
    • plugin install & mixin
    • version
    • IntlAvailability availabilities
  • Components
    • Translation <i18n-t>
    • NumberFormat <i18n-n>
    • DatetimeFormat <i18n-d>
  • Directive
    • v-t
  • Tool Chains
    • vue-i18n-extensions
    • vue-i18n-loader
    • rollup-plugin-vue-i18n
    • vue-cli-plugin-i18n
    • eslint-plugin-vue-i18n
  • Others
    • documentation
    • fallback localization (bubble up)
    • SSR

©️ License

MIT