Internationalization support could be an easy task, you can easily create objects and then get the proper language by a key, but if you want to create a solid project in the long run, sooner or later you are going to have to face some challenges.
There are some options to set the proper language of a site, it could be by reading a query param from the URL or getting the browser lang config, or by selecting it from a select or dropdown component.
I played with two different libraries:
The one I liked was the second one, typesafe-i18n
, it includes a lot of features out-the-box, so on this occasion, I would like to walk you through the installation of this tool to create a multi-language app.
First and foremost, create a svelte-kit project:
npm create svelte@latest i18n-sveltekit
Some of the options that I selected are shown in the image below:
Installing and configuring typesafe-i18n
npm install -D typesafe-i18n
Next, we need to run the setup process, we can do it by a manual process by answering questions or generating the configuration automatically, so we are going for the automatic setup:
npx typesafe-i18n --setup-auto
That command will generate the file .typesafe-i18n.json
, we will ensure that we have the key adapter=svelte
, like so:
{
"adapter": "svelte",
"$schema": "https://unpkg.com/typesafe-i18n@5.24.3/schema/typesafe-i18n.json"
}
and our package.json
file was updated with a new script:
"scripts" {
...,
"typesafe-i18n": "typesafe-i18n"
}
Let's run it and see what happens:
npm run typesafe-i18n
If we open the project structure again, we are going to find out that we have new folders and files inside of them:
That command/script generated all the configuration we need to support the internationalization feature in our app, but there are still some steps that we need to do to customize how we are going to switch between languages.
Running the app and typesafe-i18n
typesafe-i18n
needs to update the files seen above, so it will work in real-time since it generates types, configurations, etc, at the same time we are running our development server, that being said, let's install another package to accomplish that.
npm install npm-run-all -D
Then, we will update our package.json
- "dev": "vite dev",
+ "dev": "npm-run-all --parallel typesafe-i18n vite:dev",
+ "vite:dev": "vite dev",
Now, if we run the script npm run dev
, you will see that our script runs the typesafe-i18n
configuration and our development server
.
Let's get down to the nitty-gritty
Now we can start adding support for english
by default:
-
Head to the file
src/i18n/en/index.ts
and add a new key that sayswelcome
:
{ ..., welcome: 'to your new SvelteKit app' }
When you save it, you will immediately see a change in the file
src/i18n/i18n-types.ts
where ourwelcome
key was added, so, that will help us a lot to autocomplete our objects in real-time thanks totypesafe-i18n
andtypescript
. Let's create a
+layout.ts
file inside ofsrc/routes/
with the following content:
import type { LayoutLoad } from './$types';
import { loadLocaleAsync } from '../i18n/i18n-util.async';
import { setLocale } from '../i18n/i18n-svelte';
export const load: LayoutLoad = async (event) => {
const locale = 'en';
await loadLocaleAsync(locale);
setLocale(locale);
return event.data;
};
We set locale
to en
manually, but we are going to change it in a few minutes, for now, what we are interested in is being able to load our basic configuration and test if it is working.
- In our
src/routes/+page.svelte
let's locale the line that saysto your new SvelteKit app
, and we will change with this new line:
First, add this import:
import { LL } from '../i18n/i18n-svelte';
Then, change the line and add this content instead:
{$LL.welcome()}
With that change placed, you should be able to see the text in a single line in your app:
Before:
After:
You will notice that the text now is occupying a single line instead of two, we need to fix that, but what matters here is the fact that our internationalization config is working and we can add a new language, let's add support for spanish
.
Adding support for Spanish
Remove the unused directory
src/i18n/de
'Add this folder and its index file:
src/i18n/es/index.ts
Add the following content:
import type { Translation } from '../i18n-types';
const es = {
welcome: 'a tu nueva aplicacion en SvelteKit'
} satisfies Translation;
export default es;
-
Let's change the
locale
variable of oursrc/routes/+layout.ts
file:
- const locale = 'en'; + const locale = 'es';
Now, you will see that text in our app is shown in Spanish:
Our multi-language app is almost ready, but we still need to add a way to change the language dynamically and allow users to change it manually, since what we have to do to accomplish it is by changing the locale
variable to switch between english
and spanish
, so let's do it in the second part.
Top comments (0)