Quick Start

npm i vue3-gettext@next

Set up gettext in your main.ts/main.js:

import { createGettext } from "vue3-gettext";
import { createApp } from "vue";
import translations from "./src/language/translations.json";

const app = createApp(App);
app.use(createGettext({ translations }));

Use gettext functions in your application:

<span>{{ $gettext("Translate me") }}</span>

Add scripts to your package.json:

"scripts": {
  ...
  "gettext:extract": "vue-gettext-extract",
  "gettext:compile": "vue-gettext-compile",
}

npm run gettext:extract extracts translation keys from your code and creates .po files to translate.

npm run gettext:compile compiles the translated messages from the .po files to a .json to be used in your application.