Nuxt Multilinguist module

Multilinguist is a simple but smoothly working module for easy and seamless localization implementation for Nuxt
applications.

Key Features

- 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

Installation

``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.

!directory_structure.png

Now, you're ready to use Multilinguist Module!

After running your project, you can see the following warning:

!vite-warning.png

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:

!initialized.png

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"
},
})
`

$3

Usage

$3

`vue


`

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


`

And your JSON must look like that:

`json
{
"Paste your variable here": "Here is your variable: {variable}"
}
`

`vue


`

You can already see how keys auto-completion works:

!autocompletion.png

And validation:

!validation.png

$3

`vue


`

$3

`vue


`

$3

`vue


``