# Internationalisierung

Um Übersetzungen für Komponenten hinzuzufügen wird in hubble das Nuxt Modul nuxt-i18n (opens new window) verwendet, welches auf dem Vue.js Plugin vue-i18n (opens new window) basiert.

Die Dateien für die Übersetzungen liegen unter ~/locales/. Es können beliebig weitere hinzugefügt oder entfernt werden, jedoch sind diese in der ~/nuxt.config.js aufzulisten. Im Folgenden ist die dazugehörige Default Einstellung für das hubble Projekt zu sehen:

// ~/nuxt.config.js
// ...
['nuxt-i18n', {
    defaultLocale: 'en',
    detectBrowserLanguage: false,
    locales: [
        {
            code: 'de',
            iso: 'de-DE',
            file: 'de.js'
        },
        {
            code: 'en',
            iso: 'en-US',
            file: 'en.js'
        },
    ],
    langDir: 'locales/',
    lazy: true,
    seo: false
}],
// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Besonders erwähnenswert ist die Möglichkeit, die entsprechenden Übersetzungsdateien nur bei Bedarf zu laden. Hierzu ist der Parameter lazy: true in der nuxt-i18n Konfiguration hinzuzufügen, siehe oben. Weitere Informationen zu dieser Funktionalität sind diesem Abschnitt Lazy Load Translations (opens new window) der nuxt-i18n (opens new window) Dokumentation zu entnehmen.

Somit werden auch für Lokalisierungsdateien, die Prinzipien des Lazy Loading eingehalten.