VueJS TS Locale

VueJS Plugin for advanced localization of web applications using typescript

Links

• GitHub
• NPM

Installation

Should be installed locally in your project source code:

npm install vue-ts-locale --save

Integration

Inside your VueJS application you have to register the VueLocale plugin:

import VueLocale from "vue-ts-locale";

Vue.use(VueLocale,
{
  language: SELECTED_LANGUAGE,
  currency: SELECTED_CURRENCY,
  messages: MESSAGE_TEXTS
})

While these are typical examples of values:

• SELECTED_LANGUAGE: "de", "en", "fr", ... (any valid language identifier)
• SELECTED_CURRENCY: "EUR", "USD", ... (any valid currency from CLDR data)
• MESSAGE_TEXTS: { key : value, ...}

Loading required locale data

Depending on whether your clients support the Intl API + all relevant locales (prominent exceptions right now are NodeJS, Safari on Mac and Safari on iOS) the amount of data and polyfills to load differs.

Loading Intl-Polyfill + Data for 4 Locales

import "intl";
import "intl/locale-data/jsonp/en.js";
import "intl/locale-data/jsonp/de.js";
import "intl/locale-data/jsonp/fr.js";
import "intl/locale-data/jsonp/es.js";

The data loaded here contains information on how to format dates (+ calendar data) and numbers (+ currencies).

Usage

Adding Messages

You should pass the matching locale data structure with relevant messages e.g. Dutch.

let messages =
{
  "my-message-identifier": "Hallo wereld!",
  "my-html-identifier": "Hallo <b>wereld</b>!",
  "my-personal-identifier": "Hallo {name}!",
  ...
}

Translating messages using VueJS filter

• Plain Text: {{ "my-message-identifier" | format-message }}
• HTML Output: {{{ "my-html-identifier" | format-message }}}
• Personal: Not possible because we can't pass the required additional data structure to the filter

Translating using function calls

• Plain Text: {{ $formatMessage("my-message-identifier") }}
• HTML Output: {{{ $formatMessage("my-html-identifier") }}}
• Personal: {{{ $formatMessage("my-personal-identifier", { name : screenName }) }}}

Formatting Numbers

• Number Formatting #1: {{ 3.14159 | format-number }} => "3,14159"
• Number Formatting #2: {{ 3.14159 | format-number 2 }} => "3,14"
• Number Formatting #3: {{ 3.14159 | format-number 0 }} => "3"
• Percent Formatting #1: {{ 0.641322 | format-percent }} => "64%"
• Percent Formatting #2: {{ 0.641322 | format-percent 2 }} => "64,13%"
• Currency Formatting #1: {{ 21.37 | format-currency }} => "21 €"
• Currency Formatting #2: {{ 21.37 | format-currency-precise }} => "21,37 €"

Formatting Dates/Times

• Date Formatting: {{ new Date | format-date }} => 12.2.2016
• Time Formatting: {{ new Date | format-time }} => 14:23 Uhr

Formatting Relative Dates

• Relative Formatting: {{ new Date - (1000 * 60 * 10) | format-relative }} => vor 10 Minuten

Use format methods outside of Vue component

It is possible to use the format methods directly in TS code, but only after the plugin is initialised

import { formatMessage } from "vue-ts-locale";
formatMessage("my-message-identifier");

Copyright

This plugin is based on the work of Sebastian Werner https://github.com/sebastian-software/vue-locale