Vue

Come usare Magic Translate nelle app Vue. Il client Vue richiede Vue 3.3 o versioni successive e funziona anche con Nuxt.

Installazione

Installa il client Vue per Magic Translate nella tua app.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Quindi installa il plug-in nella tua app.

// 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 non hai ancora una chiave API, iscriviti a Magic Translate per ottenerne una.

Ora puoi usare il componente <T> in qualsiasi modello. Il plugin lo registra a livello globale.

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

Questo è tutto. La tua app ora può essere tradotta in oltre 70 lingue.

Configurazione

createMagicTranslate accetta queste opzioni:

Opzione	Descrizione
`apiKey`	Obbligatorio. La tua chiave API Magic Translate.
`language`	Obbligatorio. La lingua in cui vengono tradotti i tuoi contenuti, ad esempio `'de'`.
`sourceLanguage`	La lingua in cui sono scritti i tuoi modelli. Viene rilevato automaticamente, quindi impostalo solo se il rilevamento dà risultati errati.
`formality`	`'formal'` o `'informal'`. Non supportato per tutte le lingue. Puoi sostituirlo per ogni traduzione.
`debug`	Registra le richieste nella console.

Cambiare lingua

useLanguageSwitcher legge e cambia la lingua corrente. Ogni componente <T> e ogni funzione t si aggiornano 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 è un riferimento di sola lettura, quindi puoi usarlo anche in computed e watch.

Nuxt

Per usare Magic Translate con Nuxt, registralo in un file di 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'
    })
  );
});

Il componente <T> e la funzione t si traducono nel browser. Con il rendering lato server, il server esegue il rendering del contenuto originale e viene tradotto dopo l'idratazione.

Esempio di progetto

Puoi trovare un progetto di esempio su GitHub e vederlo dal vivo.