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에서 예제 프로젝트를 찾아서 라이브로 볼 수 있어.