Leveraging xgettext for extracting translatable content from VueJS files

Question

Leveraging xgettext for extracting translatable content from VueJS files

Attempting to utilize xgettext for extracting translatable strings from a VueJS file has presented some challenges. Specifically, xgettext does not seem to recognize JavaScript code within a computed property in VueJS.

For instance, consider the following element in the <template>:

<input :placeholder="translator.gettext('Phone')" />

Unfortunately, this snippet goes unnoticed when executing xgettext with parameters such as:

xgettext --from-code=UTF-8 --language=JavaScript

On the other hand, if a translatable string is used within a function call, it is successfully identified. For example:

<div>{{ translator.gettext('This is picked up 1') }}</div>
<input :placeholder="translator.gettext('This is NOT picked up')" />
<div>{{ translator.gettext('This is picked up 2') }}</div>

In this case, the translatable string inside the input placeholder remains undetected, while the other two are recognized.

The issue seems to stem from xgettext treating content within an HTML property as a plain string, while VueJS interprets any value prefixed by a : as valid JavaScript execution.

Is there a solution or workaround that would enable xgettext to acknowledge this JavaScript code instead of simply treating it as a plain string?

javascript vue.js gettext xgettext

Answer 1

Answer №1

In my opinion, translating attributes may not be supported. One workaround could be to utilize a computed property for this purpose:

computed: {
   translatedPlaceholder () {
     return this.translator.gettext('This is a text')
   },
},

You can then integrate this computed property into your template like so:

<input :placeholder="translatedPlaceholder" />

Alternatively, you could create a custom filter for translation:

Vue.filter('translate', value => {
  return !value ? '' : Vue.prototype.translator.gettext(value.toString())
})

And then use it in your template as follows:

<input :placeholder="'This is a text' | translate" />

Answer 2

In my opinion, translating attributes may not be supported. One workaround could be to utilize a computed property for this purpose:

computed: {
   translatedPlaceholder () {
     return this.translator.gettext('This is a text')
   },
},

You can then integrate this computed property into your template like so:

<input :placeholder="translatedPlaceholder" />

Alternatively, you could create a custom filter for translation:

Vue.filter('translate', value => {
  return !value ? '' : Vue.prototype.translator.gettext(value.toString())
})

And then use it in your template as follows:

<input :placeholder="'This is a text' | translate" />

Answer 3

Answer №2

To tackle this issue, we took a unique approach by duplicating the /resources directory (which contains translations exclusively) to /resources-for-pot. We then proceeded to handle this temporary folder in the following manner:

1.) We copied *.js files (as the backend code also has translations) but removed lines that do not contain gettext( (including pgettext and npgettext), replacing them with empty lines to maintain an equal number of lines in the new JS file.

2.) Similarly, we copied *.vue files but omitted lines without gettext( content (including pgettext and npgettext), replacing them with empty lines to retain the original line count. Subsequently, non-empty lines containing translations were individually processed using jsdom https://www.npmjs.com/package/jsdom. We extracted all nodes using

nodes = (new JsDom(lineOld)).window.document.body.childNodes

, collected attribute values from each node, along with node.textContent, and combined everything using spaces. This resulted in a new line encompassing all translations from attributes, text nodes, and more.

3.) We scanned the /resources-for-pot directory using a customized parser in Poedit or directly through xgettext (utilizing Python as the language).

4.) Finally, we deleted the /resources-for-pot directory for clean-up purposes.

Answer 4

To tackle this issue, we took a unique approach by duplicating the /resources directory (which contains translations exclusively) to /resources-for-pot. We then proceeded to handle this temporary folder in the following manner:

1.) We copied *.js files (as the backend code also has translations) but removed lines that do not contain gettext( (including pgettext and npgettext), replacing them with empty lines to maintain an equal number of lines in the new JS file.

2.) Similarly, we copied *.vue files but omitted lines without gettext( content (including pgettext and npgettext), replacing them with empty lines to retain the original line count. Subsequently, non-empty lines containing translations were individually processed using jsdom https://www.npmjs.com/package/jsdom. We extracted all nodes using

nodes = (new JsDom(lineOld)).window.document.body.childNodes

, collected attribute values from each node, along with node.textContent, and combined everything using spaces. This resulted in a new line encompassing all translations from attributes, text nodes, and more.

3.) We scanned the /resources-for-pot directory using a customized parser in Poedit or directly through xgettext (utilizing Python as the language).

4.) Finally, we deleted the /resources-for-pot directory for clean-up purposes.

Leveraging xgettext for extracting translatable content from VueJS files

Answer №1

Answer №2

Similar questions

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

How to Test React Js API Calls with Jest?

Automatically populate a dropdown menu with options based on the user's birth date

Creating a function to manipulate an element on a different webpage

Steps for refreshing a React component following a data fetch operation

Having trouble with my jQuery .hover() code not running as expected

Is there a way to incorporate onComplete and onAbort callbacks with <router-link> similar to router.push(location, onComplete?, onAbort?)?

Using VueJS and Jest: A guide to testing and spying on methods triggered by watchers

Pattern for validating mobile numbers with extensions using regular expressions

Can Python's datetime object be used interchangeably with a JavaScript date object?

generate a cookie within a pop-up window

Leveraging the outcome of a Promise within webpack's configuration file

Sending numerous array values from datatables

Counting the number of visible 'li' elements on a search list: A guide

Challenging glitch in the JavaScript code

Transform C# ASPX to handlebars format

What is the best way to include temporary attributes on a mongoose object solely for the purpose of a response, without saving them to the database

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Steps to create a responsive array data in a Vue template

Attaching events to the window in Vue.js