Vue

Jak korzystać z Magic Translate w aplikacjach Vue. Klient Vue wymaga Vue 3.3 lub nowszego i współpracuje również z Nuxt.

Instalacja

Zainstaluj klienta Vue dla Magic Translate w swojej aplikacji.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Następnie zainstaluj wtyczkę w swojej aplikacji.

// 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');

Jeśli nie masz jeszcze klucza API, zarejestruj się w Magic Translate, aby go otrzymać.

Teraz możesz użyć komponentu <T> w dowolnym szablonie. Wtyczka rejestruje go globalnie.

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

To wszystko. Aplikację można teraz przetłumaczyć na ponad 70 języków.

Konfiguracja

createMagicTranslate akceptuje następujące opcje:

Opcja	Opis
`apiKey`	Wymagane. Twój klucz API Magic Translate.
`language`	Wymagane. Język, na który jest przetłumaczona treść, na przykład `'de'`.
`sourceLanguage`	Język, w którym zapisane są Twoje szablony. Jest wykrywany automatycznie, więc ustaw go tylko wtedy, gdy wykrycie daje błędne wyniki.
`formality`	`'formal'` lub `'informal'`. Nie jest obsługiwany we wszystkich językach. Możesz go zastąpić dla każdego tłumaczenia.
`debug`	Rejestruje żądania do konsoli.

Zmiana języków

useLanguageSwitcher odczytuje i zmienia bieżący język. Każdy składnik <T> i funkcja t aktualizuje się automatycznie.

<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 jest referencją tylko do odczytu, więc możesz go również używać w computed i watch.

Nuxt

Aby użyć Magic Translate z Nuxt, zarejestruj go w pliku wtyczki:

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

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

Komponent <T> i funkcja t tłumaczą się w przeglądarce. Dzięki renderowaniu po stronie serwera serwer renderuje oryginalną zawartość i jest ona tłumaczona po nawodnieniu.

Przykładowy projekt

Możesz znaleźć przykładowy projekt na GitHub i zobaczyć go na żywo.