التوثيق

Vue

كيفية استخدام Magic Translate في تطبيقات Vue. يتطلب العميل Vue Vue 3.3 أو أحدث ويعمل مع Nuxt أيضًا.

التثبيت

قم بتثبيت عميل Vue لـ Magic Translate في تطبيقك.

# using npm
npm i @magic-translate/vue
# using yarn
yarn add @magic-translate/vue

ثم قم بتثبيت المكون الإضافي في تطبيقك.

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

إذا لم يكن لديك مفتاح API حتى الآن، فقم بالتسجيل في Magic Translate للحصول على واحد.

يمكنك الآن استخدام المكون <T> في أي قالب. يقوم المكون الإضافي بتسجيله عالميًا.

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

هذا كل شيء. يمكن الآن ترجمة تطبيقك إلى أكثر من 70 لغة.

التكوين

createMagicTranslate يقبل هذه الخيارات:

خياروصف
apiKeyمطلوب. مفتاح واجهة برمجة التطبيقات Magic Translate الخاص بك.
languageمطلوب. اللغة التي تتم ترجمة المحتوى الخاص بك إليها، على سبيل المثال 'de'.
sourceLanguageاللغة التي تمت كتابة القوالب بها. يتم اكتشافه تلقائيًا، لذا قم بتعيينه فقط إذا أعطى الاكتشاف نتائج خاطئة.
formality'formal' أو 'informal'. غير مدعوم لجميع اللغات. يمكنك تجاوزها لكل ترجمة.
debugيقوم بتسجيل الطلبات إلى وحدة التحكم.

تغيير اللغات

useLanguageSwitcher يقرأ ويغير اللغة الحالية. يتم تحديث كل مكون <T> ووظيفة t تلقائيًا.

<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 هو مرجع للقراءة فقط، لذا يمكنك استخدامه أيضًا في computed و watch.

Nuxt

لاستخدام Magic Translate مع Nuxt، قم بتسجيله في ملف مكون إضافي:

// 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> ووظيفة t في المتصفح. من خلال العرض من جانب الخادم، يعرض الخادم المحتوى الأصلي، وتتم ترجمته بعد الترطيب.

مشروع مثال

يمكنك العثور على مثال لمشروع على GitHub ومشاهدته مباشرة.