How to use Laravel Vue i18n
The goal of this package is to have the closest experience that is available with the Laravel Localization but for the frontend side.
If you prefer a video screencast you can check out this:
Install Laravel
Lets install a brand new Laravel project with Jetstream, to have some Laravel with Vue3 Inertia Scaffolding.
Go to you code directory and run:
With all of that installed, lets run the migrations (make sure to update the .env
file with the correct database settings):
Usage
With all the Laravel instalation process complete, go ahead and install the plugin:
Now open the resources/js/app.js
file and import laravel-vue-i18n
:
Bellow, inside the setup
method you can now apply the plugin to the Vue instance:
With all of that done, now you can use the plugin with the $t()
mixin.
To try it out, open the resources/js/Pages/Welcome.vue
and use the mixin:
then, you can open the lang/en.json
file and add a new translation for that sentence:
And its done! If you reload the page you should see the translated sentence in there.
How to use .php
translation files
Now if you want to go a step further and also have the .php
translation files available on frontend, not possible out of the box since the browser can't open the .php
files, for that you can we can use the mix plugin provided by the plugin.
To set it up, open the webpack.mix.js
and require the mix plugin:
and just include the plugin, under the mix chain:
With this done, you can start using the .php
translation files on your .vue
files like this:
And thats all you need to have the plugin working with both .json
and .php
translations!
You can find more information on GitHub, and make sure to give it a ⭐️ star!