2

I’ve been researching on how to translate my vue project but I’m getting kinda stuck. I’ve been asked to create a .po file (that I can then use in poedit or something similar).

I’ve tried implementing vue-gettext but I’m a bit confused on how to work it. I’ve added easygettext as needed but I keep getting module errors:

./node_modules/easygettext/src/extract-cli.js
Module parse failed: Unexpected character '#' (1:0)

I tried to fix it by adding BannerPlugin(as per this suggestion: How to keep my shebang in place using webpack?) in both webpack.dev.conf.js and webpack.prod.conf.js:

require('webpack').BannerPlugin

plugins: [
    new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
...

but I'm still having the error.

additionally, it seems I need a translations.json file to use the vue-gettext plugin but it also looks like the translations.json is created after by gettext-compile so I'm unsure if I'm supposed to first create a json file of translations or what is needed.

So I’m wondering if anybody knows how to setup vue-gettext properly or if there are any alternatives to create .po files?

Thanks so much!

YJay
  • 91
  • 1
  • 12
  • There are several different ways to support languages in VueJS, but I understand that vue-gettext should work fine. And, of course, vue-gettext should fully support .po format files. SUGGESTION: Look here: https://vuejsexamples.com/translate-your-vue-js-applications-with-gettext/ Notice the step translating your .po into .json. – paulsm4 Aug 14 '20 at 04:45
  • @paulsm4 thanks so much! If I understand correctly, I can generate a .po by annotating the strings and then using easygettext to extract into .po file? – YJay Aug 14 '20 at 14:02
  • 1
    diff framework, but for an old and large angularjs proj we use the angular-gettext library, which has a corresponding grunt build tool (grunt-angular-gettext) that extracts translatable strings in your code into a .pot file. Then you use poedit to create/edit a po file for each language you wish. That gives you the en_US.po file, for instance. The grunt build tool takes that po file and creates an en_US.json file in your target folder, which is loaded into the browser. Last i checked, nothing for vue quite matches the capability of angular-gettext. – JesseDahl Sep 16 '20 at 04:59

0 Answers0