feat: support loading files from npm packages

docs/content/docs/2.guide/7.lazy-load-translations.md

@@ -193,6 +193,32 @@ export default defineNuxtConfig({
 })
 ```
 
+## External files
+
+There might be the use case where you want to import files which are not part of your repository but published as npm package.
+
+By passing an object to `file` or `files` you can set individual files to external. Those files will ignore the `langDir` and will be resolved from node_modules instead.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  i18n: {
+    locales: [
+      /**
+       * Example definition for a file being loaded from an npm package
+       */
+      {
+        code: 'en',
+        name: 'English',
+        // file loaded from export of npm package
+        file: { path: 'my-module/locales/en.json', external: true }
+      }
+    ],
+    lazy: true,
+    langDir: 'lang',
+    defaultLocale: 'en'
+  }
+})
+```
 
 ## Using translations of non-loaded locale
 

specs/fixtures/lazy/nuxt.config.ts

@@ -50,6 +50,12 @@ export default defineNuxtConfig({
         iso: 'fr-FR',
         file: { path: 'lazy-locale-fr.json5', cache: false },
         name: 'Français'
+      },
+      {
+        code: 'de',
+        iso: 'de-DE',
+        file: { path: 'sit-onyx/locales/de-DE.json', external: true },
+        name: 'Deutsch'
       }
     ]
   }

specs/fixtures/lazy/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@nuxtjs/i18n": "latest",
-    "nuxt": "latest"
+    "nuxt": "latest",
+    "sit-onyx": "1.0.0-alpha.154"
   }
 }

specs/fixtures/lazy/pages/index.vue

@@ -47,5 +47,6 @@ useHead({
     <p id="profile-ts">{{ $t('settings_nest_foo_bar_profile') }}</p>
     <p id="html-message" v-html="$t('html')"></p>
     <p id="dynamic-time">{{ $t('dynamicTime') }}</p>
+    <p id="external-message">{{ $t('optional') }}</p>
   </div>
 </template>

specs/lazy_load/basic_lazy_load.spec.ts

@@ -140,4 +140,10 @@ describe('basic lazy loading', async () => {
     expect(await getText(page, '#welcome-english')).toEqual('Welcome!')
     expect(await getText(page, '#welcome-dutch')).toEqual('Welkom!')
   })
+
+  test('loads file from external package', async () => {
+    const { page } = await renderPage('/de')
+
+    expect(await getText(page, '#external-message')).toEqual('(optional)')
+  })
 })

src/types.ts

@@ -19,7 +19,7 @@ export interface DetectBrowserLanguageOptions {
 
 export type LocaleType = 'static' | 'dynamic' | 'unknown'
 
-export type LocaleFile = { path: string; cache?: boolean }
+export type LocaleFile = { path: string; cache?: boolean; external?: boolean }
 
 export type LocaleInfo = {
   /**

src/utils.ts

@@ -1,4 +1,5 @@
 import { promises as fs, readFileSync as _readFileSync, constants as FS_CONSTANTS } from 'node:fs'
+import { createRequire } from 'node:module'
 import { createHash } from 'node:crypto'
 import { resolvePath } from '@nuxt/kit'
 import { parse as parsePath, resolve, relative, normalize, join } from 'pathe'
@@ -500,8 +501,14 @@ export const getLocaleFiles = (locale: LocaleObject | LocaleInfo): LocaleFile[]
 }
 
 export const localeFilesToRelative = (projectLangDir: string, layerLangDir: string = '', files: LocaleFile[] = []) => {
-  const absoluteFiles = files.map(file => ({ path: resolve(layerLangDir, file.path), cache: file.cache }))
-  const relativeFiles = absoluteFiles.map(file => ({ path: relative(projectLangDir, file.path), cache: file.cache }))
+  const require = createRequire(import.meta.url)
+  const absoluteFiles = files.map(file => {
+    if (file.external) {
+      return { ...file, path: require.resolve(file.path) }
+    }
+    return { ...file, path: resolve(layerLangDir, file.path) }
+  })
+  const relativeFiles = absoluteFiles.map(file => ({ ...file, path: relative(projectLangDir, file.path) }))
 
   return relativeFiles
 }