{"id":16674813,"url":"https://github.com/sergix44/laravel-translator-js","last_synced_at":"2025-03-21T18:31:29.406Z","repository":{"id":212638732,"uuid":"731371666","full_name":"sergix44/laravel-translator-js","owner":"sergix44","description":"Laravel localization bridge for your frontend.","archived":false,"fork":false,"pushed_at":"2024-04-18T08:07:37.000Z","size":136,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-14T00:04:32.153Z","etag":null,"topics":["frontend","i18n","laravel","localization","reactjs","svelte","translate","translation","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/laravel-translator","language":"TypeScript","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/sergix44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"sergix44"}},"created_at":"2023-12-13T23:53:58.000Z","updated_at":"2024-05-16T20:47:16.198Z","dependencies_parsed_at":"2024-04-17T10:45:43.575Z","dependency_job_id":"7c5ac5a3-d441-4fa7-8657-b8109e16933a","html_url":"https://github.com/sergix44/laravel-translator-js","commit_stats":null,"previous_names":["sergix44/laravel-translator-js"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergix44%2Flaravel-translator-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergix44%2Flaravel-translator-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergix44%2Flaravel-translator-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergix44%2Flaravel-translator-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergix44","download_url":"https://codeload.github.com/sergix44/laravel-translator-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221817458,"owners_count":16885544,"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":["frontend","i18n","laravel","localization","reactjs","svelte","translate","translation","vue"],"created_at":"2024-10-12T12:44:28.019Z","updated_at":"2024-10-28T10:34:02.857Z","avatar_url":"https://github.com/sergix44.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sergix44"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://banners.beyondco.de/Laravel%20Translator.png?theme=dark\u0026packageManager=npm+install\u0026packageName=-D+laravel-translator\u0026pattern=wiggle\u0026style=style_1\u0026description=A+localization+bridge+for+your+frontend.\u0026md=1\u0026showWatermark=0\u0026fontSize=100px\u0026images=translate\"\u003e\n\n\u003e Laravel Translator for Frontend\n\nLaravel Translator is a package that allows you to use Laravel's localization features in your frontend code, with\nthe same syntax you would use in your backend code and zero configuration.\n\nThis package was inspired by [laravel-vue-i18n](https://github.com/xiCO2k/laravel-vue-i18n)\nand [lingua](https://github.com/cyberwolf-studio/lingua).\n\n## 🧩 Features\n\n- Frontend framework-agnostic, works with any framework or even plain javascript (and even without Laravel)\n- Use the same translation files you use in your backend code (both php and json files are supported)\n- No extra configuration required: install, register and use\n- Zero SSR configuration required\n- No export step required, translations are parsed and bundled directly from your backend code by Vite\n- Support for hot reloading\n- Minimal and lightweight\n\n## 🚀 Installation\n\n*ViteJS is required to use this package.*\nInstall the package via npm or yarn:\n\n```bash\nnpm install -D laravel-translator\n```\n\nIn your `vite.config.js` file, register the plugin:\n\n```js\nimport {defineConfig} from 'vite'\nimport laravelTranslator from 'laravel-translator/vite'\n\nexport default defineConfig({\n    plugins: [\n        // ...\n        laravelTranslator()\n    ]\n})\n```\n\nRun `npm run dev` to start the development server, or `npm run build` to build your assets for production.\n\nRemember to set the language in your `html`, for example in your `app.blade.php` file:\n\n```html\n\n\u003chtml lang=\"{{ app()-\u003egetLocale() }}\"\u003e\n```\n\nIf you want to also pass the fallback locale to your frontend code, you can do so by adding the following line to your\n`app.blade.php` file:\n\n```html\n\n\u003cscript\u003e\n    window.fallbackLocale = \"{{ config('app.fallback_locale') }}\"\n\u003c/script\u003e\n```\n\n## 🧑‍💻Usage\n\nYou can import the usual Laravel translation functions from the `laravel-translator` package:\n\n```js\nimport {__, trans, t, trans_choice} from 'laravel-translator'\n\n__('user.welcome', {name: 'John'}) // Welcome, John!\ntrans('auth.failed') // These credentials do not match our records.\nt('auth.failed') // ...\n\ntrans_choice('user.count', 1) // User\ntrans_choice('user.count', 2) // Users\n```\n\n#### Svelte\n\n```html\n\n\u003cscript\u003e\n    import {__} from \"laravel-translator\"\n\u003c/script\u003e\n\n\u003ch1\u003e{__('page.title')}\u003c/h1\u003e\n\n\u003cp\u003e{__('page.content')}\u003c/p\u003e\n```\n\n#### Vue\n\nRegister the plugin:\n```js\n...\n.use(LaravelTranslatorVue, {\n    locale: 'it'\n    // fallbackLocale: 'en', optional\n})\n...\n```\n\nUse the functions function in your components:\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003e{{ __('page.title') }}\u003c/h1\u003e\n\n        \u003cp\u003e{{ __('page.content') }}\u003c/p\u003e\n        \u003cp\u003e{{ t('page.content') }}\u003c/p\u003e\n        \u003cp\u003e{{ trans('page.content') }}\u003c/p\u003e\n        \u003cp\u003e{{ trans_choice('page.content') }}\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Advanced usage\n\nIt's possible to set the locale and the fallback locale manually, by using the `setLocale` function:\n\n```js\nimport {setLocale} from \"laravel-translator\"\n\nsetLocale('it') // Set the locale to 'it'\nsetLocale('it', 'en') // Set the locale to 'it' and the fallback locale to 'en'\n```\n\nYou can add additional path where to look for translation files on the Vite plugin options:\n\n```js\nimport {defineConfig} from 'vite'\nimport laravelTranslator from 'laravel-translator/vite'\n\nexport default defineConfig({\n    plugins: [\n        // ...\n        laravelTranslator({\n            langPath: 'resources/js/translations', // By default, the package looks for translations in the 'lang' folder\n            additionalLangPaths: ['vendor/my-package/lang'] // You can add additional paths where to look for translations\n        })\n    ]\n})\n```\n\n## ⚙️ How it works\n\nThis package uses [Vite](https://vitejs.dev/) Virtual Modules feature to parse your translations files and make them\navailable in your frontend code, without the need to export them to a separate file.\n\nIn development mode, the translations are parsed and bundled on the fly, and hot reloaded when the files change.\n\nIn production mode, the translations are parsed and bundled automatically when you run `npm run build`.\n\n## ⚖️ License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n## 🏅 Credits\n\n- [Sergio Brighenti](https://github.com/sergix44/)\n- [All Contributors](https://github.com/sergix44/laravel-translator-js/contributors)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergix44%2Flaravel-translator-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergix44%2Flaravel-translator-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergix44%2Flaravel-translator-js/lists"}