Django makemessages to get custom translatable strings

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;