Nuxt Translation Manager
Simple and easy to use translation manager for nuxt
and nuxt-i18n
that allows to manage translations from a single CSV file.
Nuxt v4 Ready
✨
For Nuxt V4 example you can check this starter using Nuxt V4 && nuxt-i18n module
Features
- Manage translations from a single CSV file
- Hot module reload whenever the csv file is updated
Quick Setup
- Add
nuxt-translation-manager
dependency to your project
npx nuxi@latest module add translation-manager
Manual Installation
- Add
nuxt-translation-manager
dependency to your project
npm install -D nuxt-translation-manager
pnpm install -D nuxt-translation-manager
yarn add -D nuxt-translation-manager
- Add
nuxt-translation-manager
to the modules
section of nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-translation-manager']
})
That's it! You can now use Nuxt Translation Manager in your Nuxt app ✨
Usage
Create translations.csv
file in your langDir
echo 'Key,"en-US","es-ES","ca-ES"
login,"Login","Acceder","Accedir"' > path-to-your-langDir/translations.csv
This will generate a CSV file that looks like this:
Key | en-US | fr | de |
---|
hello | Hello | Bonjour | Hallo |
goodbye | Goodbye | Au revoir | Auf Wiedersehen |
thanks | Thanks | Merci | Danke |
Be sure to use the format lang-code
in the header row e.g. es-ES
Be sure to set the appropriate delimiter in your csv editor (comma by default) ,
You can use comments in your csv file using #
✨ Tip: you can use Edit CSV Extension for VSCode to manage your csv file inside of vscode
View raw csv code
Key,"English, en-US","French, fr","German, de"
hello,"Hello","Bonjour","Hallo"
goodbye,"Goodbye","Au revoir","Auf Wiedersehen"
thanks,"Thanks","Merci","Danke"
# COMMENTS TEST
comment-test,"Comment test","Test comentario","Test comentari"
### MULTILINE COMMENT ###
### ANOTHER COMMENT ####
comment-multi,"Comment test","Test comentario","Test comentari"
Options
export default defineNuxtConfig({
'translation-manager': {}
})
interface ModuleOptions {
langDir?: string
translationFileName?: string
outputDir?: string
separator?: string
}
Development
pnpm install
pnpm run dev:prepare
pnpm run dev
pnpm run dev:build
pnpm run lint
pnpm run test
pnpm run test:watch
pnpm run release
Credits
Inspired by Quasalang CLI by Danny Connell