Weave Code
Laravel Js Localization Laravel Package
mariuzzo/laravel-js-localization
Export Laravel translation files to JavaScript. Generate a JS bundle (with Lang.js) via artisan to use familiar Laravel-style trans() and pluralization on the frontend. Supports Laravel 4.2 through 8.x, with options to choose files and output path.
🌐 Convert your Laravel messages and consume them in the front-end!
Frequently asked questions about Laravel Js Localization
- How do I use Laravel translations in a Vue.js or React app with this package?
- After generating the JS bundle with `php artisan js-localization:generate`, include the output file in your frontend. Use `window.jsLocalization.trans()` just like Laravel’s `trans()` helper. For Vue/React, import the JS file or use a plugin like `vue-i18n` with the exported translations as the source.
- Does this package work with Laravel 8.x and Vite?
- Yes, it works with Laravel 8.x. For Vite, place the generated JS file in `resources/js/` and import it directly. The package doesn’t require Webpack; it outputs a standalone JS file compatible with any asset pipeline. Use `asset('js/localization.js')` in Blade or reference it directly in your Vite config.
- Can I selectively export only specific language files instead of all of them?
- Yes, the package allows filtering which language files to convert. Use the `--locales` option with the `js-localization:generate` command, e.g., `php artisan js-localization:generate --locales=en,es`. This reduces bundle size and speeds up generation for multi-language apps.
- How does this handle pluralization and translation fallbacks?
- The package leverages Lang.js, which mirrors Laravel’s `Translator` class. Pluralization works via the same syntax as Laravel’s `trans_choice()`, and fallbacks are configured in `config/js-localization.php` under `fallback_locale`. For example, set `'fallback_locale' => 'en'` to default to English if a translation is missing.
- Will this package slow down my frontend performance if I have many translations?
- Performance depends on bundle size. For large translation sets, use the `--locales` flag to split files or lazy-load translations dynamically. Test with tools like Lighthouse to measure impact. The generated JS is minified by default, and you can further optimize by excluding unused locales or using CDN caching.
- How do I update translations on the frontend after a language switch?
- Use `window.jsLocalization.setLocale('es')` to switch languages dynamically. The package caches translations in memory, so switching is instant. For frameworks like Vue, bind the current locale to a reactive variable and trigger updates via a computed property or watcher.
- Is there a way to integrate this with Laravel’s middleware for locale detection?
- Yes, combine this package with Laravel’s `SetLocaleMiddleware` or custom middleware. Detect the user’s locale (e.g., via headers or session) in middleware, then set it in JavaScript with `jsLocalization.setLocale()`. Example: `window.jsLocalization.setLocale('{{ app()->getLocale() }}');` in your Blade layout.
- Does this package support right-to-left (RTL) languages like Arabic or Hebrew?
- Yes, the package itself handles RTL languages as long as your Laravel translation files include the correct Unicode characters. However, ensure your frontend framework (e.g., Vue/React) supports RTL directionality. The generated JS translations are plain text and will render correctly if your app’s CSS/HTML supports RTL.
- What’s the difference between this package and using Laravel Mix’s `laravel-localization-loader`?
- This package (`mariuzzo/laravel-js-localization`) generates a standalone JS file with Lang.js, ideal for simple setups or non-Webpack projects. The `laravel-localization-loader` is a Webpack loader that dynamically imports translations at build time, offering better tree-shaking and lazy-loading for complex SPAs. Choose this package for simplicity or Webpack for advanced optimization.
- How do I test locale switching in my CI pipeline?
- Use headless browsers like Puppeteer or Selenium in your CI to test JavaScript locale switching. Mock the `jsLocalization` object in tests or use a testing library like Jest to verify translations. Example: `expect(window.jsLocalization.trans('messages.welcome')).toBe('¡Bienvenido!');` after setting the locale.
Weaver
How can I help you explore Laravel packages today?