Migrating to v5 (Vue)

In version 5, the core library was completely redesigned. Before you start, please read the general info about this new version.

Initialize Tolgee as described in core migration. Vue integration now uses Vue plugin API:

const tolgee = ...

...

app.use(VueTolgee, { tolgee });

...

<template>
  <TolgeeProvider>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>
    <Children />
  </TolgeeProvider>
</template>

Changing language

We've removed v4 useLanguage, it's now replaced by the more general hook useTolgee (read more).

<template>
  <select :value="tolgee.getLanguage()" v-on:change="changeLanguage">
    ...
  </select>
</template>

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

  const tolgee = useTolgee(['language']);

  const changeLanguage = (e) => {
    tolgee.value.changeLanguage(e.target.value);
  };
</script>

Translating

You can now use the global $t function, which is available through Vue plugin.

<template>
  <div :title="$t('key')">...</div>
</template>

Or use useTranslate composable, which is useful with namespaces.

TolgeeMixin was removed completely.