vue-ts-locale v1.0.2
VueJS TS Locale
VueJS Plugin for advanced localization of web applications using typescript
Links
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