Learn Nuxt with a Collection of 100+ Tips!

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

temp-Image4v-TX6-F.jpg

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

  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:

Keyen-USfrde
helloHelloBonjourHallo
goodbyeGoodbyeAu revoirAuf Wiedersehen
thanksThanksMerciDanke

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