Vue integration (i18next)

info

This integration is for Vue 2

Check our i18next example application

For integration with Vue we use @panter/vue-i18next integration + we recommend also use ICU message formatter as that is supported on Tolgee platform natively:

npm

npm install @panter/vue-i18next i18next-icu

yarn

yarn add @panter/vue-i18next i18next-icu

pnpm

pnpm install @panter/vue-i18next i18next-icu

And then use following setup:

import { withTolgee, I18nextPlugin, DevTools } from '@tolgee/i18next';
import i18next from 'i18next';
import ICU from 'i18next-icu';
import VueI18Next from '@panter/vue-i18next';

Vue.use(VueI18Next);

const tolgee = Tolgee().use(DevTools()).use(I18nextPlugin()).init({
  apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
  apiKey: process.env.VUE_APP_TOLGEE_API_KEY,
});

withTolgee(i18next, tolgee)
  .use(ICU)
  .init({
    lng: 'en', // or use i18next language detector
    supportedLngs: ['cs', 'en', 'fr', 'de'],
  });

const i18n = new VueI18Next(i18next);

new Vue({
  i18n,
  ...
}).$mount('#app');

Now you can use regular @panter/vue-i18next.