Localization

This page outlines the general design principles of the Permit Connect Navigator Service (PCNS) localization.

Table of Contents

• Supported Languages
• Developers

Supported Languages

Currently only en-CA is supported

Developers

Framework

PCNS uses vue-i18n.

Localization files are stored in /frontend/src/locales/

JSON Format

Each view, component, enum, & constant should have its own grouping. This may result in duplication of strings but allows each to be translated on it's own instead of referencing common values. Ideally nesting should never go below 2 levels for speed purposes. Key naming is to be done in camel case.

In the below example groupName is the name of an application enum, homeView is a top level view, and loginButton is a component.

{
  "groupName": {
    "developer": "DEVELOPER",
    "proponent": "PROPONENT",
    "navigator": "NAVIGATOR",
    "supervisor": "SUPERVISOR",
    "admin": "ADMIN"
  },
  "homeView": {
    "welcome": "Welcome to the Permit Connect Services",
  },
  "loginButton": {
    "login": "Log in",
    "logout": "Log out"
  }
}

Linking messages

It is possible to link multiple messages together within a single message but this format should be avoided in favour of doing individual translations in the view or component.

https://vue-i18n.intlify.dev/guide/essentials/syntax.html#linked-messages

{
  "demo": {
    "hello": "Hello",
    "world": "world",
    "linked": "@:hello @:world"
  }
}

Showing translations

Import and use as follows in script setup.

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

// Actions
const { t } = useI18n();

</script>

Using the t object, reference the translation key.

<template>
  <p>
    {{ t('demo.hello') }}
  </p>
</template>