Vue

如何在 Vue 应用程序中使用 Magic Translate。Vue 客户端需要 Vue 3.3 或更高版本，也可以与 Nuxt 一起使用。

安装

在您的应用程序中安装 Magic Translate 的 Vue 客户端。

# 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 API 密钥。
`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 上找到一个示例项目并实时观看。