Search
⌘ K
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 utils:
import { getAvailableLocales, getLocale, setLocale } from "@/utils/i18n"
// the whole list of available languages
const availableLocales = getAvailableLocales()
// get the current language
const currentLocale = getLocale()
// set the language with one of the available options
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>