Vue

Wie benutzt man Magic Translate in Vue-Apps. Der Vue-Client benötigt Vue 3.3 oder neuer und funktioniert auch mit Nuxt.

Installation

Installiere den Vue-Client für Magic Translate in deiner App.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Dann installiere das Plugin in deiner App.

// main.ts
import { createApp } from 'vue';
import { createMagicTranslate, Language } from '@magic-translate/vue';
import App from './App.vue';

createApp(App)
  .use(
    createMagicTranslate({
      apiKey: '<your-api-key>',
      language: Language.DE // any supported language
    })
  )
  .mount('#app');

Falls du noch keinen API-Schlüssel hast, melde dich für Magic Translate an, um einen zu erhalten.

Jetzt kannst du die Komponente <T> in jeder Vorlage verwenden. Das Plugin registriert es weltweit.

<template>
  <h1><T>Please translate me!</T></h1>
</template>

Das ist es. Deine App kann jetzt in über 70 Sprachen übersetzt werden.

Konfiguration

createMagicTranslate akzeptiert diese Optionen:

Option	Beschreibung
`apiKey`	Erforderlich. Dein Magic Translate API-Schlüssel.
`language`	Erforderlich. Die Sprache, in die dein Inhalt übersetzt wurde, zum Beispiel `'de'`.
`sourceLanguage`	Die Sprache, in der deine Vorlagen geschrieben sind. Es wird automatisch erkannt, also stelle es nur ein, wenn die Erkennung falsche Ergebnisse liefert.
`formality`	`'formal'` oder `'informal'`. Nicht für alle Sprachen unterstützt. Du kannst es für jede Übersetzung überschreiben.
`debug`	Protokolliert die Anfragen auf der Konsole.

Sprachen ändern

useLanguageSwitcher liest und ändert die aktuelle Sprache. Jede <T>-Komponente und t-Funktion wird automatisch aktualisiert.

<script setup lang="ts">
import { useLanguageSwitcher } from '@magic-translate/vue';

const { currentLanguage, setLanguage } = useLanguageSwitcher();
</script>

<template>
  <div>Current language is: {{ currentLanguage }}</div>
  <button @click="setLanguage('de')">German</button>
</template>

currentLanguage ist eine schreibgeschützte Referenz, du kannst sie also auch in computed und watch verwenden.

Nuxt

Um Magic Translate mit Nuxt zu verwenden, registriere es in einer Plugin-Datei:

// plugins/magic-translate.ts
import { createMagicTranslate } from '@magic-translate/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createMagicTranslate({
      apiKey: useRuntimeConfig().public.magicTranslateApiKey,
      language: 'de'
    })
  );
});

Die <T>-Komponente und die Funktion t werden im Browser übersetzt. Beim serverseitigen Rendern rendert der Server den Originalinhalt und er wird nach der Flüssigkeitszufuhr übersetzt.

Beispielprojekt

Du kannst ein Beispielprojekt auf GitHub finden und es live sehen.