Документация

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Обязательно. Ваш ключ API 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 и посмотреть его вживую.

ПредыдущееПредварительная визуализацияСледующийКомпонент <T>