Vue
كيفية استخدام Magic Translate في تطبيقات Vue. يتطلب العميل Vue Vue 3.3 أو أحدث ويعمل مع Nuxt أيضًا.
التثبيت
قم بتثبيت عميل Vue لـ Magic Translate في تطبيقك.
# using npmnpm i @magic-translate/vue# using yarnyarn add @magic-translate/vue
ثم قم بتثبيت المكون الإضافي في تطبيقك.
// main.tsimport { 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.tsimport { createMagicTranslate } from '@magic-translate/vue';export default defineNuxtPlugin((nuxtApp) => {nuxtApp.vueApp.use(createMagicTranslate({apiKey: useRuntimeConfig().public.magicTranslateApiKey,language: 'de'}));});
يتم ترجمة المكون <T> ووظيفة t في المتصفح. من خلال العرض من جانب الخادم، يعرض الخادم المحتوى الأصلي، وتتم ترجمته بعد الترطيب.