I18n

Olotap supports English, Turkish languages by default. If you want Olotap to support more languages, you can contribute by adding the languages you know to Olotap from our github repo address.

• To add a new translation, translate the i18n/locales/en.js file from below and send it to us.

//github.com/olomadev/olotap-demo/blob/main/src/i18n/locales/en.json

Requirements

Olotap requires the vue-18n package for translation operations to work properly.

npm install vue-i18n

Configurations

Even if the Vue-i18n package is installed, translation operations may not work properly if the correct definitions are not made. Make sure the following folders are present in your project.

├── olotap-test
├── node-modules
├── public
├── src
│   ├── i18n
│   │   ├── locales
│   │   │   ├── en.js
│   │   │   ├── tr.js
│   ├── index.js

Your i18n/index.js file should look like this.

i18n/index.js

import { createI18n } from "vue-i18n";
/**
 * app messages
 */
import _en from "./locales/en.json";
import _tr from "./locales/tr.json";

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  legacy: false,
  globalInjection: true,
  // forceStringify: false,
  messages: { tr: _tr, en: _en },
  runtimeOnly: false,
});
/**
 * import locales
 */
export default i18n;

Adding New Translation File

For example, to add a German language file, create a de.json file as follows.

├── olotap-test
├── node-modules
├── public
├── src
│   ├── i18n
│   │   ├── locales
│   │   │   ├── en.js
│   │   │   ├── tr.js
│   │   │   ├── de.js
│   ├── index.js

Copy the default language, en.json, and paste it into de.json, and convert all values to the new language as follows.

/i18n/locales/de.json

{
  "locale": {
    "en": "English",
    "tr": "Türkçe",
    "de": "German"
  },
  "editor": {
    "placeholder": "Geben Sie hier Ihren Inhalt ein...",
    "remove": "Entfernen",
    "words": "Worte",
    // ......
  }
}

Finally, you need to add this new language to your i18n/index.js file as follows.

import { createI18n } from "vue-i18n";
/**
 * app messages
 */
import _en from "./locales/en.json";
import _tr from "./locales/tr.json";
import _de from "./locales/de.json";

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  legacy: false,
  globalInjection: true,
  // forceStringify: false,
  messages: { tr: _tr, en: _en, de: _de },
  runtimeOnly: false,
});
/**
 * import locales
 */
export default i18n;

Switching Languages

For language switching to work reactively, make sure that the :key="getEditorKey" line is defined in your editor.

<template>
  <OlotapEditor 
    v-if="created && extensions.length > 0"
    :extensions="extensions"
    ref="editorRef"
    :key="getEditorKey"
  >
  </OlotapEditor>

  <v-select
    color="primary"
    density="compact"
    variant="outlined"
    label="Select Language"
    :items="['en', 'tr']"
    v-model="lang"
  ></v-select>
</template>

and the getEditorKey() function must be defined in a computed methods as follows.

computed: {
  getEditorKey() {
    return "olotap_" + i18n.global.locale.value;
  }
},