Installation (Vue)
Check our Vue example application
To install Tolgee Vue integration library run:
- npm
- yarn
- pnpm
npm install @tolgee/vue
yarn add @tolgee/vue
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: import.meta.env.VITE_APP_TOLGEE_API_URL,
apiKey: import.meta.env.VITE_APP_TOLGEE_API_KEY,
// for production
staticData: {
...
}
});
...
app.use(VueTolgee, { tolgee });
Check all tolgee options and tolgee plugins.
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:
VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
VITE_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
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:
- Tolgee Content Delivery - translations are loaded dynamically from fast and reliable storage
- Providing localization files directly - your translations are bundled with your code
In production mode, you should never use localization data directly from Tolgee REST API, because it can negatively affect your page performance.