VueCraft NPM

Namespace Code Splitting ​

vueI18nNamespacePlugin scans a directory of split locale files and generates the virtual module virtual:vue-i18n-namespaces. The module exports a locales object ready to pass to createVueI18nPlugin — each locale entry includes per-namespace dynamic import() calls so Vite code-splits them automatically.

ts
// vite.config.ts
import { vueI18nNamespacePlugin } from 'vue-i18n-kit/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueI18nNamespacePlugin({
      dir: 'src/locales/split',
      locales: {
        en: { meta: { display: 'English', flag: '🇬🇧' }, eagerNamespaces: ['common'] },
        ru: { meta: { display: 'Русский', flag: '🇷🇺' }, eagerNamespaces: ['common'] },
      },
    }),
  ],
})

Usage in your app ​

ts
import { locales } from 'virtual:vue-i18n-namespaces'

app.use(createVueI18nPlugin({ defaultLocale: 'en', locales }))

Namespaces not in eagerNamespaces are loaded lazily with useNamespace():

ts
const { isLoading } = useNamespace('dashboard')
// or several at once:
const { isLoading } = useNamespace(['dashboard', 'charts'])

Options ​

dir ​

string · default: 'src/locales/split'. Directory containing locale subdirectories (<dir>/<locale>/<namespace>.json).

locales ​

Record<string, { meta?, eagerNamespaces? }> · default: {}. Per-locale config. Locales found in the directory but not listed here are included automatically.

HMR: when any namespace JSON file inside dir changes, Vite invalidates and reloads the virtual module automatically.