Tolgee for Vue

Vue integration library of Tolgee.

Currently we support vue v3 only

Features

• All in One localization solution for your JS application 🙌
• Out of box in-context localization 🎉
• Automated screenshot generation 📷
• Translation management platform 🎈
• Open-source 🔥

Installation

First, install the package.

npm install @tolgee/vue @tolgee/ui

Then use the library in your app:

<template>
  <TolgeeProvider :config="config">
    <YourApp />
  </TolgeeProvider>
</template>

<script>
  import { TolgeeProvider } from '@tolgee/vue';
  import { UI } from '@tolgee/ui';

  ...

  export default {
    ...
    data() {
      return {
        config: {
          apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
          apiKey: process.env.VUE_APP_TOLGEE_API_KEY,
          ui: process.env.VUE_APP_TOLGEE_API_KEY ? UI : undefined,
        },
      };
    },
  };
</script>

T component

<template>
  <T keyName="translation_key" />
</template>

<script>
  import { T } from '@tolgee/vue';

  export default {
    components: { T },
  };
</script>

or with default value

<T keyName="translation_key">Default value</T>

TolgeeMixin for imperative translations

<template>
  <div title="$t('translation_key')">Hello</div>
</template>

<script>
  import { TolgeeMixin } from '@tolgee/vue';

  export default {
    mixins: [TolgeeMixin],
  };
</script>

or for language switching

<template>
  <select v-model="tolgeeLanguage">
    <option value="en">en</option>
    <option value="de">de</option>
  </select>
</template>

<script>
  export default {
    mixins: [TolgeeMixin],
  });
</script>

Prerequisites

1. You have some Vue based project
2. You have generated API key from Tolgee Cloud or self-hosted Tolgee instance.