Translations with Laravel and Inertia
This episode is for members only

Sign up to access "Translations with Laravel and Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
08. Building a tiny translation helper in JavaScript

Episodes

0%
Your progress
  • Total: 57m
  • Played: 0m
  • Remaining: 57m
Join or sign in to track your progress

Transcript

00:00
Now that we have access to our translations, what we can do is build a tiny JavaScript helper to allow us to access these and also add in the attributes in here. So replace the attributes that we found. So we're going to head over to our JavaScript section. So let's close everything off
00:20
here under resources.js. I'm just going to create this in the root directory and call it lang.js, but of course feel free to put this in a helper's directory wherever you need. So this file is just going to export a function that looks similar to Laravel double underscores here and will allow us to pass in, if we just define this out, a key that we can read. So we'll just work with a key for now
00:45
and then we will look at the replacements that we want to pass in. So for now I'm just going to return in here works and this function needs to be a globally available to all of our components at any time. So how do we do that? Well we're going to come over to resources.js and app.js and we're going to add this in as a global within here. To do this we want to just tweak this. So
01:09
I'm going to go ahead and assign create app to a variable, then at the end we're going to mount this, but that means that in between here what we can do is modify the app. So this is the view app instance. This is nothing necessarily to do with inertia. So what we can do with this is we can actually add in a global properties or add to our global properties inside of here. So we're going
01:34
to create an underscore underscore global property and we're going to assign that to the function that we've just created in here. So we haven't imported this, so let's import this up here. So import double underscore from lang and if we come down we can just assign that to that double underscore function. Of course you could call that function something different if you wanted to, but
01:55
we just want to know it works for now. So over in our dashboard component let's try and do this. Let's try and invoke this and see what we get. So we want to end up with something like dashboard dot greeting and let's head over and sure enough we get back what we need. So this function is now globally available in all of our components so we can use this absolutely anywhere.
02:17
All that we need to do now is just fill in this to grab the right key back basically. So the first thing we need to do is access our global properties. So to do this we're going to go ahead and import use page from inertia like so and then down here what we can do is create out the translation that we want to get back from that key. So we're going to invoke use page, we're going to go into props,
02:44
we're going to go into translations. So this is basically like what we would do within our template but of course we're not in a template so we need to use the use page composable and then we want to access the key. Now the key might not be available so if the key isn't available we're going to just return the key so that will just dump the key on the page. We don't want to cause
03:03
an error here if the translation key isn't available so it's important that we do that and then we're just going to return the translation in here. So that's the most simple way that we could do things if we're not dealing with attributes. Let's go over and take a look and there we go. So now what I can actually do is switch between English and German and already
03:24
the reactivity of this based on the props that we get passed down when we change our language is showing us the new value because the props have changed and this is now reading from a different object so that is working really nicely. Let's just test out what happens if we define something that doesn't exist so greetings dot greeting for example and you can see it just dumps out
03:47
the actual key so that's helpful and then as a developer we can see well that obviously doesn't exist so I need to go ahead and add it. So that is working nicely and we're getting the actual translation through that we want to see. Now we need to figure out how to add in the replacement so as a second argument to this we're going to go ahead and accept in the replacements which is
04:07
just going to be an object of things that we want to replace and down here what we can do is grab the keys for them iterate over them and then replace these out with javascript. So to do this let's go ahead and just console log out on object keys on our replacements let's see what this gives us by opening up our console and you can see we get an array in here at the moment of nothing so
04:30
we know that for this particular translation we want to pass in the user's name so let's pass in the name as page props auth user name that will give me the currently authenticated user's name and sure enough you can see now we've got name that is what we need to replace out with the value contained within that key so over in here what we can now do is grab this iterate over it
04:56
and for each replacement we can go ahead and make a replacement on this translation that we've plucked out so we're going to overwrite the translation with a replaced version of this so we can use javascript's replace method to do this and this looks like this colon so that's what we want to replace and we want to replace the replacement which remember this equals something
05:23
like name so we want to basically take we just open up our auth file here or our dashboard file we want to replace this with a colon and if we just go down here with the replacements that we've passed in and the key at that thing so basically as we go through each of these like name or whatever other replacements you have in there replace that colon value with the actual
05:49
replacement that we have passed in to here and the actual value of that replacement so if we head over here there we go we've got welcome alex and of course if we change this to english we've got the english version here as well now this solution isn't perfect there are probably edge cases where we're going to have things that just don't quite work or more advanced usage more that won't might
06:10
not work but of course you can pull in a library to do this if you need to or just add to what we've already built but for the majority 80% of cases this is going to be enough it's very lightweight it's very clean and we haven't had to pull in any kind of library to deal with this so there we go we now have our translations showing of course with our attribute replacements

Episode summary

In this episode, we're building a super lightweight JavaScript translation helper that mimics the familiar Laravel translation functionality, but for our frontend. We start off by creating a new file, lang.js, which exports a function (we call it __) to look up translation keys and handle replacement attributes (like user names in greetings).

We make this function globally available to all our Vue components by adding it to the app instance's global properties. That way, we can use it anywhere in our app without having to import it each time.

Next, we wire up the function to actually fetch translations using data that's already passed to our app as props. If a key we try to access doesn't exist, our helper just returns the key itself—super handy for debugging missing translations.

The core challenge is supporting dynamic replacements (like injecting a name into a welcome message). We add support for an object of replacements, then use JavaScript's string replace method to sub in the correct values wherever we have :attribute placeholders in our translations.

We finish by showing that everything reacts nicely: switching languages updates the UI instantly, and trying a missing key just spits out the key (not an error). Bonus: you don't need to pull in any heavy libraries—this tiny helper gets you most of the way for typical translation scenarios!

If you need more advanced i18n stuff later, you can easily upgrade, but for now, we have a clean and simple translation solution that just works.

Episode discussion

No comments, yet. Be the first!