Simple and easy to use translation manager for nuxt
and nuxt-i18n
that allows to manage translations from a single CSV file.
- Manage translations from a single CSV file
- Hot module reload whenever the csv file is updated
- Add
nuxt-translation-manager
dependency to your project
npx nuxi@latest module add translation-manager
- 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 themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-translation-manager'
]
})
That's it! You can now use Nuxt Translation Manager in your Nuxt app ✨
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
# replace `path-to-your-langDir`
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 delimiter to comma in your csv editor ,
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"
// config key
export default defineNuxtConfig({
'translation-manager': {}
})
interface ModuleOptions {
/**
* nuxt-i18n lang dir
*
* @default 'locales'
*/
langDir?: string
/**
* csv file name without .csv file extension
*
* @default 'translations'
*/
translationFileName?: string
/**
* where to store json files
*
* @default 'langDir'
*/
outputDir?: string
}
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release
Inspired by Quasalang CLI by Danny Connell