{"_id":"@dialpad/i18n-vue2","_rev":"6-99fbc3d50caa8cf81eb5bda3c0711cfd","name":"@dialpad/i18n-vue2","dist-tags":{"latest":"1.7.1"},"versions":{"1.0.2":{"name":"@dialpad/i18n-vue2","version":"1.0.2","author":{"name":"Dialpad"},"license":"UNLICENSED","_id":"@dialpad/i18n-vue2@1.0.2","maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"}],"homepage":"https://github.com/dialpad/web-clients#readme","bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"dp":{"nodpend":true},"dist":{"shasum":"48713b2673da20e89c72b643653c260aa9642fb2","tarball":"https://registry.npmjs.org/@dialpad/i18n-vue2/-/i18n-vue2-1.0.2.tgz","fileCount":22,"integrity":"sha512-o2ho9Wk7PTfAsr9EjKRow2H7PgEdpyRCRNNUFgV38nr9de8Y/dtCb1iw++C8eh1fFdPjHUPv6/J9UD25NoG47w==","signatures":[{"sig":"MEQCIFQtHXTNO8eIeOoWk76ke6IwAv48k5/Sio0O9xRQ/cRIAiBn30rRivtSHPiFzAQEktp/+bZfgAm+au6yxizIeIoTHA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":331960},"type":"module","exports":{"types":"./dist/types/index.d.ts","import":"./dist/i18n-vue2.js","require":"./dist/i18n-vue2.cjs"},"gitHead":"1046d670db20f19e4d020054cc22c48974194fa1","private":false,"scripts":{"lint":"eslint ./ --fix","test":"vitest","build":"run-p build:*","format":"prettier ./ --write","lint:ci":"eslint ./ --output-file eslint_report.json --format json","coverage":"vitest run --coverage --passWithNoTests","format:ci":"prettier ./ --check","build:main":"vite build --config vite.config.ts","build:types":"pnpm run types:build","types:build":"tsc","types:check":"tsc --noEmit","coverage:open":"pnpm run coverage && open coverage/index.html"},"_npmUser":{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},"repository":{"url":"git+https://github.com/dialpad/web-clients.git","type":"git"},"_npmVersion":"10.1.0","description":"Dialpad's internationalization library for Vue2","directories":{},"_nodeVersion":"20.9.0","dependencies":{"@vue/composition-api":"1.7.2","@dialpad/i18n-services":"1.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"5.0.4","vitest":"1.0.0-beta.6","typescript":"5.0.4","npm-run-all":"4.1.5","@vitejs/plugin-vue2":"2.3.3"},"peerDependencies":{"vue":"2.6.14"},"_npmOperationalInternal":{"tmp":"tmp/i18n-vue2_1.0.2_1747852545527_0.625688217725177","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@dialpad/i18n-vue2","version":"1.2.0","author":{"name":"Dialpad"},"license":"UNLICENSED","_id":"@dialpad/i18n-vue2@1.2.0","maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},{"name":"juliodialpad","email":"julio.ortega@dialpad.com"}],"homepage":"https://github.com/dialpad/web-clients#readme","bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"dp":{"nodpend":true},"dist":{"shasum":"e5c047c76d946359be73eabb30578324f91e7318","tarball":"https://registry.npmjs.org/@dialpad/i18n-vue2/-/i18n-vue2-1.2.0.tgz","fileCount":22,"integrity":"sha512-VwETc0b8IYGWuOnYq5Y+w3LjQkc1rpcXODykQuYc4YRv9CRfm/BdD3NL+JA5DKXUX0i27yUw5+XQWwixS6wkIQ==","signatures":[{"sig":"MEQCIH4YPl0Q5bI1dn9+Rl5h3MpJfyAH6bji2ZJsd43Y/hd7AiAt1CWBeJMDbG0WNsQ//5fcFBPSFAPNxiDtoune28zUew==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":333274},"type":"module","exports":{"types":"./dist/types/index.d.ts","import":"./dist/i18n-vue2.js","require":"./dist/i18n-vue2.cjs"},"gitHead":"31db1db6323c4cabe8b551dae8a28b1c9dbaed25","private":false,"scripts":{"lint":"eslint ./ --fix","test":"vitest","build":"run-p build:*","format":"prettier ./ --write","lint:ci":"eslint ./ --output-file eslint_report.json --format json","coverage":"vitest run --coverage --passWithNoTests","format:ci":"prettier ./ --check","build:main":"vite build --config vite.config.ts","build:types":"pnpm run types:build","types:build":"tsc","types:check":"tsc --noEmit","coverage:open":"pnpm run coverage && open coverage/index.html"},"_npmUser":{"name":"dlovero-dialpad","actor":{"name":"dlovero-dialpad","type":"user","email":"daniel.lovero@dialpad.com"},"email":"daniel.lovero@dialpad.com"},"repository":{"url":"git+https://github.com/dialpad/web-clients.git","type":"git"},"_npmVersion":"10.1.0","description":"Dialpad's internationalization library for Vue2","directories":{},"_nodeVersion":"20.9.0","dependencies":{"@vue/composition-api":"1.7.2","@dialpad/i18n-services":"1.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"5.0.4","vitest":"1.0.0-beta.6","typescript":"5.0.4","npm-run-all":"4.1.5","@vitejs/plugin-vue2":"2.3.3"},"peerDependencies":{"vue":"2.6.14"},"_npmOperationalInternal":{"tmp":"tmp/i18n-vue2_1.2.0_1751482361490_0.7271847805817033","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@dialpad/i18n-vue2","version":"1.4.0","author":{"name":"Dialpad"},"license":"UNLICENSED","_id":"@dialpad/i18n-vue2@1.4.0","maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},{"name":"juliodialpad","email":"julio.ortega@dialpad.com"}],"homepage":"https://github.com/dialpad/web-clients#readme","bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"dp":{"nodpend":true},"dist":{"shasum":"fc1eb98b9c632575ec01d1cc12e1b5852a306339","tarball":"https://registry.npmjs.org/@dialpad/i18n-vue2/-/i18n-vue2-1.4.0.tgz","fileCount":27,"integrity":"sha512-iHoDOE4FQQjY7U5ZhUdIpH0MB29KyX8bJqYoSa7bmyFdIMZhMCCchSmN+b/JbpV6T55Yj3y9jdqq32PU/oCL6g==","signatures":[{"sig":"MEUCIGfjqpIOGG2zHeCfZsDlRk4mafGthnLL3iXSEzujU6SXAiEA6wqgGXkqb6AM4VAEMpNZvJ3v/1B3khF8x+Mj2lQQZMM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1755091},"type":"module","exports":{"types":"./dist/types/index.d.ts","import":"./dist/i18n-vue2.js","require":"./dist/i18n-vue2.cjs"},"gitHead":"6fb9694f3811c582924a950c96390a1c52dfa970","private":false,"scripts":{"lint":"eslint ./ --fix","test":"vitest","build":"run-p build:*","format":"prettier ./ --write","lint:ci":"eslint ./ --output-file eslint_report.json --format json","coverage":"vitest run --coverage --passWithNoTests","format:ci":"prettier ./ --check","build:main":"vite build --config vite.config.ts","build:types":"tsc","types:build":"tsc","types:check":"tsc --noEmit","coverage:open":"rushx coverage && open coverage/index.html"},"_npmUser":{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},"repository":{"url":"git+https://github.com/dialpad/web-clients.git","type":"git"},"_npmVersion":"10.7.0","description":"Dialpad's internationalization library for Vue2","directories":{},"_nodeVersion":"20.14.0","dependencies":{"fluent-vue":"3.7.2","@vue/composition-api":"1.7.2","@dialpad/i18n-services":"workspace:*"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.14","vite":"~5.4.10","vitest":"~2.1.4","typescript":"~5.6.3","npm-run-all":"4.1.5","@vitejs/plugin-vue2":"2.3.3"},"peerDependencies":{"vue":"2.6.14"},"_npmOperationalInternal":{"tmp":"tmp/i18n-vue2_1.4.0_1756146227828_0.2890533070887229","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"name":"@dialpad/i18n-vue2","version":"1.5.0","author":{"name":"Dialpad"},"license":"UNLICENSED","_id":"@dialpad/i18n-vue2@1.5.0","maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},{"name":"juliodialpad","email":"julio.ortega@dialpad.com"}],"homepage":"https://github.com/dialpad/web-clients#readme","bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"dp":{"nodpend":true},"dist":{"shasum":"e997a3019bc6be4342bdaf42db671325a66a3ded","tarball":"https://registry.npmjs.org/@dialpad/i18n-vue2/-/i18n-vue2-1.5.0.tgz","fileCount":28,"integrity":"sha512-C5B1VJg0x7DyAyMszGl9uIEIkKoaIInVh2GzP6EYamJ7R9l0yCBrwt5Bjw0gme0J3BrItUJmKGdL2DYm4+DXvg==","signatures":[{"sig":"MEYCIQCT3lu/DI3e8xBhGbgPpA8TJB/8Hk8ydcseGuPVykGLKgIhANgTriGZ4s/fr69EyOvA3sMHGjQRLgeCU36yODqmvPPk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2137438},"type":"module","_from":"file:dialpad-i18n-vue2-1.5.0.tgz","exports":{"types":"./dist/types/index.d.ts","import":"./dist/i18n-vue2.js","require":"./dist/i18n-vue2.cjs"},"private":false,"scripts":{"lint":"eslint ./ --fix","test":"vitest","build":"run-p build:*","format":"prettier ./ --write","lint:ci":"eslint ./ --output-file eslint_report.json --format json","coverage":"vitest run --coverage --passWithNoTests","format:ci":"prettier ./ --check","build:main":"vite build --config vite.config.ts","build:types":"tsc","types:build":"tsc","types:check":"tsc --noEmit","coverage:open":"rushx coverage && open coverage/index.html"},"_npmUser":{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},"_resolved":"/Users/daniellovero/src/wcf-sdk/packages/i18n-vue2/dialpad-i18n-vue2-1.5.0.tgz","_integrity":"sha512-C5B1VJg0x7DyAyMszGl9uIEIkKoaIInVh2GzP6EYamJ7R9l0yCBrwt5Bjw0gme0J3BrItUJmKGdL2DYm4+DXvg==","repository":{"url":"git+https://github.com/dialpad/web-clients.git","type":"git"},"_npmVersion":"10.7.0","description":"Dialpad's internationalization library for Vue2","directories":{},"_nodeVersion":"20.14.0","dependencies":{"fluent-vue":"3.7.2","@vue/composition-api":"1.7.2","@dialpad/i18n-services":"1.9.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.14","vite":"~5.4.10","vitest":"~2.1.4","typescript":"~5.6.3","npm-run-all":"4.1.5","@vitejs/plugin-vue2":"2.3.3"},"peerDependencies":{"vue":"2.6.14"},"_npmOperationalInternal":{"tmp":"tmp/i18n-vue2_1.5.0_1760541389037_0.982225990043381","host":"s3://npm-registry-packages-npm-production"}},"1.7.1":{"name":"@dialpad/i18n-vue2","version":"1.7.1","private":false,"description":"Dialpad's internationalization library for Vue2","author":{"name":"Dialpad"},"license":"UNLICENSED","type":"module","scripts":{"typecheck":"rushx types:check","typecheck:ci":"rushx typecheck","lint":"echo 'needs migration to use @dialpad/eslint-config'","lint:ci":"echo 'needs migration to use @dialpad/eslint-config'","format":"prettier ./ --write","format:ci":"prettier ./ --check","test":"echo 'fix me'","test:ci":"rushx test","coverage":"vitest run --coverage --passWithNoTests","coverage:open":"rushx coverage && open coverage/index.html","build":"run-p build:*","build:main":"vite build --config vite.config.ts","build:types":"tsc","types:build":"tsc","types:check":"tsc --noEmit"},"dependencies":{"@vue/composition-api":"1.7.2","@dialpad/i18n-services":"workspace:*","fluent-vue":"3.7.2"},"devDependencies":{"@vitejs/plugin-vue2":"2.3.3","npm-run-all":"4.1.5","prettier":"~2.8.8","typescript":"~5.6.3","vite":"~5.4.10","vue":"2.6.14","vitest":"~2.1.4","eslint":"~9.13.0"},"exports":{"import":"./dist/i18n-vue2.js","types":"./dist/types/index.d.ts","require":"./dist/i18n-vue2.cjs"},"peerDependencies":{"vue":"2.6.14"},"dp":{"nodpend":true},"repository":{"type":"git","url":"git+https://github.com/dialpad/web-clients.git"},"_id":"@dialpad/i18n-vue2@1.7.1","gitHead":"9c9d72af52e7e08e26d21d5a3eee9ca64478e033","bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"homepage":"https://github.com/dialpad/web-clients#readme","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-jsoeNPusk5W/YHUPRAXVXecy5i3qxt/jpPvMe9c7+uY6MnWMyvwjBmoSGbzZgBnaYA8EZEvkQ7wopoYEK4V4Eg==","shasum":"df6e26dfed269fe393c3f0d01d2280bf68c78f08","tarball":"https://registry.npmjs.org/@dialpad/i18n-vue2/-/i18n-vue2-1.7.1.tgz","fileCount":31,"unpackedSize":1755564,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC0id29+zGerCuvElNXmvJrBtt/MkU4a+0CZGZjHBmHCgIhALeNGcFDEiFmACNR0Z6e/B9c2aF4xNfCAQqUTGuDk23p"}]},"_npmUser":{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},"directories":{},"maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},{"name":"juliodialpad","email":"julio.ortega@dialpad.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/i18n-vue2_1.7.1_1763661124260_0.6752747097435758"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-21T18:35:45.462Z","modified":"2025-11-20T17:52:04.696Z","1.0.2":"2025-05-21T18:35:45.872Z","1.2.0":"2025-07-02T18:52:41.669Z","1.4.0":"2025-08-25T18:23:48.044Z","1.5.0":"2025-10-15T15:16:29.314Z","1.7.1":"2025-11-20T17:52:04.474Z"},"bugs":{"url":"https://github.com/dialpad/web-clients/issues"},"author":{"name":"Dialpad"},"license":"UNLICENSED","homepage":"https://github.com/dialpad/web-clients#readme","repository":{"type":"git","url":"git+https://github.com/dialpad/web-clients.git"},"description":"Dialpad's internationalization library for Vue2","maintainers":[{"name":"jawrey","email":"awreyjustin@gmail.com"},{"name":"dlovero-dialpad","email":"daniel.lovero@dialpad.com"},{"name":"juliodialpad","email":"julio.ortega@dialpad.com"}],"readme":"# i18n-vue2 (Vue 2 compatible)\n\n## Introduction\n\nThis package contains all the logic needed to take care the i18n of a Dialpad\napplication extending from the common logic existing in the base locale manager\nthat you can find about on the\n[i18n-services documentation](../i18n-services/README.md), based on different\nbundle sources.\n\n## How it works?\n\nThere are essentially two main concepts behind the scenes:\n\n### LocaleManager\n\nThe LocaleManager extends the BaseLocaleManager to oversee the\ninternationalization (i18n) in a Vue2.js application using the\n[Fluent localization framework](https://projectfluent.org/). Its\nresponsibilities include:\n\n- **Loading and caching translation bundles:** Manages the `.ftl` data, which\n  maps keys to text for each locale.\n- **Switching the current locale:** Provides methods to change the active\n  language dynamically.\n- **Handling bundle namespaces:** Manages potential duplicate bundle requests\n  from multiple sources, though this feature is still being refined.\n- **Initializing the Vue plugin:** Exposes translation methods (`$t`, `$ta`) to\n  `Vue` templates, enabling localized content within the application.\n\n### BundleSource\n\nThe second key concept is the BundleSource interface, which abstracts the\nloading and management of localization resources. This interface has two primary\nimplementations: `RawBundleSource` and `HTTPBundleSource`, each designed for\ndifferent use cases.\n\n- `RawBundleSource`: This implementation handles localization resources defined\n  within the application. It organizes these resources defined directly in the\n  application, and imported directly at runtime (for example, using\n  `import(./[locale].ftl`). This approach is ideal for applications with mostly\n  static content.\n\n- `HTTPBundleSource`: This implementation fetches localization resources\n  dynamically from a server. It caches these resources locally, allowing for\n  efficient access while still being flexible enough to load translations on\n  demand.\n\n**Disclaimer:** _Both implementations are provisional and may change as we\nbetter understand our needs. Currently, `RawBundleSource` is the preferred\noption for most applications._\n\n#### Synchronous Resource Loading with [builtResources](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.js:28:2-34:3)\n\nWhile the\n[dynamicResources](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.js:2:2-17:3)\nmethod is used for asynchronously loading resources, the\n[RawBundleSource](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.d.ts:14:0-30:1)\nclass also provides a\n[builtResources](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.js:28:2-34:3)\nmethod for synchronous resource loading. This is useful when you have the\nlocalization resources available at compile time and prefer to import them\ndirectly without dealing with promises.\n\n##### How to use [builtResources](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.js:28:2-34:3)\n\nInstead of dynamically importing `.ftl` files, you can import them directly and\nuse the\n[builtResources](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-services/bundle/bundle-source/raw.js:28:2-34:3)\nmethod to process the resources. Here's an example:\n\n```typescript\nimport { RawBundleSource } from '@dialpad/i18n-services';\n// Import your .ftl files directly\nimport enUSResource from './locales/en-US.ftl';\nimport esResource from './locales/es.ftl';\n\n// Create an array of BuiltResource objects\nconst builtResourcesArray: BuiltResource[] = [\n  ['en-US', 'namespace', enUSResource],\n  ['es', 'namespace', esResource],\n  // ... add other locales and namespaces as needed\n];\n\n// Convert BuiltResource objects to Resource objects using builtResources\nconst resources: Resource[] =\n  RawBundleSource.builtResources(builtResourcesArray);\n\n// Now, resources can be used to instantiate RawBundleSource or for any other purpose\nconst bundleSource = new RawBundleSource({ resources });\n```\n\n## Setup\n\n### Installation\n\n```sh\npnpm add @dialpad/i18n-vue2\n```\n\n### Configuration - Static resources\n\n### Integrating LocaleManager with Vue using the [install](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:43:2-55:3) Method\n\nWhen using `LocaleManager` within a Vue application, **(especially in the\ncontext of a library, you should be aware that install needs to receive a\nnon-default namespace value)** it's important to properly integrate it using the\n[install](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:43:2-55:3)\nmethod. This method registers `LocaleManager` with the Vue instance, allowing\nfor global access to localization functionalities across the application.\n\n#### Usage of [install](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:43:2-55:3)\n\nAfter creating an instance of `LocaleManager`, you must call the\n[install](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:43:2-55:3)\nmethod. This method accepts an optional `namespace` parameter, which is\nparticularly useful when you are developing a library and need to avoid\nconflicts with other potential instances of `LocaleManager` in the consumer's\nenvironment.\n\nBy using different namespaces, you can have multiple instances of\n`LocaleManager` available globally in Vue. This is ideal for libraries that may\nbe used in conjunction with other Vue plugins or in larger applications where\nscoped localization management is required.\n\n##### Parameters\n\n- `namespace`: (Optional) The namespace under which the `LocaleManager` will be\n  registered. Defaults to `'default'` if no namespace is provided.\n\n##### Example\n\n```typescript\nimport Vue from 'vue';\nimport { LocaleManager } from '@dialpad/i18n-vue2';\n\n// Create a LocaleManager instance with your configuration options\nconst localeManager = new LocaleManager({\n  // ... configuration options, see on Dynamic resources configuration section\n});\n\n// Install the LocaleManager with a specific namespace to avoid conflicts\nlocaleManager.install('my-namespace');\n\n// Your library's users can now access the LocaleManager instance globally in Vue\nnew Vue({\n  // ... other options\n}).$mount('#app');\n```\n\n### Configuration - Dynamic resources\n\nWe recommend you to include this in your own composable that handle every locale\nand i18n set up logic, i.e.:\n\n```ts\n//src/localization/i18n.ts\nimport type { App } from 'vue';\nimport { LocaleManager, RawBundleSource } from '@dialpad/i18n-vue2';\n\nexport async function hostI18NManager({\n  vueApp,\n}: {\n  vueApp: App;\n}): Promise<void> {\n  const bundleSource = new RawBundleSource({\n    resources: await RawBundleSource.dynamicResources([\n      ['en-US', 'your-app', import('./en-US.ftl?raw')],\n    ]),\n  });\n\n  const manager = new LocaleManager({\n    bundleSource,\n    preferredLocale: 'en-US', // optional\n    allowedLocales: ['en-US'], // optional\n    fallbackLocale: 'en-US',\n    namespaces: ['your-app'],\n  });\n\n  await manager.ready;\n\n  vueApp.use(manager);\n}\n```\n\n**Important note:** let's say that you have more than one `allowedLocales`, or\nthat your `fallbackLocale`/`preferredLocale` is different from what you're\nspecifying on the `allowedLocales` prop to the `LocaleManager` instance. In\nthose cases you need to verify that you have specified a Bundle resource for\neach locale, in order to have them working properly, i.e.:\n\n```ts\n//src/localization/i18n.ts\nimport type { App } from 'vue';\nimport { LocaleManager, RawBundleSource } from '@dialpad/i18n-vue2';\n\nexport async function hostI18NManager({\n  vueApp,\n}: {\n  vueApp: App;\n}): Promise<void> {\n  const bundleSource = new RawBundleSource({\n    resources: await RawBundleSource.dynamicResources([\n      // You must **always** have one resource per locale.\n      ['dp-DP', 'your-app', import('./dp-DP.ftl?raw')],\n      // This one is for the `fallbackLocale`\n      ['en-US', 'your-app', import('./en-US.ftl?raw')],\n    ]),\n  });\n\n  const manager = new LocaleManager({\n    bundleSource,\n    // I'm using Dialpadistan as my locale\n    preferredLocale: 'dp-DP',\n    // But my fallback is en-US (if it was part of the locales this is the same concept, **you need to add one resource per locale**)\n    fallbackLocale: 'en-US',\n    namespaces: ['your-app'],\n  });\n\n  await manager.ready;\n\n  vueApp.use(manager);\n}\n```\n\nAfter this, you should plug this into your `main.ts`. You will call it like:\n\n```ts\n// src/main.ts\n\nimport { createHost } from '@dialpad/host-entry';\nimport { hostI18NManager } from './localization/i18n-vue2';\nimport { hostEnv } from './constants';\n\nawait createHost(hostEnv)\n  // ... all your config\n  .vueCreated(hostI18NManager)\n  // ... some other config\n  .start();\n```\n\n## Usage\n\n### User's locale selection criteria\n\nYou will find that this API is (and should always be) the same as the\n[i18n Vue3 tool](../i18n-vue2/README.md).\n\nWhen instantiating the LocaleManager (or when calling setI18N), the\npreferredLocale and allowedLocales parameters are optional. BUT this is the\nfollowing criteria to select it.\n\nIf preferredLocale param is provided, use that. If allowedLocales param is\nprovided, use the first one. If localStorage contains the previously-used value,\nuse that. If navigator.language is available, use that. Use the fallbackLocale.\n\nFirst of all you need to understand he difference between `$t` and `$ta`, which\nmainly lies in their outputs:\n\n### useI18N() hook API\n\nThere are three main functions exported: `$t`, `$ta`, and `setI18N()`, and two\nexported values: `currentLocale` and `allowedLocales`.\n\n(Keep in mind that you should have a fluent file (en-US.ftl in this case)\nfollowing the Fluent rules.)\n\n#### `$t`\n\nReturns a translated string based on a key and optional variables. It’s used for\nsimple text translations.\n\n```ftl\n# src/localization/en-US.ftl\nPARAGRAPH_KEY = Amazing paragraph, { $name }\n```\n\n```ts\n// Component file\nconst greeting = $t('PARAGRAPH_KEY', { name: 'John' });\n// Output: \"Amazing paragraph, John\"\n```\n\n#### `$ta`\n\nReturns an object containing translated attributes to pass directly as props to\ncomponents, it can contain aria-label, title, etc, rather than just a plain\ntext. It’s useful for handling element attributes in the UI.\n\n```ftl\n# src/localization/en-US.ftl\nBUTTON_NAME =\n  .aria-label = { $title } now\n  .title = { $title }\n```\n\n```ts\n// Component file\nconst buttonAttrs = $ta('BUTTON_NAME', { title: 'Submit' });\n\n// Output: { ariaLabel: \"Submit now\", title: \"Submit\" }\n\n// Usage:\n<template>\n  <DtButton v-bind=\"$ta('BUTTON_NAME', { title: 'Submit' });\" />\n</template>;\n```\n\nIn both cases, any valid fluent syntax is allowed, so the usage of\n[it might include functions](https://projectfluent.org/fluent/guide/functions.html)\nor any other feature provided [by the framework](https://projectfluent.org/).\n\n##### Vue component example - $t, $ta\n\nHere's an example of how to use the `LocaleManager` in a `Vue` component.\n\n```vue\n<script>\n/* `useI18N` exposes the `$t` and `$ta` localization methods, **for use in the setup method**, and these are both available by default in templates with no extra calls needed. */\n\nimport { useI18N } from '@dialpad/i18n-vue2';\n\nconst { $t, $ta } = useI18N();\n</script>\n\n<template>\n  <div>\n    <p>{{ $t('PARAGRAPH_KEY') }}</p>\n    <button\n      v-bind=\"\n        $ta('BUTTON_NAME', {\n          name,\n        })\n      \"\n    />\n  </div>\n</template>\n```\n\nusing the following Fluent file as example:\n\n```ftl\n# src/localization/en-US.ftl\nPARAGRAPH_KEY = Amazing paragraph, { $name }\nBUTTON_NAME =\n  .aria-label = { $title } now\n  .title = { $title }\n```\n\n#### `setI18N`\n\nThis function receives a `Partial<SetLocaleParams>`. This allows you to change\nany of the set up parameters after the initialization of the `LocaleManager`,\nbut the main use case is to change locales dynamically.\n\nYou probably want to use this in addition to:\n\n- `currentLocale`, determined by the\n  [criteria defined in the usage section](#usage).\n- `allowedLocales`, are all the allowed locale codes, sorted alphabetically,\n  defined during initialization of the `LocaleManager`.\n\n##### Vue component example - setI18N, allowedLocales, currentLocales\n\n```vue\n<script setup lang=\"ts\">\n// your imports ...\nconst { setI18N, allowedLocales, currentLocale } = useI18N();\n</script>\n\n<template>\n  <DtDropdown placement=\"bottom-end\">\n    <template #anchor=\"{ attrs }\">\n      <DtButton v-bind=\"attrs\" size=\"md\" importance=\"clear\">\n        {{ currentLocale }}\n      </DtButton>\n    </template>\n    <template #list=\"{ close }\">\n      <template v-for=\"locale in allowedLocales\" :key=\"locale\">\n        <DtListItem\n          navigation-type=\"tab\"\n          @click=\"\n            setI18N({ locales: locale });\n            close();\n          \"\n        >\n          {{ locale }}\n        </DtListItem>\n      </template>\n    </template>\n  </DtDropdown>\n</template>\n```\n\n### Dynamically Changing Locales with [changeLocale](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:64:2-88:3) Method\n\nThe\n[changeLocale](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:64:2-88:3)\nmethod provides the functionality to dynamically change the current locale of\nyour application. This method can target a specific\n[LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\nby namespace or all\n[LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\ninstances globally.\n\n#### changeLocale()\n\nTo change the locale settings, call the\n[changeLocale](cci:1://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:64:2-88:3)\nmethod on your\n[LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\ninstance. You can pass optional parameters to update the locale settings and\noptionally specify a namespace to target a specific\n[LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1).\nIf no namespace is provided, the locale settings will be updated for all\n[LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\ninstances.\n\n##### Parameters\n\n- `args`: (Optional) A `Partial<SetLocaleParams>` object containing the new\n  locale settings to be applied.\n- `namespace`: (Optional) The namespace of the\n  [LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\n  instance whose locale settings you want to change. If not provided, all\n  instances will be updated.\n\n###### Behavior\n\n- Retrieves the map of\n  [LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\n  instances from the Vue prototype.\n- If a namespace is specified, it targets the corresponding\n  [LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\n  and throws an error if it does not exist.\n- If no namespace is specified, it targets all registered\n  [LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)\n  instances.\n- Updates the locale settings for the targeted\n  [LocaleManager](cci:2://file:///Users/daniellovero/src/web-clients/packages/i18n-vue2/src/locale-manager.ts:21:0-89:1)(s)\n  using the provided arguments.\n\n###### Example\n\n```typescript\n// Assuming you have a LocaleManager instance\nconst manager = new LocaleManager(...);\n\n// To change the locale settings for a specific namespace\nmanager.changeLocale({ preferredLocale: 'fr-FR' }, 'myNamespace');\n\n// To change the locale settings for all LocaleManager instances\nmanager.changeLocale({ preferredLocale: 'fr-FR' });\n\n### Adding Resources at Runtime with `addSources`\n\n#### API Method: `addSources`\n\nThe `addSources` method allows you to add multiple translation resources to the `LocaleManager` at runtime. Once all resources are loaded, it triggers the `ready` promise indicating that the locale manager is fully initialized and ready to handle localization requests.\n```\n\n### Adding Resources at Runtime with `addSources`\n\n#### API Method: `addSources`\n\nThe `addSources` method allows you to add multiple translation resources to the\n`LocaleManager` at runtime. Once all resources are loaded, it triggers the\n`ready` promise indicating that the locale manager is fully initialized and\nready to handle localization requests.\n\n##### Parameters\n\n- `sources`: An array of `BuiltResource` items where each item contains:\n  - `locale`: The locale code for the translation resource.\n  - `namespace`: The namespace associated with the resource.\n  - `source`: The actual source string or a promise that resolves to the source\n    string.\n\n##### Example\n\n```typescript\n// Assuming you have a LocaleManager instance\nconst manager = new LocaleManager(...);\n\n// Define your resources\nconst resourcesToAdd: BuiltResource[] = [\n  // Array of [locale, namespace, source] tuples\n  ['en-US', 'namespace1', sourceStringOrPromise],\n  ['es-ES', 'namespace1', anotherSourceStringOrPromise],\n  // Add more resources as needed\n];\n\n// Add the resources to the LocaleManager\nmanager.addSources(resourcesToAdd);\n```\n\n## Context screenshots\n\nContext screenshots are, as their name suggest, screenshots that provide context\nto recognize where each translation is used in each app.\n\nEach screenshot should contain visual information of where the translation can\nbe found in the app with enough context to be easily located. If other dev looks\nat the screenshot they should be able to locate it fairly easily in your app.\n\nThere should be one screenshot per each translation key on each `.ftl` file. You\ncan reuse the same screenshot for multiple keys, but each file will correspond\nto one key, so you must make one copy for each translation key. The screenshot\nfilename will be `{translationKeyHere}.png`. We only support `.png` images for\nnow.\n\nThere is a PR check which will fail if any translation key is missing its\ncorresponding screenshot. There is an exception list for paths that should be\nignored by this check. Avoid using it unless it's completely necessary. If you\nstrictly need to use it, remember to mention in your commit message why you are\nusing it.\n\nThese screenshots will be located in a directory called `context-screenshots`\nsibling to each `.ftl` file in your project. If you have an `.ftl` file, it\nshould have a sibling screenshots directory. Each screenshot has a file size\nlimit of 20MB.\n\nThe screenshots are uploaded to smartling along with the CSV/FTL files through a\ngithub action when a PR to main is merged.\n\n## Resources\n\n- [Fluent docs](https://github.com/projectfluent/fluent/wiki)\n- [I18n best practices](https://localization.blog/2022/05/16/i18n-best-practices-keep-it-together/)\n- [18n-services docs](../i18n-services/README.md)\n- [i18n for vue3 docs](../i18n-vue2/README.md)\n","readmeFilename":"README.md"}