Localization in Vue Mention component

16 Mar 20234 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate  properties according to the culture currently assigned to the Mention.

Locale key en-US (default)
noRecordsTemplate No records found

Loading translations

To load the translation object to your application, use the load function of the L10n class.

In the following sample, French culture is set to the mention component and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture initially.

<template>
    <div id="app">
        <label id="comment" >Comments</label>
        <div id="mentionElement" placeholder = "Type @ and tag user"></div>
        <ejs-mention id='defaultMention' :target='target' :dataSource='customerData' :fields='fields' :query='query' locale='fr-BE'></ejs-mention>
    </div>
</template>

<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { L10n, setCulture} from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
Vue.use(MentionPlugin);

export default {
    data: function() {
        L10n.load({
            'fr-BE': {
                'dropdowns': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé"
                }
            }
        });
        return {
            customerData: new DataManager({
                url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
                adaptor: new ODataV4Adaptor,
                crossDomain: true
            }),
            fields: { text: 'ContactName', value: 'CustomerID' },
            query: new Query().select(['ContactName', 'CustomerID']).take(0),
            target: "#mentionElement"
        };
    }
}
</script>

<style>

    @import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

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

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }
</style>