Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergix44/laravel-translator-js
Laravel localization bridge for your frontend.
https://github.com/sergix44/laravel-translator-js
frontend i18n laravel localization reactjs svelte translate translation vue
Last synced: 10 days ago
JSON representation
Laravel localization bridge for your frontend.
- Host: GitHub
- URL: https://github.com/sergix44/laravel-translator-js
- Owner: sergix44
- License: mit
- Created: 2023-12-13T23:53:58.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-04-18T08:07:37.000Z (7 months ago)
- Last Synced: 2024-05-14T00:04:32.153Z (6 months ago)
- Topics: frontend, i18n, laravel, localization, reactjs, svelte, translate, translation, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/laravel-translator
- Size: 133 KB
- Stars: 19
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> Laravel Translator for Frontend
Laravel Translator is a package that allows you to use Laravel's localization features in your frontend code, with
the same syntax you would use in your backend code and zero configuration.
This package was inspired by [laravel-vue-i18n](https://github.com/xiCO2k/laravel-vue-i18n)
and [lingua](https://github.com/cyberwolf-studio/lingua).
## 🧩 Features
- Frontend framework-agnostic, works with any framework or even plain javascript (and even without Laravel)
- Use the same translation files you use in your backend code (both php and json files are supported)
- No extra configuration required: install, register and use
- Zero SSR configuration required
- No export step required, translations are parsed and bundled directly from your backend code by Vite
- Support for hot reloading
- Minimal and lightweight
## 🚀 Installation
*ViteJS is required to use this package.*
Install the package via npm or yarn:
```bash
npm install -D laravel-translator
```
In your `vite.config.js` file, register the plugin:
```js
import {defineConfig} from 'vite'
import laravelTranslator from 'laravel-translator/vite'
export default defineConfig({
plugins: [
// ...
laravelTranslator()
]
})
```
Run `npm run dev` to start the development server, or `npm run build` to build your assets for production.
Remember to set the language in your `html`, for example in your `app.blade.php` file:
```html
```
If you want to also pass the fallback locale to your frontend code, you can do so by adding the following line to your
`app.blade.php` file:
```html
window.fallbackLocale = "{{ config('app.fallback_locale') }}"
```
## 🧑💻Usage
You can import the usual Laravel translation functions from the `laravel-translator` package:
```js
import {__, trans, t, trans_choice} from 'laravel-translator'
__('user.welcome', {name: 'John'}) // Welcome, John!
trans('auth.failed') // These credentials do not match our records.
t('auth.failed') // ...
trans_choice('user.count', 1) // User
trans_choice('user.count', 2) // Users
```
#### Svelte
```html
import {__} from "laravel-translator"
{__('page.title')}
{__('page.content')}
```
#### Vue
Register the plugin:
```js
...
.use(LaravelTranslatorVue, {
locale: 'it'
// fallbackLocale: 'en', optional
})
...
```
Use the functions function in your components:
```html
{{ __('page.title') }}
{{ __('page.content') }}
{{ t('page.content') }}
{{ trans('page.content') }}
{{ trans_choice('page.content') }}
```
### Advanced usage
It's possible to set the locale and the fallback locale manually, by using the `setLocale` function:
```js
import {setLocale} from "laravel-translator"
setLocale('it') // Set the locale to 'it'
setLocale('it', 'en') // Set the locale to 'it' and the fallback locale to 'en'
```
You can add additional path where to look for translation files on the Vite plugin options:
```js
import {defineConfig} from 'vite'
import laravelTranslator from 'laravel-translator/vite'
export default defineConfig({
plugins: [
// ...
laravelTranslator({
langPath: 'resources/js/translations', // By default, the package looks for translations in the 'lang' folder
additionalLangPaths: ['vendor/my-package/lang'] // You can add additional paths where to look for translations
})
]
})
```
## ⚙️ How it works
This package uses [Vite](https://vitejs.dev/) Virtual Modules feature to parse your translations files and make them
available in your frontend code, without the need to export them to a separate file.
In development mode, the translations are parsed and bundled on the fly, and hot reloaded when the files change.
In production mode, the translations are parsed and bundled automatically when you run `npm run build`.
## ⚖️ License
The MIT License (MIT). Please see [License File](LICENSE) for more information.
## 🏅 Credits
- [Sergio Brighenti](https://github.com/sergix44/)
- [All Contributors](https://github.com/sergix44/laravel-translator-js/contributors)