vue-gettext: xgettext fails with some .vue files [was: makefile ignore strings]

For webpack users that want to use “$gettext” etc in slots: I’ve created a webpack loader that plugs behind vue-loader, gets the compiled vue source code, runs GNU xgettext on that source code and emits a pot file for each vue component file. You can also use this for other files that are transpiled to javascript.

https://gist.github.com/narrowtux/6b745e9346db97cec7f122f5bdf9bba4

Hi. I’ve spotted that wrapping template markup with parentheses solves the problem. Also it allows us to use Inline expression. from #9 Unfortunately I’ve not found a solution to use Inline expression for props (<component :prop-name="$gettext('some text')"></component>) yet. I hope that this small trick with parentheses can help. So instead of

<template>
  <translate>text 1</translate>
  <p v-translate>text 2</p>
  <p>{{ text3 }}</p>
</template>

<script>
  export default {
    computed: {
      text3() {return this.$gettext('Text 3');}
    }
  }
</script>

we should wrap <template>

(<template>
  <translate>text 1</translate>
  <p v-translate>text 2</p>
  <!-- Inline expression. -->
  <p>{{ $gettext('Text 3') }}</p>
</template>)

It’s hack so some testing is needed.

I did find one bug in the xgettext parsing of .vue files. It has something to do with the amount of ‘/’ the file contains.

Suppose you have the following test.vue file:

<template>
	<div>
		<div></div>
	</div>
</template>

<script>
	export default {
		computed: {
			zoomLabel() {
				return this.$gettext('Zoom');
			}
		}
</script>

Running the command xgettext --language=JavaScript --keyword=npgettext:1c,2,3 --from-code=utf-8 --join-existing --no-wrap --output translations.pot test.vue will not extract the Zoom string in the translations.pot file.

However when you change the file to one of the following 2 templates, it will work!

<template>
	<div></div>
</template>

<script>
	export default {
		computed: {
			zoomLabel() {
				return this.$gettext('Zoom');
			}
		}
</script>

–> 2 / now because of the removal of one <div>

<template>
	<div>
		<div></div>
	</div>
</template>

<script>
	import foo from './foo';

	export default {
		computed: {
			zoomLabel() {
				return this.$gettext('Zoom');
			}
		}
</script>

–> 4 / now because of the import statement

Do mind I’m not counting the / in </script>.

@thujone25 If I counted well, your template also contains an odd number of /, so I think adding an element would probably resolve the issue, not only removing line 7 or 8. Of course it’s not an elegant solution to add extra elements but I don’t know anything about xgettext parsers.

As one other potential option for xgettext parsing of Vue files, I’ve created gettext-vue which integrates with xgettext-template to do some pretty basic parsing of Vue files.

The parsing is just done with some basic regexes (based on gettext-ejs) that might not handle more complicated parsing situations, but it seems to work well for our use-case. The parsing doesn’t take any context into account, so it’s just looking for any function calls named $t, $gettext, or $ngettext by default (although those keywords can be configured with xgettext-template). But this simplistic approach does mean it picks up references in both the <template> and <script> sections of Vue files, and it should also pick up the various syntaxes in the templates (eg, {{ $t('Hello') }} or <div v-bind:placeholder="$t('World')">).

So while this might not cover all parsing situations, hopefully it might be useful to others. And if we can improve the parsing for other situations, I’m open to pull requests or feedback.

Putting the <script> tag at the top of vue files solved the missing msgid problem for me.