Frameworks

Vue

A Vue SPA with vue-i18n resolves through the generic adapter. Your locale directory is found without configuration when it is locales, src/locales, i18n/locales, src/i18n/locales or src/i18n, first match wins. A directory counts once it holds locale files (.json, .yaml, .yml, .php), flat or one per locale; the file names are the locale codes.

Anywhere else, name it:

i18n-kit.config.ts
import { defineI18nKitConfig } from '@the-i18n-kit/cli/config'

export default defineI18nKitConfig({
  localeDirs: ['src/translations'],
  defaultLocale: 'en',
})

A project carrying nuxt, @nuxt/kit or a nuxt.config belongs to the Nuxt adapter instead.

Several Locale Directories

A layer is a scoped locale directory — a Nuxt layer, a workspace package, a shared UI library, or one app in a monorepo. Name one per directory, and --layer and every per-layer report use those names:

i18n-kit.config.ts
import { defineI18nKitConfig } from '@the-i18n-kit/cli/config'

export default defineI18nKitConfig({
  defaultLocale: 'en',
  localeDirs: [
    { path: 'src/messages', layer: 'app' },
    { path: 'src/admin/messages', layer: 'admin' },
  ],
})

Overrides

What you wantHow
Set the source locale, which nothing in a Vue SPA statesdefaultLocale — undeclared, the first code in sorted order stands in
Restrict or reorder localeslocales
Pin the adapterframework: 'generic'

framework: 'vue' is accepted as an alias for generic, and warns on stderr.

Usage evidence comes from .vue, .ts, .tsx, .js, .jsx, .mjs and .mts files: $t('key'), t('key'), this.$t('key') and the $te variants.

Copyright © 2026