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!