How to translate text using gettext in vue?

Question

I have many component which contain static texts, I would like to translate these text from polish language to english language and vice versa using gettext plugin.

Here is how texts look in my components .

<h1>   {{ __('Mail kontaktowy') }}</h1>

<p>   {{ __('Dziękujemy za kontakt') }}</p>

<h3>   {{ __('Twoja wiadomość') }}</h3>

Solution I have tried according to documentations online

installed plugin:

 npm install vue-gettext

Here is configuration per my needs

// ES6
import Vue from 'vue'
import GetTextPlugin from 'vue-gettext'
import translations from './path/to/translations.json'

Vue.use(GetTextPlugin, {
  availableLanguages: {
    en_GB: 'British English',
    en_US: 'American English',
    pl_PL: 'Polish',
  },
  defaultLanguage: 'pl_PL',
  languageVmMixin: {
    computed: {
      currentKebabCase: function () {
        return this.current.toLowerCase().replace('_', '-')
      },
    },
  },
  translations: translations,
  silent: True,
})

HTML calling gettext to translate those texts

   <h1 v-translate>{{ __('Mail kontaktowy') }}</h1>

This does not work, what am i doing wrong in my implementations? Please help am new to vue , am strugling how get those text translated (assume i have a lot of static text).

Answer 1

I searched about vue-gettext and from the documentation here: https://vuejsexamples.com/translate-your-vue-js-applications-with-gettext/ , you can translate a text by using the translate component:

<translate>Hello!</translate>

or using the v-translate directive:

<span v-translate>Hello!</span>

I don't see the use of having the __ in your code, unless you have a function for that. I think this would work already:

<h1 v-translate>Mail kontaktowy</h1>