Vue

Cách sử dụng Magic Translate trong các ứng dụng Vue. Ứng dụng khách Vue yêu cầu Vue 3.3 hoặc mới hơn và cũng hoạt động với Nuxt.

Lắp đặt

Cài đặt ứng dụng Vue cho Magic Translate trong ứng dụng của bạn.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Sau đó cài đặt plugin trong ứng dụng của bạn.

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

Nếu bạn chưa có khóa API, hãy đăng ký Magic Translate để nhận khóa.

Bây giờ bạn có thể sử dụng thành phần <T> trong bất kỳ mẫu nào. Plugin đăng ký nó trên toàn cầu.

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

Đó là nó. Ứng dụng của bạn hiện có thể được dịch sang hơn 70 ngôn ngữ.

Cấu hình

createMagicTranslate chấp nhận các tùy chọn sau:

Thay đổi ngôn ngữ

useLanguageSwitcher đọc và thay đổi ngôn ngữ hiện tại. Mỗi thành phần <T> và hàm t cập nhật tự động.

<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 là một tham chiếu chỉ đọc, vì vậy bạn cũng có thể sử dụng nó trong computed và watch.

Nuxt

Để sử dụng Magic Translate với Nuxt, hãy đăng ký nó trong một tập tin 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'
    })
  );
});

Thành phần <T> và hàm t dịch trong trình duyệt. Với kết xuất phía máy chủ, máy chủ hiển thị nội dung gốc và nó được dịch sau khi hydrat hóa.

Dự án ví dụ

Bạn có thể tìm thấy một dự án ví dụ trên GitHub và xem nó trực tiếp.