Skip to main content
Version: 4.x.x

Preparing for production

danger

In production mode you should never use localization data from Tolgee REST API and you should never leak your API key.

info

You should use data exported from Tolgee platform. To get exported localization files, see Exporting translations doc page.

In production, you should set the API key to undefined and provide exported translations. You have multiple options how to provide static i18n data to TolgeeProvider component.

To provide your localization data using dynamic import, you will need to add providers for every supported language to TolgeeProvider's config prop.

<template>
  <TolgeeProvider :config="config">
    <App>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>
  </TolgeeProvider>
</template>

<script lang="ts">
...
export default defineComponent({
  data() {
    return {
      config: {
        preloadFallback: false,
        staticData: {
          en: () => import('../i18n/en.json'),
          de: () => import('../i18n/de.json'),
          fr: () => import('../i18n/fr.json'),
          cs: () => import('../i18n/cs.json'),
        },
        availableLanguages: ["en", "de", "cs", "fr"]
      },
    };
  },
});
</script>

To provide your localization data using dynamic import, you will need to provide an object of translations for every supported language to TolgeeProvider's config prop.

import enLang from '../i18n/en.json';
import deLang from '../i18n/de.json';
import csLang from '../i18n/cs.json';
import frLang from '../i18n/fr.json';

export default defineComponent({
  data() {
    return {
      config: {
        preloadFallback: false,
        staticData: {
          en: enLang,
          cs: csLang,
          de: deLang,
          fr: frLang,
        },
        availableLanguages: ['en', 'de', 'cs', 'fr'],
      },
    };
  },
});
info

To get full image of working Vue integration, check our Vue Example Application.