2 |
3 | > Laravel Translator for Frontend
4 |
5 | Laravel Translator is a package that allows you to use Laravel's localization features in your frontend code, with
6 | the same syntax you would use in your backend code and zero configuration.
7 |
8 | This package was inspired by [laravel-vue-i18n](https://github.com/xiCO2k/laravel-vue-i18n)
9 | and [lingua](https://github.com/cyberwolf-studio/lingua).
10 |
11 | ## 🧩 Features
12 |
13 | - Frontend framework-agnostic, works with any framework or even plain javascript (and even without Laravel)
14 | - Use the same translation files you use in your backend code (both php and json files are supported)
15 | - No extra configuration required: install, register and use
16 | - Zero SSR configuration required
17 | - No export step required, translations are parsed and bundled directly from your backend code by Vite
18 | - Support for hot reloading
19 | - Minimal and lightweight
20 |
21 | ## 🚀 Installation
22 |
23 | *ViteJS is required to use this package.*
24 | Install the package via npm or yarn:
25 |
26 | ```bash
27 | npm install -D laravel-translator
28 | ```
29 |
30 | In your `vite.config.js` file, register the plugin:
31 |
32 | ```js
33 | import {defineConfig} from 'vite'
34 | import laravelTranslator from 'laravel-translator/vite'
35 |
36 | export default defineConfig({
37 | plugins: [
38 | // ...
39 | laravelTranslator()
40 | ]
41 | })
42 | ```
43 |
44 | Run `npm run dev` to start the development server, or `npm run build` to build your assets for production.
45 |
46 | Remember to set the language in your `html`, for example in your `app.blade.php` file:
47 |
48 | ```html
49 |
50 |
51 | ```
52 |
53 | If you want to also pass the fallback locale to your frontend code, you can do so by adding the following line to your
54 | `app.blade.php` file:
55 |
56 | ```html
57 |
58 |
61 | ```
62 |
63 | ## 🧑💻Usage
64 |
65 | You can import the usual Laravel translation functions from the `laravel-translator` package:
66 |
67 | ```js
68 | import {__, trans, t, trans_choice} from 'laravel-translator'
69 |
70 | __('user.welcome', {name: 'John'}) // Welcome, John!
71 | trans('auth.failed') // These credentials do not match our records.
72 | t('auth.failed') // ...
73 |
74 | trans_choice('user.count', 1) // User
75 | trans_choice('user.count', 2) // Users
76 | ```
77 |
78 | #### Svelte
79 |
80 | ```html
81 |
82 |
85 |
86 | {__('page.content')}
89 | ``` 90 | 91 | #### Vue 92 | 93 | Register the plugin: 94 | ```js 95 | ... 96 | .use(LaravelTranslatorVue, { 97 | locale: 'it' 98 | // fallbackLocale: 'en', optional 99 | }) 100 | ... 101 | ``` 102 | 103 | Use the functions function in your components: 104 | 105 | ```html 106 | 107 |{{ __('page.content') }}
111 |{{ t('page.content') }}
112 |{{ trans('page.content') }}
113 |{{ trans_choice('page.content') }}
114 |