Tolgee for Vue provides a simple API to create a multi-lingual Vue application. With Tolgee i18n library for Vue, you can enjoy all Tolgee i18n features.
To see Vue with Tolgee in action, check this example app.
npm i @tolgee/vue
Get started!
1. Create a project in Tolgee platform
Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.
2. Setup Tolgee integration
Install the npm packages.
npm i @tolgee/vue
Initialize Tolgee and use Vue plugin:
import { Tolgee, DevTools, VueTolgee, FormatSimple } from '@tolgee/vue';
const tolgee = Tolgee()
.use(DevTools())
.use(FormatSimple())
.init({
language: 'en',
apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
apiKey: process.env.VUE_APP_TOLGEE_API_KEY,
});
...
app.use(VueTolgee, { tolgee });
And use Tolgee provider:
<template>
<TolgeeProvider>
<template v-slot:fallback>
<div>Loading...</div>
</template>
<App />
</TolgeeProvider>
</template>
3. Use T component to translate your texts
<template>
<T keyName="translation_key" defaultValue="Translate me!" />
</template>
Now you are able to Alt + Click & translate your texts!