Skip to main content
Version: 5.x.x

Installation

To use Tolgee in your Vue application, you need to follow these steps:

  1. Install the Tolgee integration library
  2. Set up the environment variables
  3. Initialize Tolgee
  4. Add the Tolgee Provider
  5. Preparing for production

Install the Tolgee integration library​

To install Tolgee integration library, run the following command:

npm install @tolgee/vue

Set up the environment variables​

Once the library is installed, you need to initialize it. For initialization, you need the Tolgee API URL, and the Tolgee API Key. To generate the API Key, follow the step-by-step instructions mentioned on the API keys and PAT tokens page.

danger

Make sure you don't leak your API key. If the API key is leaked, visitors can edit the translations on your site.

After generating the API key, add these credentials. If you bootstrapped the Vue application using the vue-cli, add them to the .env.development.local file. Your .env.development.local should look like this:

VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
VITE_APP_TOLGEE_API_KEY=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc

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

Initialize Tolgee​

Next initialize Tolgee and use VueTolgee. The VueTolgee plugin makes $t function globally available.

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

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  // replace with .use(FormatIcu()) for rendering plurals, foramatted numbers, etc.
  .init({
    language: 'en',

    // for development
    apiUrl: import.meta.env.VITE_APP_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_APP_TOLGEE_API_KEY,

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

...

app.use(VueTolgee, { tolgee });

The above code does the following:

  • Imports the required classes, and plugins from the integration library.
  • Configures the Tolgee instance to use the DevTools and FormatSimple plugins, and initializes it using the credentials. It also sets the language to English.
  • Registers the VueTolgee plugin with the Vue application.

You can configure more options and plugins during initialization. Learn about these other options and Tolgee plugins in their respective documentation.

Add the Tolgee Provider​

Wrap your application with the TolgeeProvider component. TolgeeProvider will initialize tolgee when it is ready and waits for initial data to be load. You can also provide a fallback slot to show custom loader while translations are being loaded.

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

Preparing for production​

Tolgee will automatically omit DevTools from your bundle when you build your app for production. So it won't fetch translations directly from Tolgee Platform and it won't allow users to modify translations.

There are generally two ways how to use translations in production:

In production mode, you should never use localization data directly from Tolgee REST API, because it can negatively affect your page performance.

tip
You can also check the Vue example application to learn more.