Namespace Loading

useNamespace(ns) lazily loads one or more namespaces for the currently active locale, and re-loads them whenever the active locale changes. Pairs with locale files split by namespace code splitting — namespace keys become available in t()/tm() as soon as the returned isLoaded ref turns true.

import { useNamespace } from 'vue-i18n-kit'

// Load a single namespace
const { isLoading, isLoaded } = useNamespace('auth')

// Load multiple namespaces at once
const { isLoading, isLoaded } = useNamespace(['auth', 'forms'])

Arguments

• ns — string | string[]. One or more namespace names, matching the <dir>/<locale>/<namespace>.json files generated by vueI18nNamespacePlugin.

Return value

isLoading

Ref<boolean> — true while the namespace(s) are being fetched.

isLoaded

Ref<boolean> — true once the namespace(s) have been successfully loaded for the current locale.

SSR support

useNamespace calls onServerPrefetch internally, so namespaces requested during a component's setup() are awaited before the server response is flushed — no extra wiring needed in SSR apps.

Usage in a router guard (outside setup())

Composables only work inside a component's setup(). To lazy-load a namespace before a route renders, call the underlying service method directly instead:

router.beforeEach(async (to) => {
  const ns = to.meta.namespaces as string[] | undefined
  if (ns) await Promise.all(ns.map((n) => i18nPlugin.service.loadNamespace(n)))
})

I18nService exposes two namespace methods alongside the ones described on Plugin Service:

• loadNamespace(ns: string) => Promise<void> — loads one namespace for the active locale.
• isNamespaceLoaded(ns: string) => boolean — checks whether a namespace is already loaded, without triggering a fetch.