How to make i18n work for Galaxy's vue template?

I want to customize the i18n of some galaxy pages, but I have encountered some problems, I hope to get your help.

I want to know how to make i18n work in Galaxy’s vue template. I see that title: _l("Using a Regular Expression") is used in some js files, but I don’t know how to write the i18n syntax of Galaxy’s vue template. For example, in the vue template below, I want to process Regular with i18n. What should I do?

        <template v-slot:modal-header>
            <h4 class="title" tabindex="0">{{ title }}</h4>
        <b-tabs v-if="ready">
            <b-tab title="Regular" id="regular" button-id="tab-title-link-regular" v-if="showRegular">
                <default :app="this" :lazy-load-max="50" :multiple="multiple" />
            <b-tab title="Composite" id="composite" button-id="tab-title-link-composite" v-if="showComposite">
                <composite :app="this" />
            <b-tab title="Collection" id="collection" button-id="tab-title-link-collection" v-if="showCollection">
                <collection :app="this" />
            <b-tab title="Rule-based" id="rule-based" button-id="tab-title-link-rule-based" v-if="showRules">
                <rules-input :app="this" />
        <div v-else>
            <loading-span message="Loading required information from Galaxy server." />

Assuming the component has been mounted via the standard mountVueComponent function from utils, then it will have access to the localization plugin. You should have access to a filter called “localize”, and a directive v-localize.

<h4 class="title" tabindex="0">{{ title | localize }}</h4>

<h4 class="title" tabindex="0" v-localize>{{ title }}</h4>

Should both work. If they don’t, then your component was not mounted properly by its author, but you can still get those features if you use the mixins from components/plugins/localization.

If you are supplying a value to an attribute and can’t use those in-line methods, then you can use the filter on the attribute itself like this:

<b-tab :title="'Composite' | localize" id="composite" button-id="tab-title-link-composite" v-if="showComposite"></b-tab>

(On a side note, I notice that this sample is taken from the Upload component which is currently being reworked, largely because the subviews mysteriously inject another component inside a component (:app=“this”) which, to my knowledge, is objectively wrong, and definitely problematic.)