Translations with Laravel and Inertia
Playing
01. Introduction and a fresh project

Episodes

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

Transcript

00:00
Localization or translating content is pretty easy to work with in Laravel. That is, if you are using blade templates. Soon as you introduce components like view components with inertia into your app,
00:14
you don't have the helper functionality to access your translations because these are all stored on the back end and you don't have any helpers on the front end to easily translate content. So what we're going to be doing in this course is working through, first of all, this translation or language switcher where we can switch up the languages.
00:36
And second of all, we're going to create a helper on the client side that accesses all of our translation files. So we can very easily access these directly within any of our view components. And with this, we also have support for things like placeholders. So you can see that the translation I've got here for this dashboard greeting includes a name,
00:56
which is, of course, going to change between different users. And if you have, say, validation rules, they have attributes that need to be replaced. So we're going to go ahead and cover all of this and we're going to be building this all from scratch. There are some really good packages that allow you to sort of bundle this,
01:12
but I found that they can be a little bit cumbersome. And this gives us the opportunity to work through and see how we can do this in the lightest way possible. So this is pretty much all we're doing here. We've got two languages that we've chosen.
01:25
These are driven by a PHP enum, which makes it really easy. So if we need to add languages in the future, we just need to do this in one place and it will be reflected absolutely everywhere. But as you can see, this just translates or switches the translations on the page.
01:39
And it, of course, does this without any kind of page refresh, because we're just getting the new translations that we should be using into the page via a global prop, which allows us to show these on the page. So we're going to be keeping things super simple here.
01:53
The most simple implementation that we need to get these translations on the page working and the cleanest solution as well. And this will work for things like validation rules as well. So over in our profile, if we have this set to German,
02:06
and for example, we forget to include our name, you can see that we have the rough German translation there as well. If we switch this over to English and we resubmit this, you can see that it's automatically updated.
02:17
So very, very easy to use. Let's go ahead and first of all, get a fresh Laravel installation in with Breeze and we can start working with this. So we'll do that just now.
02:27
OK, so we're going to start out with a completely fresh Laravel application so we can focus on what we need to do. And I'm going to call this Inertia Translations. Now, I'm going to be using the word translations throughout the course.
02:39
But of course, technically, we would call this localization. I just find it a little bit easier to deal with this by calling it translations. It just gives us a better idea of what's happening. But of course, with all of the code in this, if you are following along,
02:52
feel free to change around the terminology if you need to. So we're going to go ahead and install this with the Breeze option, making sure that we've got the Laravel installer up to date. What that will allow us to do is then just go through and choose our stack.
03:05
So we're going to choose View here, which we use Inertia. We are going to be running tests here and writing tests. So we're going to choose Pest as our testing framework. We don't necessarily need dark support mode.
03:15
So we're just going to wait for that to finish. OK, so that is all installed. The first thing that we're going to do is head over to our EMV file and just switch out our database credentials really quickly.
03:24
So I've already got a database here called Inertia Translations. Switch over the username and we're good to run our migrations. So let's do that really quickly. PHP artisan migrate.
03:34
And then we're going to go ahead and run npm run dev. And we're going to open this up in our browser just to make sure it looks good. Make sure that we can register an account here. We're just going to be using the dashboard.
03:45
Test this out. So let's create a really quick account. And there we go. We're over on our dashboard.
03:50
This is where our dropdown is going to go. We're going to keep that pretty simple. And then we're just going to translate a piece of text on our dashboard. We also need to configure our test.
03:59
So the first thing I'm going to do is head over to the PHP unit XML file in the root directory. And I'm going to uncomment these two lines here. So we use SQLite for our database testing.
04:11
And with that done, we can pretty much just go ahead and run Pest here. We have some example tests and also tests for all of our authentication stuff. They should all pass. And we will be adding to them a little bit later on.
04:23
So that is our app set up. In the next episode, we're going to go ahead and discuss how we're going to store the available languages that we have. And we're going to do that with a PHP enum so we can use this everywhere in our app.
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!

Comments

No comments, yet. Be the first to leave a comment.