Vue

Vue uygulamalarında Magic Translate nasıl kullanılır. Vue istemcisi Vue 3.3 veya daha yenisini gerektirir ve Nuxt ile de çalışır.

Kurulum

Magic Translate için Vue istemcisini uygulamanıza yükleyin.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Ardından eklentiyi uygulamanıza yükleyin.

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

Henüz bir API anahtarınız yoksa, bir tane almak için Magic Translate 'a kaydolun.

Artık <T> bileşenini herhangi bir şablonda kullanabilirsiniz. Eklenti bunu küresel olarak kaydeder.

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

İşte bu kadar. Uygulamanız artık 70'den fazla dile çevrilebilir.

Yapılandırma

createMagicTranslate şu seçenekleri kabul eder:

Seçenek	Açıklama
`apiKey`	Gerekli. Magic Translate API anahtarınız.
`language`	Gerekli. İçeriğinizin çevrildiği dil, örneğin `'de'`.
`sourceLanguage`	Şablonlarınızın yazıldığı dil. Otomatik olarak algılanır, bu nedenle yalnızca algılama yanlış sonuçlar verirse ayarlayın.
`formality`	`'formal'` veya `'informal'`. Tüm diller için desteklenmez. Her çeviri için geçersiz kılabilirsiniz.
`debug`	İstekleri konsola kaydeder.

Dilleri değiştirme

useLanguageSwitcher geçerli dili okur ve değiştirir. Her <T> bileşeni ve t işlevi otomatik olarak güncellenir.

<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 salt okunur bir referanstır, bu nedenle computed ve watch sürümlerinde de kullanabilirsiniz.

Nuxt

Magic Translate 'i Nuxt ile kullanmak için bir eklenti dosyasına kaydedin:

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

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

<T> bileşeni ve t işlevi tarayıcıda çevrilir. Sunucu tarafı oluşturma ile sunucu orijinal içeriği oluşturur ve hidrasyondan sonra çevrilir.

Örnek proje

GitHub 'da örnek bir proje bulabilir ve canlı olarak görebilirsiniz.