Vue 3 Gettext

Functions

Translation functions are made available globally in <template> sections but can also be used in scripts.

Functions

$gettext

Simple message translation

<template>
  {{ $gettext("My message") }}
</template>

const { $gettext } = useGettext();

$gettext("My message");

Interpolation

<template>
  {{ $gettext("My message for %{ name }", { name: "Rudi" }) }}
</template>

$pgettext

Takes a translation context as the first argument

<template>
  {{ $pgettext("my_context", "My message") }}
</template>

const { $pgettext } = useGettext();

$pgettext("my_context", "My message");

Interpolation

<template>
  {{ $pgettext("my_context", "My message for %{ name }", { name: "Rudi" }) }}
</template>

$ngettext

Can be used to pluralize messages

<template>
  {{ $ngettext("apple", "apples", 5) }}
</template>

const { $ngettext } = useGettext();

$ngettext("apple", "apples", 5);

Interpolation

<template>
  {{ $ngettext("apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }}
</template>

$npgettext

Can be used to pluralize messages with a translation context

<template>
  {{ $npgettext("my_context", "apple", "apples", 5) }}
</template>

const { $npgettext } = useGettext();

$npgettext("my_context", "apple", "apples", 5);

Interpolation

<template>
  {{ $npgettext("my_context", "apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }}
</template>

$language

Provides access to the whole plugin, for example if you want to access the current language:

<template>
  {{ $language.current }}
</template>

const gettext = useGettext();

console.log(gettext.current);

$gettextInterpolate

This helper function has been made redundant since the translate functions now directly take interpolation parameters.

This is a helper function if you use parameters within your messages.

<template>
  {{ $gettextInterpolate($pgettext("My message for %{ name }"), { name: "Rudi" }) }}
</template>

const { interpolate } = useGettext();

interpolate($gettext("My message for %{ name }"), { name: "Rudi" });

custom translate function name

You can custom the translate function name by pass the globalProperties option to createGettext, see Configuration.

For example, if you want to use the WordPress style:

import { createGettext } from "vue3-gettext";

const gettext = createGettext({
  ...
  globalProperties: {
    gettext: ['$gettext', '__'],  // both support `$gettext`, `__` the two names
    ngettext: ['$ngettext', '_n'],
    pgettext: ['$pgettext', '_x'],
    npgettext: ['$npgettext', '_nx'],
  }
})

If you got a VSCode warning Property '{0}' does not exist on type '{1}'. ts(2339), consider add a gettext.d.ts file like this:

export { };
declare module 'vue' {
    interface ComponentCustomProperties {
        __: (msgid: string, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _x: (context: string, msgid: string, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _n: (msgid: string, plural: string, n: number, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _xn: (context: string, msgid: string, plural: string, n: number, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
    }
}

Html escaping

All the translation functions escape html by default and take a disableHtmlEscaping as their last parameter. If your translation messages or parameters contain html tags, you will have to set this to true and render the message using v-htmlopen in new window:

<template>
  <span v-html="$gettext('My %{name}', { name: '<b>Rudi</b>' }, true)"></span>
</template>

Be careful when using v-htmlopen in new window. Don't use it for user-provided content so you're not vulnerable for XSS attacks.