Splitting translations across multiple files per language

src/app/transloco-loader.ts

// Transloco calls a file a scope, and hands the loader
// "checkout/en". The file is en/checkout.json, so the
// loader swaps the two segments.
getTranslation(path: string) {
  const [scope, lang] = path.includes('/')
    ? path.split('/')
    : ['default', path];

  return this.http.get<Translation>(
    `/assets/i18n/${lang}/${scope}.json`,
  );
}

src/i18n.ts

// i18next calls a file a namespace. It loads the ones you
// name and looks a key up in the one you ask for.
i18next.use(HttpBackend).init({
  lng: 'en',
  ns: ['common', 'checkout', 'errors'],
  defaultNS: 'common',
  backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
});

t('checkout:summary.title');

src/i18n.ts

// vue-i18n has no name for it — you compose the message
// object yourself, so the files are whatever you import.
import common from './locales/en/common.json'
import checkout from './locales/en/checkout.json'

createI18n({
  locale: 'en',
  messages: { en: { common, checkout } },
})