Skip to main content
DiscordGithub Tolgee jSGithub Tolgee Server

Tolgee for Vue

Vue
+
love
=
love

Tolgee for Vue provides simple API to create 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 @tolgee/ui

In-context localization 🐁

Tolgee for Vue is not just an i18n library. It provides much more. With in-context localization feature, you can just Alt + Click translations in your app and translate them directly. No more extracting, no more editing of .jsons or .xliff.

Localization platform ☁️

Tolgee localization platform provides simple user interface where, you can edit all your localization string. So you don't have to worry about choosing other tool for editing your translations. Tolgee and it's SDKs is all you need to localize your app.

Simple integration 🎉

To integrate Tolgee to Vue project, you can just simply follow these docs, or use integration guides in Tolgee platform. You can do that in less than one minute.

Automated screenshot generation 📸

With in-context localization UI, you can take screenshots of your application and uploaded them to Tolgee platform just by single click.

Open-source 📖

Tolgee platform and integration libraries are open-source. So you can self-host it and be fine!

Get started!

info
Tolgee for Vue currently supports only Vue v3.

1. Create 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 @tolgee/ui

Then wrap your code with TolgeeProvider

<template>  <TolgeeProvider :config="config">    <YourApp />  </TolgeeProvider></template>
<script>import { TolgeeProvider } from '@tolgee/vue';import { UI } from '@tolgee/ui';
export default {  data() {    return {      config: {        apiUrl: 'https://app.tolgee.io',        apiKey: '<your api key>',        ui: UI      },    };  },};</script>

3. Use T component to translate your texts

<template>  <T keyName="translation_key">Translate me!</T></template>

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...