Einführung#

Vue i18n macht es einfach, Übersetzungen in Vue-Templates mit der $t()-Funktion hinzuzufügen. Aber wie übersetzt man Text in JavaScript-Dateien, Vuex/Pinia Stores oder Utility-Funktionen?

Dieser Guide zeigt dir, wie du Vue i18n Übersetzungen überall in deiner Vue 3 Anwendung verwenden kannst, auch außerhalb von Vue-Komponenten.

Voraussetzungen#

  • Vue 3 Projekt mit vue-i18n installiert
  • Grundverständnis der Vue Composition API
  • Vertrautheit mit i18n-Konzepten

Grundeinrichtung#

Stelle zunächst sicher, dass dein i18n-Setup JavaScript-Nutzung unterstützt:

javascript
// src/i18n/index.js
import { createI18n } from 'vue-i18n';

const messages = {
  de: {
    greeting: 'Hallo, {name}!',
    errors: {
      required: 'Dieses Feld ist erforderlich',
      email: 'Bitte gib eine gültige E-Mail ein'
    }
  }
};

export const i18n = createI18n({
  legacy: false, // Composition API Modus verwenden
  locale: 'de',
  fallbackLocale: 'en',
  messages
});

export default i18n;

Methode 1: useI18n() Composable#

Der empfohlene Weg für Vue 3 Komponenten:

vue
<script setup>
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

// Im Script verwenden
const greeting = t('greeting', { name: 'Max' });
console.log(greeting); // "Hallo, Max!"

// Sprache wechseln
function switchLanguage(lang) {
  locale.value = lang;
}
</script>

<template>
  <p>{{ t('greeting', { name: 'Max' }) }}</p>
</template>

Methode 2: Globale i18n-Instanz#

Für die Verwendung außerhalb von Vue-Komponenten (Stores, Utilities, etc.):

javascript
// src/utils/notifications.js
import { i18n } from '@/i18n';

export function showSuccessNotification(key, params = {}) {
  const message = i18n.global.t(key, params);
  toast.success(message);
}

In Pinia Stores verwenden#

javascript
// src/stores/user.js
import { defineStore } from 'pinia';
import { i18n } from '@/i18n';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    error: null
  }),

  actions: {
    async login(credentials) {
      try {
        const response = await api.login(credentials);
        this.user = response.data;

        // Übersetzte Erfolgsmeldung
        const message = i18n.global.t('auth.loginSuccess');
        toast.success(message);

      } catch (error) {
        // Übersetzte Fehlermeldung
        this.error = i18n.global.t('auth.loginFailed');
        throw error;
      }
    }
  }
});

Methode 3: Übersetzungs-Helper erstellen#

Für saubereren Code, erstelle eine Helper-Funktion:

javascript
// src/utils/translate.js
import { i18n } from '@/i18n';

export function translate(key, params = {}) {
  return i18n.global.t(key, params);
}

// Kurzform-Alias
export const $t = translate;

Verwendung:

javascript
// src/services/validation.js
import { $t } from '@/utils/translate';

export const validationRules = {
  required: (value) => !!value || $t('errors.required'),
  email: (value) => {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(value) || $t('errors.email');
  }
};

Methode 4: Reaktive Übersetzungen mit Computed#

Wenn Übersetzungen reaktiv aktualisiert werden sollen:

javascript
// src/composables/useTranslatedOptions.js
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

export function useTranslatedOptions() {
  const { t } = useI18n();

  const statusOptions = computed(() => [
    { value: 'active', label: t('status.active') },
    { value: 'pending', label: t('status.pending') },
    { value: 'inactive', label: t('status.inactive') }
  ]);

  return { statusOptions };
}

Best Practices#

1. i18n-Instanz immer exportieren#

javascript
// i18n/index.js
export const i18n = createI18n({ ... });
export default i18n;

2. Composition API Modus verwenden#

javascript
createI18n({
  legacy: false, // Erforderlich für useI18n()
  // ...
});

3. Async Loading handhaben#

javascript
import { i18n } from '@/i18n';

export async function loadLocaleMessages(locale) {
  const messages = await import(`@/i18n/locales/${locale}.json`);
  i18n.global.setLocaleMessage(locale, messages.default);
  return messages;
}

// Verwendung
async function changeLanguage(locale) {
  await loadLocaleMessages(locale);
  i18n.global.locale.value = locale;
}

Häufige Probleme und Lösungen#

Problem 1: t() gibt Key statt Übersetzung zurück#

Problem: Key wird zurückgegeben statt übersetztem Text.

Lösungen:

javascript
// Prüfe, ob Messages geladen sind
console.log(i18n.global.messages.value);

// Stelle korrekten Key-Pfad sicher
i18n.global.t('errors.required'); // Nicht t('required')

// Prüfe, ob Locale gesetzt ist
console.log(i18n.global.locale.value);

Problem 2: Übersetzungen nicht reaktiv#

Problem: Sprachwechsel aktualisiert Text nicht.

Lösung: Verwende computed properties:

javascript
// Falsch - nicht reaktiv
const message = i18n.global.t('greeting');

// Richtig - reaktiv
const message = computed(() => i18n.global.t('greeting'));

Problem 3: useI18n() außerhalb von Setup#

Problem: useI18n() kann nur in setup verwendet werden.

Lösung: Verwende die globale Instanz:

javascript
// In normalen JS-Dateien
import { i18n } from '@/i18n';
const message = i18n.global.t('key');

Fazit#

Vue i18n bietet flexible Wege, Übersetzungen in JavaScript zu verwenden:

  1. useI18n() - Optimal für Vue-Komponenten mit Composition API
  2. i18n.global.t() - Für Stores, Utilities und Nicht-Komponenten-Code
  3. Helper-Funktionen - Für sauberen, wiederverwendbaren Übersetzungszugriff
  4. Computed Properties - Für reaktive Übersetzungen

Beim Übersetzen deiner Vue i18n JSON-Dateien stelle sicher, dass Platzhalter und ICU-Format erhalten bleiben. shipglobal.dev handhabt Vue i18n Dateiformate automatisch und bewahrt alle Variablen-Syntax.

Verwandte Ressourcen#