Nuxt Multilinguist module for localizations
npm install @yiiamee/multilinguistMultilinguist is a simple but smoothly working module for easy and seamless localization implementation for Nuxt
applications.
- Easy translations that you're used to
- Works perfectly fine on both SSR + CSR
- No memory leaks and running out of memory errors
- Autocompletion & validation of keys
- Autodetection of browser's locale
``bash`
npm install @yiiamee/multilinguist
Then, add the module to your nuxt.config
`nuxt.config.ts`
export default defineNuxtConfig({
modules: [
"@yiiamee/multilinguist",
],
multilinguist: {
defaultLocale: "en", // string representing key to your default (fallback) locale
supportedLanguages: ["en", "es"], // array of strings representing all available locales' keys
},
})
Then, create a "locales" directory in root directory of your project.
Now, you're ready to use Multilinguist Module!
After running your project, you can see the following warning:
Dont be scared, this is just a message from the module, indicating that your locales are typed, and that the module
can properly perform type-checks and autocompletion.
Also, on both SSR and CSR, you will see the following message:
It indicated that the module has been initialized successfully.
To disable logs, you can set the logging option in your nuxt.config to false (by default, it is true):
`nuxt.config.ts`
export default defineNuxtConfig({
modules: [
"@yiiamee/multilinguist",
],
multilinguist: {
defaultLocale: "en",
supportedLanguages: ["en", "es"],
logging: false, // Boolean value to define if the module should send internal logs to console
},
})
Also, Multilinguist offers a functionality to set the default browser's locale as default if it is available in the supported languages array.
To disable this option, you can set the setBrowserLanguage option to false as it is true by default:
`nuxt.config.ts`
export default defineNuxtConfig({
modules: [
"@yiiamee/multilinguist",
],
multilinguist: {
defaultLocale: "en",
supportedLanguages: ["en", "es"],
logging: false,
setBrowserLanguage: false, // by default: true
},
})
Also, if you want to use a different folder name for your locales' files, or you want to specify other path to the directory, you can set the localesPath option in your nuxt.config:
`nuxt.config.ts`
export default defineNuxtConfig({
modules: [
"@yiiamee/multilinguist",
],
multilinguist: {
defaultLocale: "en",
supportedLanguages: ["en", "es"],
logging: false,
setBrowserLanguage: false, // by default: true
localesPath: "./languages", // by default: "./locales"
},
})
`vue
{{ pageTitle }}
`
It also supports nested keys and dynamic keys with variables;
you only need to pass the second argument, an object with used in the key variables:
`vue
{{ t("Paste your variable here", { variable: locale }) }}
`
And your JSON must look like that:
`json`
{
"Paste your variable here": "Here is your variable: {variable}"
}
`vue
{{ pageTitle }}
{{ t("Paste your variable here", { variable: locale }) }}
{{ t("nested.Nested key") }}: {{ t("nested.Language") }}
`
You can already see how keys auto-completion works:
And validation:
`vue
{{ pageTitle }}
`
`vue
{{ pageTitle }}
Current Locale: {{ locale }}
`
`vue
{{ pageTitle }}
Current Locale: {{ locale }}
v-for="localeItem from locales"
:key="localeItem"
>
| {{ localeItem }} |
``