Django makemessages to get custom translatable strings - django

Question

In my Django project I use Vue + vue-gettext for i18n.
To make translatable strings I have the following code in my my .vue files:
<translate>Hello %{name}</translate>
<a href="..." v-translate>Click here</a>
(using translate tags and v-translate attributes)
Is there a way to configure manage.py makemessages to parse this code as well? By default it does not look into .vue files or parse this i18n code format.

Answer 1

Basically I ended up having a Makfile - that extracts messages from vue files and then merges it with django
# On OSX the PATH variable isn't exported unless "SHELL" is also set, see: http://stackoverflow.com/a/25506676
SHELL = /bin/bash
NODE_BINDIR = ./node_modules/.bin
export PATH := $(NODE_BINDIR):$(PATH)
INPUT_DIR = static/js
# Where to write the files generated by this makefile.
OUTPUT_DIR = .
# Available locales for the app.
LOCALES = en nl fr
# Name of the generated .po files for each available locale.
LOCALE_FILES ?= $(patsubst %,$(OUTPUT_DIR)/locale/%/LC_MESSAGES/app.po,$(LOCALES))
GETTEXT_HTML_SOURCES = $(shell find $(INPUT_DIR) -name '*.vue' -o -name '*.html' 2> /dev/null)
GETTEXT_JS_SOURCES = $(shell find $(INPUT_DIR) -name '*.vue' -o -name '*.js')
# Makefile Targets
.PHONY: clean makemessages
clean:
rm -f /tmp/template.pot
makemessages: clean django_makemessages /tmp/template.pot
django_makemessages:
./manage.py makemessages $(patsubst %,-l %,$(LOCALES))
# Create a main .pot template, then generate .po files for each available language.
# Thanx to Systematic: https://github.com/Polyconseil/systematic/blob/866d5a/mk/main.mk#L167-L183
/tmp/template.pot: $(GETTEXT_HTML_SOURCES)
# `dir` is a Makefile built-in expansion function which extracts the directory-part of `$#`.
# `$#` is a Makefile automatic variable: the file name of the target of the rule.
# => `mkdir -p /tmp/`
mkdir -p $(dir $#)
which gettext-extract
# Extract gettext strings from templates files and create a POT dictionary template.
gettext-extract --attribute v-translate --quiet --output $# $(GETTEXT_HTML_SOURCES)
# Extract gettext strings from JavaScript files.
xgettext --language=JavaScript --keyword=npgettext:1c,2,3 \
--from-code=utf-8 --join-existing --no-wrap \
--package-name=$(shell node -e "console.log(require('./package.json').name);") \
--package-version=$(shell node -e "console.log(require('./package.json').version);") \
--output $# $(GETTEXT_JS_SOURCES)
# Generate .po files for each available language.
#for lang in $(LOCALES); do \
export PO_FILE=$(OUTPUT_DIR)/locale/$$lang/LC_MESSAGES/djangojs.po; \
echo "msgmerge --update $$PO_FILE $#"; \
mkdir -p $$(dirname $$PO_FILE); \
[ -f $$PO_FILE ] && msgmerge --lang=$$lang --update --backup=off $$PO_FILE $# || msginit --no-translator --locale=$$lang --input=$# --output-file=$$PO_FILE; \
msgattrib --no-wrap --no-obsolete -o $$PO_FILE $$PO_FILE; \
done;

Answer 2

I don't use vue-gettext since Django provides the JavaScriptCatalog view but I still faced the same issues with makemessages not picking up translation string in templates.
Using Django 4, Vue 3, and gettext 0.21 I made my own makemessages management command that overrides the Django's built-in one
from django.core.management.commands import makemessages
class Command(makemessages.Command):
"""
Overrides the default `makemessages` to add my own configuration & extend the command to recognize `interpolate` keyword in JS source files
"""
def handle(self, *args, **kwargs):
# Disable writing of the string's source file location in the generate po file
kwargs['no_location'] = True
# Ignore node_modules by default
kwargs['ignore_patterns'] = ['node_modules/*']
if kwargs['domain'] == 'djangojs':
# Set the default extensions
kwargs['extensions'] = kwargs['extensions'] or []
kwargs['extensions'].append('.js')
kwargs['extensions'].append('.vue')
self.xgettext_options.append('--keyword=interpolate')
# Set language to C so xgettext can pick up translations in Vue templates
self.xgettext_options.append('--language=C')
return super().handle(*args, **kwargs)
With default JavaScriptCatalog setup I have a js module that I import whenever I want to translate something
// Exports Django's `JavaScriptCatalog` functions dynamically
const djangoTranslationFns = [
'gettext',
'ngettext',
'get_format',
'gettext_noop',
'pgettext',
'npgettext',
'pluralidx',
];
const exports = {};
if (Object.keys(window).includes(djangoTranslationFns[0])) {
// If one of the functions are defined then it's safe to asumme they all are
djangoTranslationFns.forEach((fn) => { exports[fn] = window[fn]; });
// Override the interpolate function so it uses `gettext` by default
exports.interpolate = (fmt, obj, named) => window.interpolate(window.gettext(fmt), obj, named);
}
export default exports;
Then in the template
<script setup>
import i18n from '#/i18n';
</script>
<template>
<h1>{{ i18n.gettext("Welcome") }}</h1>
</template>