0.0.8 • Published 9 months ago
nuxt-rosetta v0.0.8
nuxt-rosetta
🌹 Translate application content & effortlessly switch languages in Nuxt.
Configuration
- Install the module
pnpm add nuxt-rosetta- 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",
},
});- Activate the module
// ~/nuxt.config.ts
import rosetta from "./rosetta.config";
export default defineNuxtConfig({
modules: ["nuxt-rosetta"],
rosetta,
});- 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