Internationalization (i18n)

Pinx uses the @intlify library to handle multiple languages within the same application.

This library can be used with the vue-i18n module if you intend to use the Vue project, or with the @nuxtjs/i18n module if you want to run the project with Nuxt.

Example

You can manage the strings and the languages by working with the /lang directory. Here an example:

export default {
    en: {
        dashboard: "Dashboard"
    },
    es: {
        dashboard: "Tablero"
    },
    de: {
        dashboard: "Instrumententafel"
    },
    ja: {
        dashboard: "ダッシュボード"
    },
    fr: {
        dashboard: "Générateur de mise"
    }
}

Then you can switch languages or get the current language using i18n store:

import { useLocalesStore } from "@/stores/i18n"
const localesStore = useLocalesStore()
// the whole list of available languages
const availableLocales = computed(() => localesStore.availableLocales)
// get the current language
const currentLocale = computed(() => localesStore.locale)
// set the language with one of the available options
localesStore.setLocale(locale)

When you change the current language, this choice will be stored so that upon refreshing the application, you will find the previously selected language set.

In the directory /lang you will find the configuration file called config.ts.

You can use translations within a template in the following way:

<template>
    <p>{{ $t("dashboard") }}</p>
</template>

Or within a <script> tag:

<script lang="ts" setup>
    import { useI18n } from "vue-i18n"
    const { t } = useI18n()
    const translation = t("dashboard")
</script>

The RTL mode for individual components is provided by the NaiveUI framework. It has not been officially released by the NaiveUI team yet, but most components are covered by this functionality. Additionally, Pinx integrates a set of CSS rules that improve RTL support and extend it to other components. The layout of the entire app, however, being custom and not directly dependent on NaiveUI, is already fully compatible with RTL mode.

The RTL mode is a feature designed to enhance the user experience for languages read from right to left, such as Arabic, Hebrew, Sindhi, Aramaic and Persian.

Enabling RTL mode automatically adapts the user interface of our application to align correctly with the reading conventions of these languages. This includes reversing the entire layout, ensuring that text, images, buttons, and other visual elements are arranged in a coherent and natural manner for RTL users.

To activate RTL mode, simply use the themeStore.setRTL(true) function. This function will instantly adjust the layout orientation to support right-to-left reading.

Here is an example of how to activate RTL mode:

<script lang="ts" setup>
import { useThemeStore } from "@/stores/theme"
const themeStore = useThemeStore()
themeStore.setRTL(true)
</script>

Additionally, you can set RTL mode as the default by modifying the theme/index.ts file as follows:

export function getDefaultState() {
    return {
        ...
        rtl: true,
        ...
    }
}

With this new feature, our template becomes even more versatile and inclusive, allowing a wider range of users to enjoy an optimized user experience.

Internationalization (i18n)

Example

RTL (Right-to-Left)