Jeff Madsen has a new post to his site showing you how integrate Laravel's translations strings with a Vue.js frontend making it simpler to maintain only one source for the translation of content in your application.

One issue you will face if you need to make a multi-lingual site is how to keep your translations organized for both your back-end framework and your javascript components. I’m going to demonstrate the basic technique for this, using Laravel and Vue.js for my example.

While his examples make use of Laravel and Vue.js, the approach is agnostic of most tools and could be modified to integrate with other technologies pretty easily. He builds a system where the translations are kept in PHP files which are converted into something Vue can read and use. He starts with the backend, showing how to use Laravel's localization functionality to set up the files and shift between languages. He then makes use of the lang.js library to pull the contents of these files into Vue and adds in a bit of code to push those values into components.