Installation (Vue)

info

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

To install Tolgee Vue integration library run:

npm

npm install @tolgee/vue

yarn

yarn add @tolgee/vue

pnpm

pnpm install @tolgee/vue

First initialize Tolgee and use VueTolgee.

import { Tolgee, DevTools, VueTolgee, FormatSimple } from '@tolgee/vue';

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'en',

    // for development
    apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
    apiKey: process.env.VUE_APP_TOLGEE_API_KEY,

    // for production
    staticData: {
      ...
    }
  });

...

app.use(VueTolgee, { tolgee });

Check Initialization for more info.

VueTolgee plugin makes $t function globally available.

Wrap your application with TolgeeProvider component. TolgeeProvider will start tolgee at correct moment and waits for initial data to be loaded. You can provide fallback slot, to show custom loader while translations are being loaded.

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

If you bootstrapped your application with vue-cli, your .env.development.local file should look like this:

VUE_APP_TOLGEE_API_URL=https://app.tolgee.io
VUE_APP_TOLGEE_API_KEY=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc

Otherwise, you can set the properties directly, or you can use plugins like dotenv-webpack plugin.

Obtaining Tolgee API key is described in Integration chapter.

Preparing for production

In production mode, you should never use localization data from Tolgee REST API and never leak your API key. You should use data exported from the Tolgee platform. To get exported localization files, see exporting translations.

Then provide the data via Tolgee configuration options described in Providing static data.