Getters and Events

Getters

languages

• Type: Array<Object>
• Default:

    [
        {
            name: 'English',
            code: 'en-GB',
            urlPrefix: 'en',
            translationKey: 'en-GB'
        }
    ]
  

Returns a list of all stored languages. No filters applied.

languageFilter

• Type: Array<String>
• Default: []

Returns an array of codes

availableLanguages

• Type: Array<Object>
• Default: []

Returns a list of all languages that the application can display. This list is filtered.

forceTranslation

• Type: Boolean
• Default: false

Returns true if the application is forcing all translations. See TranslationTool

urlPrefix

• Type: String
• Default: en

Returns the URL prefix of the current language

translation

• Type: Array<Object>,
• Default: null

Returns the current language translation

currentLanguage

• Type: Object
• Default:null

defaultCode

• Type: String
• Default: en-GB

The default language code

Usage

It's possible to use them as follow

import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters(['currentLanguage'])
    }
}

or you can go for the longer version accessing the getters directly from the store instance in your component

export default {
    computed: {
        currentLanguage () {
            return this.$store.getters.currentLanguage
        }
    }
}

Events

The plugin already manages pretty much everything you need out of the box, but in case you need more interaction with the store, all events are available as a separate module that you can export.

Here an example on how to add a new language and relative translation in runtime

import { events } from 'vue-i18n-manager'

export default {
   methods: {
       const language = {
           code: 'it-IT', 
           urlPrefix: 'it',
           translationKey: 'it-IT'
       }
       const translation = {
           hello: 'ciao'
       }

       addNewLanguage () {
           this.$store.dispatch(events.ADD_LANGUAGE, language)
           this.$store.dispatch(events.ADD_TRANSLATION, { translation, code: language.code })
       }
   }
}

Here the list of available events explained with examples

ADD_LANGUAGE

this.$store.dispatch(ADD_LANGUAGE, {
 code: 'it-IT',
 urlPrefix: 'it',
 translationKey: 'it-IT'
})

SET_LANGUAGE

this.$store.dispatch(SET_LANGUAGE, 'it-IT')

ADD_TRANSLATION

const translation = { hello: 'ciao' }
const code = 'it-IT'

this.$store.dispatch(ADD_TRANSLATION, { translation, code })

SET_TRANSLATION

this.$store.dispatch(SET_TRANSLATION, 'it-IT')

UPDATE_CONFIGURATION

this.$store.dispatch(UPDATE_CONFIGURATION, {
    languageFilter: ['it-IT', 'en-GB'],
    ...
})

REMOVE_LANGUAGE_PERSISTENCY

this.$store.dispatch(REMOVE_LANGUAGE_PERSISTENCY)

SET_FORCE_TRANSLATION

this.$store.dispatch(SET_FORCE_TRANSLATION, true)