nuxt-rosetta

🌹 Translate application content & effortlessly switch languages in Nuxt.

✨  Release Notes

Configuration

1. Install the module

pnpm add nuxt-rosetta

2. Create a config

// ~/rosetta.config.ts
import { defineRosettaConfig } from "rosetta";

export default defineRosettaConfig({
  reference: "en",
  translations: ["es", "fr"],
  cache: ".rosetta",
  messages: {
    home: "Home",
    example: "Example",
    info: "Information",
  },
});

3. Activate the module

// ~/nuxt.config.ts
import rosetta from "./rosetta.config";

export default defineNuxtConfig({
  modules: ["nuxt-rosetta"],
  rosetta,
});

4. Spend time in your garden, your translation system is complete!

Features

The nuxt-rosetta module allows you to define a language configuration that offers:

• Automatic content translation at build-time
• Lazy-load language content
• Literally-typed language & message keys for improved DX

When nuxt-rosetta starts up, we hook into the Nuxt build to maintain a cache of translated language content that will default to the ~/.rosetta directory. The @parvineyvazov/json-translator package is used to manage translations, which are performed w/ the Google Translate API by default.

The module also registers a set of utility functions to manage the nuxt-rosetta configuration & a server API endpoint that returns translated content. State management of the active langauge code & message set is managed internally by Nuxt.

Utilities

Function	Description
useRosettaLanguage()	Access the reactive state of the currently active language.
useRosettaMessages()	Access the reactive state of the currently active messages.
useRosetta()	Access an object w/ both language & messages states.
isRosettaCode(code)	Check if a given string is a valid Rosetta language code.
isRosettaMessage(message)	Check if a given string is a valid Rosetta message code.
isRosettaScheme(scheme)	Check if a given object is a valid Rosetta message scheme.
useRosettaLanguageOptions()	Access a list of currently active languages w/ key & label attributes.
setRosettaLanguage(code)	Fetch a set of langauge content w/ a given langauge code & set the language & messages state.
useRosettaMessage(message)	Access the reactive translated value of a given message code (alias $t).

Endpoints

Endpoint	Description
/api/rosetta/[code]	Check if a given code is valid & return the active translation JSON

License

MIT License © 2024-PRESENT Alexander Thorwaldson