Vue

Cómo usar Magic Translate en las aplicaciones Vue. El cliente Vue necesita Vue 3.3 o posterior y también funciona con Nuxt.

Instalación

Instala el cliente Vue para Magic Translate en tu aplicación.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Luego instala el complemento en tu aplicació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');

Si aún no tienes una clave de API, regístrate en Magic Translate para conseguir una.

Ahora puedes usar el componente <T> en cualquier plantilla. El complemento lo registra en todo el mundo.

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

Eso es todo. Tu aplicación ahora se puede traducir a más de 70 idiomas.

Configuración

createMagicTranslate acepta estas opciones:

Opción	Descripción
`apiKey`	Necesario. Tu clave de API Magic Translate.
`language`	Necesario. El idioma al que está traducido tu contenido, por ejemplo, `'de'`.
`sourceLanguage`	El idioma en el que están escritas tus plantillas. Se detecta automáticamente, así que configúralo solo si la detección arroja resultados incorrectos.
`formality`	`'formal'` o `'informal'`. No es compatible en todos los idiomas. Puedes anularlo para cada traducción.
`debug`	Registra las solicitudes en la consola.

Cambiar de idioma

useLanguageSwitcher lee y cambia el idioma actual. Todos los componentes <T> y funciones t se actualizan automáticamente.

<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 es una referencia de solo lectura, así que también puedes usarla en computed y watch.

Nuxt

Para usar Magic Translate con Nuxt, regístralo en un archivo de 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'
    })
  );
});

El componente <T> y la función t se traducen en el navegador. Con el renderizado del lado del servidor, el servidor renderiza el contenido original y se traduce tras la hidratación.

Ejemplo de proyecto

Puedes encontrar un proyecto de ejemplo en GitHub y verlo publicado.