Vue

Cara menggunakan Magic Translate di aplikasi Vue. Klien Vue membutuhkan Vue 3.3 atau yang lebih baru dan bekerja dengan Nuxt juga.

Instalasi

Instal klien Vue untuk Magic Translate di aplikasi Anda.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Kemudian instal plugin di aplikasi Anda.

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

Jika Anda belum memiliki kunci API, daftar Magic Translate untuk mendap atkannya.

Sekarang Anda dapat menggunakan komponen <T> di template apa pun. Plugin mendaftarkannya secara global.

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

Itu saja. Aplikasi Anda sekarang dapat diterjemahkan ke lebih dari 70 bahasa.

Konfigurasi

createMagicTranslate menerima opsi ini:

Opsi	Deskripsi
`apiKey`	Diperlukan. Kunci API Magic Translate Anda.
`language`	Diperlukan. Bahasa yang diterjemahkan konten Anda, misalnya `'de'`.
`sourceLanguage`	Bahasa yang digunakan templat Anda ditulis. Ini terdeteksi secara otomatis, jadi hanya mengatur jika deteksi memberikan hasil yang salah.
`formality`	`'formal'` atau `'informal'`. Tidak didukung untuk semua bahasa. Anda dapat mengesampingkannya untuk setiap terjemahan.
`debug`	Mencatat permintaan ke konsol.

Mengubah bahasa

useLanguageSwitcher membaca dan mengubah bahasa saat ini. Setiap komponen <T> dan fungsi t diperbarui secara otomatis.

<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 adalah referensi read-only, jadi Anda juga dapat menggunakannya di computed dan watch.

Nuxt

Untuk menggunakan Magic Translate dengan Nuxt, daftarkan dalam file plugin:

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

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

Komponen <T> dan fungsi t diterjemahkan di browser. Dengan rendering sisi server, server merender konten asli, dan diterjemahkan setelah hidrasi.

Contoh proyek

Anda dapat menemukan contoh proyek di GitHub dan melihatnya langsung.