@scala-services/scala-translations v2.0.1

Vue Plugin for translations.

Works mostly like i18n.

#Changelog

• v2.0.1: Update for vue3
• v1.0.1: Add readme
• v1.0.0: Initial commit for Vue2

Configuration

// Import plugin
import Translations from '@scala-services/scala-translations'

// Import translations file
import translations from './translations.json'

// Use plugin, single file
App.use(Translations, {
    locale: 'en',
    fallback: 'en',
    locales: translations
});

// Use plugin, multiple translation files
App.use(Translations, {
    locale: 'en',
    fallback: 'en',
    locales: {
        en: require('./translations-en.json'),
        nl: require('./translations-nl.json')
    }
});

Translation file

Create a translation JSON file within the project. import it and load it into the locales key of the plugin instance; Translations can be single file or split into multiple files.

Single file (translations.json)

{
  "en": {
    "example": "example",
    "group": {
      "group-example": "group example"
    }
  },
  "nl": {
    "example": "voorbleed",
    "group": {
      "group-example": "groep voorbeeld"
    }
  }
}

Single file (translations-en.json)

{
  "example": "example",
  "group": {
    "group-example": "group example"
  }
}

Usage

On plugin instancing the locale and default locales are set.

• Changing locale at runtime:

  this.$setLocale('nl')

• Getting translatable:

  this.$t('example')

  (en): example

  (nl): voorbeeld

• Getting nested translatable:

  this.$t('group.example')

  (en): group example

  (nl): groep voorbeeld

Unknown translatables

When the key can't be found the plugin returns the requested value in all capitals

this.$t('group.example.does-not-exist')

GROUP EXAMPLE DOES NOT EXIST

Dynamic translatables

Translations can be completed with dynamic content

Array

{
  "example": "Example {0} array {1} entries"
}

this.$t('example',['with','content'])

 Example with array content entries

Object

{
  "example": "Example {keyOne} with {keyTwo} entries"
}

this.$t('example',{keyTwo: 'object', keyOne: 'content'})

 Example content with object entries