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
07. Sharing all translations with Inertia

Episodes

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

Transcript

00:00
For the language that we've selected, we now need to get access to the actual translations on the client side. Because these exist within files on our back end,
00:09
we don't actually have access to these on the client side. Even though we're using inertia and everything is tightly coupled, we still need to share these so we can output them.
00:18
And you probably already guessed, we're going to go ahead and share these over in handle inertia requests under the share method. So we're going to end up with a kind of translations
00:28
key in here with an array of keys that look a little bit like this. Let's go over to our language file for auth. And we want these to be prefixed by auth.
00:37
We want these in dot notation. So we want something like auth dot and then each of the keys inside of here. So we want auth dot failed,
00:45
and we want that to contain a value. And we want this to be for the current locale that we are using. We don't want to output all translations.
00:53
We just want the current language that we have selected. So we're going to go ahead and build this up. We're going to read from files. It's not going to be the most efficient at the moment.
01:01
We will need to cache this, which we'll do in another episode. And then we'll write a test at the end just to verify all of this.
01:08
So the first thing that I'm going to do is just create out another translation file for German, because we don't actually have any of them yet. And I'm going to create a dashboard dot PHP file in here.
01:19
And that's just going to contain a greeting. So let's create out a greeting in here. And let's just say, Willkommen. And then we want an attribute in here as well,
01:29
because we're going to need to handle them on the front end as well. So we can inject content into each of our translations. So we'll add the same translation to English.
01:39
So we have access to the same one, but of course the language here is just going to change. Okay, so let's make a start on doing this within here, and we will dump these out to the page.
01:49
So first of all, head over to dashboard. Let's go ahead and output translations. And of course, at the moment, we don't see anything. Okay, so let's go and create a closure for this.
02:00
And inside of here, we basically need to read all of the translation files in the directory for the locale that is currently selected. How do we do this?
02:10
Let's first die dump on how we build this path up. We can use the base path helper within Laravel to allow us to do this. And we can go into the lang directory,
02:18
and then we need something like en or de. So very easily, we can just append onto here. Just, well, we can do this within here, add app, and then get locale.
02:29
We've already seen using this method. So that will give us, if we just head over, the following. So inertia translations, lang, and then German. We currently have German selected,
02:39
but of course, if that was English, it would be en. Now what we can do with this is go ahead and use the file facade. So let's pull that in from illuminate support facades.
02:49
And we can say all files. That will just basically grab us back an array of all of the files, if we just die dump on this again, all of the files within that particular directory.
03:01
And this will give us back an SPL file info with everything that we need. And then we can read into this file to get this back as an array.
03:08
So at the moment, we just have one file because we're working with German. But if we were to be working with English, we would see all of the files that we have inside of there.
03:16
So now that we've done this, we wanna map through this and then build up the structure that we need. And remember I said, we want this in dot notation. So let's just take this really slowly.
03:25
We're gonna go ahead and collect this up. So we have a Laravel collection and we're gonna use flat map. So we get a flattened collection at the end of this.
03:34
And we'll basically just go through each of the files. So we get a file for each of these and then we can do something inside of here. So what we want to do is go and read this file first of all.
03:45
So let's die dump on file using that file facade and get require. So for each of these files, we're now reading in this data and we're gonna say file get real path to grab that.
03:57
If we go over and just give this a refresh, sure enough, we get an array back with that greeting inside of there. But we want this array to look like auth dot greeting
04:07
because otherwise if we merge all of these together, we might have the same keys in other translation files and that's not quite gonna work out. So to do this, we can actually use,
04:18
and if we just swap this over to use the array helper within Laravel, we can use array dot. What this will do is it will give us a dot notation depending on how our array is structured.
04:31
Now, if we just die dump on this, we're not gonna see much difference at the moment. So let's have a look at what we get. Looks exactly the same.
04:38
But if for example, over in here, this had a greetings wrapper and you had several greetings that you wanted to reference, what that is gonna give you is the following.
04:50
So that helper is really useful and allows us to just build up this dot notation really quickly. If we weren't doing that,
04:57
so if we were to get rid of that, for example, and just show you the file as it is, we would actually get a nest array in here, which is as we've established, not what we want.
05:07
So now that we've got this, we can actually go ahead and just return this from here and that will build up that array for us. So let's make sure we are returning the collection here
05:16
and we'll dump it out on the page and we'll see the problem. So this kind of looks good, but if we switch over to English here,
05:23
you can see that we've just got keys like failed password and we don't have the prefix to this that we need to know which file it has actually come from. So within here, let's build up that prefix
05:36
and we can actually pass this through to the second argument of array dot. So let's do that first of all, actually. So I'm gonna pull this down
05:44
and as the second argument, you can see, this is what we add as a prepend to this. So we want this to be something like auth and dot. So obviously that's not gonna work at the moment
05:54
because then everything becomes auth dot, but we can read this from the name of the file. So to do this, we're gonna go ahead and say file, get base name.
06:03
Now that's not quite enough. If we were to append on a dot at the end of that to prefix that, we end up with auth dot PHP dot, which is obviously not what we want.
06:14
As an argument to get base name, you can actually exclude something from this. So we wanna exclude the extension, which is dot PHP. So if we just give that a refresh, sure enough, it works.
06:24
Now we could leave it like that, but if you have other file extensions in here that you wanted to also ignore, you might have these stored as JSON, for example.
06:32
You might wanna go ahead and do this dynamically by providing in the file extension. So we can just say, get extension and spell that correctly, extension.
06:43
There we go, we're good. So there we go, we've now got auth dot failed. And then if we come down, you can see we've got validation between strings.
06:51
Everything is nicely dot notated for us to easily read on the client side. And let's just switch this back over to German. And you can see we've got dashboard,
07:00
which is the base name of this file, greetings and greeting. Now we're actually gonna change this around because we don't necessarily need a nested value for this one, but we know that this now works
07:13
and we can include that within our test as well. So we've now got a translation for both English and German, and we have these available on the page that we can read. Let's go ahead and write a test for this,
07:26
just so we know that this is working and we should be good to go. So we're gonna do this over in our language globals test. Let's do this down the bottom here.
07:35
So we're gonna say it contains all translations and let's go ahead and create our closure in here. And again, we're gonna do pretty much the same thing, just hit any page,
07:45
because we know that this is being shared by every page. And again, we're gonna use the assert inertia helper here to read that page data. So we have the assertable inertia class in here
07:57
and we're gonna call that page. Now with this, it's a little bit trickier because what we want to do is directly access the array, the props translations array,
08:07
and then use a pest specific assertion to check that it matches an array. I don't think you can actually do this with the inertia helpers for testing.
08:16
So what we're gonna do is just die dump in here and use array get, and we're gonna go ahead and grab page to array. Now we'll take a look at what this does in a second.
08:27
So let's just pull in our array helper first, and then we're gonna grab in here, props.translations. Let's just examine what's going on here. So page to array, what does that give us?
08:38
Well, let's open assertable inertia and look for that method. That gives us the component, the props, the URL and the version.
08:45
This is what we're after. So this method is gonna return to us an array, and then we can dive into props and we can dive into translations.
08:53
And if we just run our tests really quickly here, so pest tests feature and language globals test, you can see we get all of them translations. And if we go all the way up to the top here,
09:06
we can see that that is just a plain old array that we can now create an assertion on to make sure that something in here exists. And we're just gonna use this auth failed as an example.
09:16
And that just verifies that first of all, this translations prop does exist. And second of all, it's using the correct dot notation that we've built up.
09:24
So what we can do is now turn this into an expectation. So we're gonna say, expect this value to match array, and then we can pass in an array like auth failed, and you could even test out the nesting in here as well
09:37
if you wanted to. So let's go over to here and grab what we would expect to see and put that in there. And hopefully that contains that value.
09:47
We kind of already know it does because we've dumped it out, but let's rerun that test and just make sure. And sure enough, it does.
09:53
So you could add as many here as you want, just depending on if you wanna test nesting, that deep nesting that we've included, but that should be enough just to verify
10:02
that it contains the translations, they're in the correct format, they're prefixed by this auth, and they have the correct value.
9 episodes• 57 mins

Overview

Localisation is a breeze in Laravel applications, but what happens when you need to bring this to the client-side? Turns out in Inertia, it's pretty simple.

In this course, we'll build a language switcher, share translations with the client, and build a simple translation helper for Vue to use directly in templates. We'll also cover caching translations to keep things running smoothly.

The best part? With the magic of reactivity, we'll be able to switch languages without any page refresh, and see everything instantly translated.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!