Vue

Comment utiliser Magic Translate dans les applis Vue. Le client Vue nécessite Vue 3.3 ou une version plus récente et fonctionne également avec Nuxt.

Installation

Installe le client Vue pour Magic Translate dans ton application.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Ensuite, installe le plugin dans ton application.

// 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 tu n'as pas encore de clé API, inscris-toi à Magic Translate pour en obtenir une.

Tu peux désormais utiliser le composant <T> dans n'importe quel modèle. Le plugin l'enregistre dans le monde entier.

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

C'est ça. Ton application peut désormais être traduite dans plus de 70 langues.

Configuration

createMagicTranslate accepte les options suivantes :

Option	Description
`apiKey`	Obligatoire. Ta clé API Magic Translate.
`language`	Obligatoire. La langue dans laquelle ton contenu est traduit, par exemple `'de'`.
`sourceLanguage`	La langue dans laquelle tes modèles sont écrits. Il est détecté automatiquement, donc ne le règle que si la détection donne de mauvais résultats.
`formality`	`'formal'` ou `'informal'`. Non disponible dans toutes les langues. Tu peux le modifier pour chaque traduction.
`debug`	Enregistre les demandes sur la console.

Changer de langue

useLanguageSwitcher lit et change la langue actuelle. Chaque composant <T> et chaque fonction t sont mis à jour automatiquement.

<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 est une référence en lecture seule, tu peux donc également l'utiliser dans computed et watch.

Nuxt

Pour utiliser Magic Translate avec Nuxt, enregistre-le dans un fichier 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'
    })
  );
});

Le composant <T> et la fonction t sont traduits dans le navigateur. Avec le rendu côté serveur, le serveur affiche le contenu original, qui est traduit une fois hydraté.

Exemple de projet

Tu peux trouver un exemple de projet sur GitHub et le suivre en direct.