Nuxt Translation Manager

nuxt および nuxt-i18n 用のシンプルで使いやすい翻訳マネージャー。単一の CSV ファイルから翻訳を管理できます。

Nuxt v4 Ready ✨

Nuxt V4 の例については、Nuxt V4 && nuxt-i18n モジュールを使用したこちらのスターターをご確認ください。

機能

単一の CSV ファイルから翻訳を管理
CSV ファイルが更新されるたびにホットモジュールリロード

クイックセットアップ

nuxt-translation-manager 依存関係をプロジェクトに追加します

npx nuxi@latest module add translation-manager

手動インストール

nuxt-translation-manager 依存関係をプロジェクトに追加します

npm install -D nuxt-translation-manager

pnpm install -D nuxt-translation-manager

yarn add -D nuxt-translation-manager

nuxt-translation-manager を nuxt.config.ts の modules セクションに追加します

export default defineNuxtConfig({
  modules: ['nuxt-translation-manager']
})

以上です！ Nuxt アプリで Nuxt Translation Manager を使用できるようになりました ✨

使い方

langDir に translations.csv ファイルを作成します

echo 'Key,"en-US","es-ES","ca-ES"
login,"Login","Acceder","Accedir"' > path-to-your-langDir/translations.csv
# replace `path-to-your-langDir`

これにより、次のような CSV ファイルが生成されます

キー	en-US	fr	de
hello	Hello	Bonjour	Hallo
goodbye	Goodbye	Au revoir	Auf Wiedersehen
thanks	Thanks	Merci	Danke

ヘッダー行では必ず lang-code 形式を使用してください 例: es-ES

必ず CSV エディターで適切な区切り文字 (デフォルトはコンマ) を設定してください ,

CSV ファイル内でコメントを使用できます # を使用します

✨ ヒント: VSCode 用の Edit CSV 拡張機能を使用すると、vscode 内で CSV ファイルを管理できます

生の CSV コードを表示

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

クレジット

Quasalang CLI by Danny Connell に触発されました