Vue

How to use Magic Translate in Vue apps. The Vue client requires Vue 3.3 or newer and works with Nuxt too.

Installation

Install the Vue client for Magic Translate in your app.

# using npm
npm i @magic-translate/vue

# using yarn
yarn add @magic-translate/vue

Then install the plugin in your 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');

If you don't have an API key yet, sign up for Magic Translate to get one.

Now you can use the <T> component in any template. The plugin registers it globally.

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

That's it. Your app can now be translated into over 70 languages.

Configuration

createMagicTranslate accepts these options:

Option	Description
`apiKey`	Required. Your Magic Translate API key.
`language`	Required. The language your content is translated into, for example `'de'`.
`sourceLanguage`	The language your templates are written in. It is detected automatically, so only set it if detection gives wrong results.
`formality`	`'formal'` or `'informal'`. Not supported for all languages. You can override it for each translation.
`debug`	Logs the requests to the console.

Changing languages

useLanguageSwitcher reads and changes the current language. Every <T> component and t function updates automatically.

<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 is a read-only ref, so you can also use it in computed and watch.

Nuxt

In Nuxt, install the plugin in a Nuxt 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'
    })
  );
});

The <T> component and the t function translate in the browser. With server-side rendering, the server renders the original content, and it is translated after hydration.

Example project

You can find an example project on GitHub and see it live.