Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sapper/SvelteKit i18n separation by route

See original GitHub issue

Is your feature request related to a problem? Please describe. Thank you once more for a great library. So the question is how to handle big-size projects with many pages. Is there any way to split translations by route and load only needed?

Describe the solution you’d like Let’s say

  • en
    • main
    • about
    • etc
  • de
    • main
    • about
    • etc

With the ability to asynchronously load any JSON in ssr/runtime from index.svelte of the selected route.

import { _, get, locale} from "svelte-i18n";
$: if (lang) get(async () => import(`../${locale}/main.json`))

How important is this feature to you? Probably it would be useful on every big-size project.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

Basssiiiecommented, Sep 20, 2021

Update, after some fiddling I have managed to get load to work with the static adapter and it seems to hydrate as well:

<script lang="ts" context="module">
	import type { Load } from "@sveltejs/kit";
	import { register, waitLocale } from "svelte-i18n";

	register("en", () => import("./localisation/extra/en.json"));
	register("nl", () => import("./localisation/extra/nl.json"));

	export const load: Load = async () =>
		await waitLocale();
		return {};


Of course it doesn’t cover all your asked questions, but I hope it’s helpful!

thousandsofraccoonscommented, Oct 5, 2021

@Basssiiie @kaisermann After experimenting turns out that separation by route works. Only one thing for Sapper tho - when I return something from preload - translation getting broken. With declaring wirtable in module it works well. Thank you. Can close this issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

i18n brainstorming · Issue #553 · sveltejs/kit - GitHub
I understand that it require server configuration, that common Sapper user may not to know how to do. Maybe we could have config...
Read more >
How to internationalize routing in Svelte & Sapper - Leaf Cloud
This post is specifically to explain how to make a Sapper site which does path based internationalization routing. So something like this:.
Read more >
Migrating from Sapper • Docs • SvelteKit
The bulk of your app, in src/routes , can be left where it is, but several project files will need to be moved...
Read more >
Elder.js: A Svelte Framework and Static Site Generator
Elder.js is an opinionated Svelte framework and static site generator used for building blazing fast, user friendly websites.
Read more >
Svelte i18n reset language on page change - Stack Overflow
Now, with this, the language change correctly, but when I navigate to a new route using for exemple <a href={link} aria-label={$_('i18n.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found