Internationalization

Internationalization (often abbreviated as I18N) refers to the design and development strategies employed to ensure a product can be easily adapted to various languages, regional differences, and technical requirements of a locale. It encompasses practices that prevent country- or language-specific biases in code and design. On the other hand, Localization (often abbreviated as L10N) is the subsequent process of adapting the internationalized product for a specific region or language by adding locale-specific components and translating text. To successfully internationalize a product, elements such as text, images, and functions should be externalized and designed to be easily switchable based on user or system locale. In line with our commitment to building a globally accessible design system, we will utilize Phrase as our primary tool for internationalization and localization processes. Phrase is a comprehensive translation and localization platform that streamlines the workflow, ensuring consistency and accuracy across different languages and regions. By integrating Phrase into our workflow, we can manage translations, collaborate with translators, and maintain a consistent user experience for audiences worldwide.

Content in Phrase should be up to date, managed and/or verified by respective Technical and Marketing Departments.

In our PohlCon Phrase account we have corresponding project repositories for translations per each project of PohlCon and one for Bauhaus Design System, that is a work in progress.

We provide a version of vue-i18n that is adapted to our needs and design requirements. In order to use it you need to integrate our configureI18n at the top level of your Vue application:

import { createApp } from 'vue';

import messages from '@intlify/unplugin-vue-i18n/messages';
import { configureI18n } from '@pohlcon/design-system';

import App from './App.vue';

const app = createApp(App)
  .use(configureI18n(messages, "de", true))
app.mount("#app");

Our function can be configured for individual needs:

export function configureI18n (
  /** */
  projectLocales?: I18nOptions['messages'],
  /** */
  defaultLanguage: 'en' | 'de' = 'en',
  /** */
  warnHtmlMessage: boolean = true
) {
  return createI18n({
    legacy: false,
    locale: defaultLanguage,
    fallbackLocale: 'en',
    globalInjection: true,
    warnHtmlMessage,
    messages: getDesignSystemLocales(projectLocales) as any,
  });
}

As can be seen, it uses the standard vue-i18n create-i18n function under the hood.

Default locale keys

Furthermore our function comes with pre-set locale keys (currently available in english and german).

{
  "actions": {
    "next": "Next",
    "back": "Back",
    "close": "Close",
    "cancel": "Cancel",
    "create": "Create",
    "save": "Save",
    "confirm": "Confirm",
    "go": "Go",
    "restart": "Restart",
    "login": "Login",
    "logout": "Logout",
    "send": "Send",
    "submit": "Submit"
  },
  "placeholder": {
    "search": "Type to search..."
  },
  "states": {
    "loading": "Loading...",
    "empty": "No data available",
    "error": "An error occurred"
  },
  "empty_states": {
    "ES401": {
      "title": "Unauthorized"
    },
    "ES403": {
      "title": "Forbidden"
    },
    "ES404": {
      "title": "Not found"
    },
    "ES408": {
      "title": "Request timeout"
    },
    "ES410": {
      "title": "Gone"
    },
    "ES500": {
      "title": "Internal server error"
    }
  },
  "combobox": {
    "addOption": "will be added",
    "canNotBeAdded": "Or add a new option by typing"
  },
  "languages": {
    "locales": {
      "ar": "Arabic",
      "cs": "Czech",
      "da": "Danish",
      "de": "German",
      "en": "English",
      "es": "Spanish",
      "fr": "French",
      "hi": "Hindi",
      "hu": "Hungarian",
      "it": "Italian",
      "nl": "Dutch",
      "pl": "Polish",
      "ru": "Russian",
      "tr": "Turkish"
    },
    "title": "Language"
  },
  "title": "[EN] Bauhaus - Design system",
  "description": "",
  "noMobileSupport": "Sorry, we don't support this application on mobiles to avoid problems.",
  "units": {
    "distance": "mm"
  },
  "legalNotes": {
    "copyright": "Copyright",
    "termsOfUse": "Terms of Use",
    "dataPolicy": "Data Policy",
    "imprint": "Imprint",
    "licenses": "Licenses"
  },
  "bugReport": {
    "tooltip": "Report a bug",
    "title": "Create a bug report",
    "description": "You have the possibility to report a bug by sending us a prefilled mail in the next step.\nPlease describe the problem as detailed as possible.",
    "additionForUserData": "\nIf you would like to be notified once your request is solved, please provide at least your mail address. Your data will only be processed and used for this purpose and deleted afterwards.",
    "label": {
      "textarea": "Bug Report",
      "mail": "Mail",
      "name": "Name"
    },
    "placeholder": {
      "textarea": "Type here...",
      "mail": "example{'@'}domain.com",
      "name": "John Doe"
    }
  }
}

If TheLanguageSelector also handles the translation of your site's meta data and title, you need to include the following locale keys in your translation files (empty strings also work):

• title
• content
• description
• keywords