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

**URL:** <https://help.galaxyproject.org/t/how-to-make-i18n-work-for-galaxys-vue-template/5275>\
**Category:** usegalaxy.org support\
**Tags:** devops-administration, galaxy-local\
**Created:** [January 26, 2021, 2:36am UTC](https://help.galaxyproject.org/t/how-to-make-i18n-work-for-galaxys-vue-template/5275 "2021-01-26T02:36:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![istevenshen](https://sea2.discourse-cdn.com/flex020/user_avatar/help.galaxyproject.org/istevenshen/32/48_2.png) [@istevenshen](https://help.galaxyproject.org/u/istevenshen)\
**Post date:** [January 26, 2021, 2:36am UTC](https://help.galaxyproject.org/t/how-to-make-i18n-work-for-galaxys-vue-template/5275/1 "2021-01-26T02:36:40Z")

</div>

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?

```auto
<template>
    <b-modal
        v-model="modalShow"
        :static="modalStatic"
        header-class="no-separator"
        modal-class="ui-modal"
        dialog-class="upload-dialog"
        body-class="upload-dialog-body"
        ref="modal"
        no-enforce-focus
        hide-footer
        :id="id"
    >
        <template v-slot:modal-header>
            <h4 class="title" tabindex="0">{{ title }}</h4>
        </template>
        <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>
            <b-tab title="Composite" id="composite" button-id="tab-title-link-composite" v-if="showComposite">
                <composite :app="this" />
            </b-tab>
            <b-tab title="Collection" id="collection" button-id="tab-title-link-collection" v-if="showCollection">
                <collection :app="this" />
            </b-tab>
            <b-tab title="Rule-based" id="rule-based" button-id="tab-title-link-rule-based" v-if="showRules">
                <rules-input :app="this" />
            </b-tab>
        </b-tabs>
        <div v-else>
            <loading-span message="Loading required information from Galaxy server." />
        </div>
    </b-modal>
</template>

```

---

<div class="post-metadata">

**Author:** ![Nerdinacan](https://sea2.discourse-cdn.com/flex020/user_avatar/help.galaxyproject.org/nerdinacan/32/2098_2.png) [@Nerdinacan](https://help.galaxyproject.org/u/Nerdinacan)\
**Post date:** [January 26, 2021, 5:33pm UTC](https://help.galaxyproject.org/t/how-to-make-i18n-work-for-galaxys-vue-template/5275/2 "2021-01-26T17:33:29Z")

</div>

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>`

or  
`<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.)