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.

✨ Release Notes

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

# Using pnpm
pnpm add -D nuxt-translation-manager

# Using yarn
yarn add --dev nuxt-translation-manager

# Using npm
npm install --save-dev 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
# replace `path-to-your-langDir`

✨ Tip: you can use Edit CSV Extension for VSCode to manage your csv file inside of vscode

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
}

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

TODO

[] Generate a template for translations.csv file instead of creating it manually
[] Add a GUI manager to Nuxt Devtools