{"id":13593226,"url":"https://github.com/conedevelopment/i18n","last_synced_at":"2025-04-05T06:08:19.952Z","repository":{"id":41874550,"uuid":"99260618","full_name":"conedevelopment/i18n","owner":"conedevelopment","description":"Push your Laravel translations to the front-end and use them easily with JavaScript.","archived":false,"fork":false,"pushed_at":"2024-03-22T20:46:04.000Z","size":84,"stargazers_count":123,"open_issues_count":2,"forks_count":20,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-23T23:55:30.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pineco.de/using-laravels-localization-js/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/conedevelopment.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["iamgergo","adamlaki"]}},"created_at":"2017-08-03T17:55:26.000Z","updated_at":"2024-06-18T16:46:23.481Z","dependencies_parsed_at":"2024-06-18T16:46:21.522Z","dependency_job_id":"fddb0de6-4742-48ee-a8c8-b4cbb722fceb","html_url":"https://github.com/conedevelopment/i18n","commit_stats":{"total_commits":99,"total_committers":9,"mean_commits":11.0,"dds":0.3232323232323232,"last_synced_commit":"f30673442917a3b1a77ddf90fed43cffb65e95f6"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fi18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fi18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fi18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fi18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/conedevelopment","download_url":"https://codeload.github.com/conedevelopment/i18n/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294539,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:01:18.085Z","updated_at":"2025-04-05T06:08:19.931Z","avatar_url":"https://github.com/conedevelopment.png","language":"PHP","funding_links":["https://github.com/sponsors/iamgergo","https://github.com/sponsors/adamlaki"],"categories":["PHP"],"sub_categories":[],"readme":"# I18n\n\nPush your Laravel translations to the front-end and use them easily with JavaScript.\n\nA nice tool for SPAs and front-end heavy applications.\n\nIf you have any question how the package works, we suggest to read this post:\n[Using Laravel’s Localization in JS](https://pineco.de/using-laravels-localization-js/).\n\n## Getting started\n\nYou can install the package with composer, running the `composer require conedevelopment/i18n` command.\n\n## Translations in view files\n\nYou can use the `@translations` blade directive.\nThis directive automatically wraps the translations to a `\u003cscript\u003e` tag.\n\n```html\n@translations\n\n\u003c!-- The result --\u003e\n\u003cscript\u003ewindow['translations'] = { auth: {...}, validation: {...} }\u003c/script\u003e\n```\n\nYou may override the default key for the translations. You can do that by passing a string to the blade directive.\n\n```html\n@translations ('myTranslations')\n\n\u003c!-- The result --\u003e\n\u003cscript\u003ewindow['myTranslations'] = { auth: {...}, validation: {...} }\u003c/script\u003e\n```\n\n## Publishing and using the JavaScript library\n\nUse the `php artisan vendor:publish` command and choose the `Pine\\I18n\\I18nServiceProvider` provider.\nAfter publishing you can find your fresh copy in the `resources/js/vendor` folder.\n\n### Using the I18n.js\n\nThen you can import the `I18n` class and assign it to the `window` object.\n\n```js\nimport I18n from './vendor/I18n';\nwindow.I18n = I18n;\n```\n\n### Initializing a translation instance\n\nFrom this point you can initialize the translation service anywhere from your application.\n\n```js\nlet translator = new I18n;\n```\n\nBy default, it uses the `translations` key in the `window` object.\nIf you want to use the custom one you set in the blade directive, pass the same key to the constructor.\n\n```js\nlet translator = new I18n('myTranslations');\n```\n\n### Using it as a Vue service\n\nIf you want to use it from Vue templates directly you can extend Vue with this easily.\n\n```js\nVue.prototype.$I18n = new I18n;\n```\n\nYou can call it from your template or the script part of your component like below:\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e{{ $I18n.trans('some.key') }}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\ncomputed: {\n    translations: {\n        something: this.$I18n.trans('some.key')\n    }\n}\n```\n\n### Methods\n\nThe package comes with two methods on JS side. The `trans()` and the `trans_choice()`.\n\n#### `trans()`\n\nThe `trans` method accepts the key of the translation and the attributes what we want to replace, but it's optional.\n\n```js\ntranslator.trans('auth.failed');\n\n// These credentials do not match our records.\n\ntranslator.trans('auth.throttle', { seconds: 60 });\n\n// Too many login attempts. Please try again in 60 seconds.\n```\n\n#### `trans_choice()`\n\nThe `trans_choice` method determines if the translation should be pluralized or nor by the given cout.\nAlso, it accepts the attributes we want to replace.\n\nLet's say we have the following translation line:\n\n```php\n[\n    'attempts' =\u003e 'Be careful, you have :attempts attempt left.|You still have :attempts attempts left.',\n]\n```\n\u003e [!NOTE]\n\u003e The plural and the singular versions are separated by the `|` character!\n\n```js\ntranslator.trans_choice('auth.attempts', 1, { attempts: 'only one' });\n\n// Be careful, you have only one attempt left.\n\ntranslator.trans_choice('auth.attempts', 4, { attempts: 'less than five' });\n\n// You still have less than five attempts left.\n```\n\nLike in Laravel, you have the ability to set ranges for the pluralization.\nAlso, you can replace placeholders like before.\n\n```php\n[\n    'apples' =\u003e '{0} There are none|[1,19] There are some (:number)|[20,*] There are many (:number)',\n]\n```\n\u003e You can separate more than two choices with the `|` character.\n\n```js\ntranslator.trans_choice('messages.apples', 0);\n\n// There are none\n\ntranslator.trans_choice('auth.attempts', 8, { number: 8 });\n\n// There are some (8)\n\ntranslator.trans_choice('auth.attempts', 25, { number: 25 });\n\n// There are many (25)\n```\n\n### Transforming replacement parameters\n\nLike in Laravel's functionality, you can transform your parameters to upper case, or convert\nonly the first character to capital letter. All you need to do, to modify your placeholders.\n\n```php\n[\n    'welcome' =\u003e 'Welcome, :NAME',\n    'goodbye' =\u003e 'Goodbye, :Name',\n]\n```\n\u003e If you want, you can pass the same parameter with different\n\u003e modifiers in one line as well, like `:NAME`, `:name` or `:Name`.\n\n```js\ntranslator.trans('messages.welcome', { name: 'pine' });\n\n// Welcome, PINE\n\ntranslator.trans('messages.goodbye', { name: 'pine' });\n\n// Goodbye, Pine\n```\n\n### Package translations\n\nThanks to the idea of [Jonathan](https://github.com/sardoj), package translations are supported by default.\nYou can access to the translations as in Laravel, using the predefined namespace.\n\n```js\ntranslator.trans('courier::messages.message');\n```\n\n## Multiple locales\n\nMultiple locales are supported. You can change the application's locale anytime.\nBehind the scenes the proper translations will be rendered, if it exists.\n\n## Fallback locales\n\nIf there are no translations is not available in the current language,\nthe package will look for the fallback locale's translations.\nIf there is no translations available in the fallback locale, the missing translations won't appear.\n\n## Performance\n\nThe translations are generated when the views are compiled.\nIt means they are cached and stored as strings in the compiled views.\nIt's much more performance friendly than generating them on runtime or running and AJAX request to fetch the translations.\n\nBehind the scenes there is a switch - case that determines which translations should be present, based on the current locale.\nThis way only the current translations are pushed to the window object and not all of them.\n\n\u003e Note: On local environment the cached views are getting cleared to keep translations fresh.\n\n## Contribute\n\nIf you found a bug or you have an idea connecting the package, feel free to open an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconedevelopment%2Fi18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconedevelopment%2Fi18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconedevelopment%2Fi18n/lists"}