Localization in Vue Dialog component

11 Jun 20247 minutes to read

Localization library allows to localize the default text content of Dialog. In Dialog, The close button’s tooltip text alone will be localize based on culture.

Locale key	en-US (default)
close	Close

Loading translations

To load translation object in an application use load function of L10n class.

In the below sample, French culture is set to Dialog and change the close button’s tooltip text.

Composition API (~/src/App.vue)

<template>
    <div>
        <div id="target" class="control-section; position:relative" style="height:350px;">
            <!-- Render Button to open the Dialog -->
            <ejs-button id='modalbtn' v-on:click="btnClick">Open</ejs-button>
            <!-- Render Dialog -->
            <ejs-dialog ref="localeDialog" :header='header' :target='target' :width='width' :locale='locale'
                :showCloseIcon='true' :animationSettings='animationSettings' :content='content' :open="dlgOpen"
                :close="dlgClose">
            </ejs-dialog>
        </div>
    </div>
</template>
<script setup>

import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { L10n } from '@syncfusion/ej2-base';
import { onMounted, ref } from 'vue';

const localeDialog = ref(null);

L10n.load({
    'fr-BE': {
        'dialog': {
            'close': "Fermer"
        }
    }
});

const target = '#target';
const width = '335px';
const header = 'Dialogue';
const content = 'Dialogue avec la culture française.';
const animationSettings = { effect: 'None' };
const locale = 'fr-BE';

onMounted(() => {
    document.getElementById('modalbtn').focus();
});

const btnClick = () => {
    localeDialog.value.show();
};
const dlgClose = () => {
    document.getElementById('modalbtn').style.display = '';
};
const dlgOpen = () => {
    document.getElementById('modalbtn').style.display = 'none';
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.control-section {
    height: 100%;
    min-height: 200px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div>
    <div id="target" class="control-section; position:relative" style="height:350px;">
        <!-- Render Button to open the Dialog -->
        <ejs-button id='modalbtn' v-on:click="btnClick">Open</ejs-button>
        <!-- Render Dialog -->
        <ejs-dialog ref="localeDialog" :header='header' :target='target' :width='width' :locale='locale'  :showCloseIcon='true' :animationSettings='animationSettings' :content='content' :open="dlgOpen" :close="dlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'fr-BE': {
        'dialog': {
        'close': "Fermer"
        }
    }
});
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-dialog":DialogComponent
},
    data: function() {
        return {
            target: '#target',
            width: '335px',
            header: 'Dialogue',
            content: 'Dialogue avec la culture française.',
            animationSettings: { effect: 'None' },
            locale: 'fr-BE'
        }
    },
    mounted: function(){
        document.getElementById('modalbtn').focus();
    },
    methods: {
        btnClick: function() {
            this.$refs.localeDialog.show();
        },
        dlgClose: function() {
            document.getElementById('modalbtn').style.display = '';
        },
        dlgOpen: function() {
            document.getElementById('modalbtn').style.display = 'none';
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        min-height: 200px;
    }
</style>