Skip to main content
Version: 4.x.x

Installation

info

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

info

Tolgee for Vue currently supports only Vue v3.

To install Tolgee Vue integration library run:

npm install @tolgee/vue

First, you will need to wrap your application with TolgeeProvider component.

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

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

  export default {
    components: { TolgeeProvider },
    data() {
      return {
        config: {
          apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
          apiKey: process.env.VUE_APP_TOLGEE_API_KEY,
        },
      };
    },
  };
</script>

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=<your_api_key>

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.

Other configuration properties​

Configuration properties for all web integrations are similar. They are described in configuration section.