nuxt-translation-manager

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 ✨

• ✨  Release Notes
• 🏀 Online playground
• 🐱 Playground repository with Nuxt v3

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

1. Add nuxt-translation-manager dependency to your project

npx nuxi@latest module add translation-manager

Manual Installation

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

1. 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
# 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 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

// 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
  /**
   * csv separator character
   *
   * @default ','
   */
  separator?: string
}

Development

# 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

Credits

Inspired by Quasalang CLI by Danny Connell