Vue

Como usar Magic Translate em Vue aplicativos. O cliente Vue requer Vue 3.3 ou mais recente e também funciona com Nuxt.

Instalação

Instale o cliente Vue para Magic Translate em seu aplicativo.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Em seguida, instale o plug-in em seu aplicativo.

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

Se você ainda não tem uma chave de API, inscreva-se no Magic Translate para obter uma.

Agora você pode usar o componente <T> em qualquer modelo. O plugin o registra globalmente.

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

É isso mesmo. Seu aplicativo agora pode ser traduzido para mais de 70 idiomas.

Configuração

createMagicTranslate aceita as seguintes opções:

Opção	Descrição
`apiKey`	Obrigatório. Sua chave de API Magic Translate.
`language`	Obrigatório. O idioma para o qual seu conteúdo foi traduzido, por exemplo, `'de'`.
`sourceLanguage`	O idioma em que seus modelos são escritos. Ele é detectado automaticamente, portanto, defina-o somente se a detecção der resultados errados.
`formality`	`'formal'` ou `'informal'`. Não é compatível com todos os idiomas. Você pode substituí-lo para cada tradução.
`debug`	Registra as solicitações no console.

Alterando idiomas

useLanguageSwitcher lê e altera o idioma atual. Cada componente <T> e cada função t são atualizados automaticamente.

<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 é uma referência somente para leitura, então você também pode usá-la em computed e watch.

Nuxt

Para usar Magic Translate com Nuxt, registre-o em um arquivo de plug-in:

// plugins/magic-translate.ts
import { createMagicTranslate } from '@magic-translate/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createMagicTranslate({
      apiKey: useRuntimeConfig().public.magicTranslateApiKey,
      language: 'de'
    })
  );
});

O componente <T> e a função t são traduzidos no navegador. Com a renderização do lado do servidor, o servidor renderiza o conteúdo original e ele é traduzido após a hidratação.

Exemplo de projeto

Você pode encontrar um exemplo de projeto no GitHub e vê-lo ao vivo.