Modules

translation-manager
translation-manager

Simple and easy to use translation manager for Nuxt and Nuxt-i18n that allows translation management from a single CSV file.

Nuxt Translation Manager

npm versionnpm downloadsLicenseNuxt

Simple and easy to use translation manager for nuxt and nuxt-i18n that allows to manage translations from a single CSV file.

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
# 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
  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`

✨ 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