Manual Setup
The recommended way to set up paraglide-sveltekit is to use the init cli. However, we stil maintain a manual setup page in case the auotmated setup fails or cannot be used for some reason.
1. Install dependencies
Install ParaglideJS and Paraglide-SvelteKit.
npx @inlang/paraglide-js init
npm i -D @inlang/paraglide-sveltekit
This will generate a messages/{lang}.json file for each of your languages. This is where your translation files live.
2. Add the Vite Plugin
Add the vite-plugin to your vite.config.js file. This will make sure to rerun the paraglide compiler when needed and add the link preprocessor.
// vite.config.js
import { paraglide } from "@inlang/paraglide-sveltekit/vite"
export default defineConfig({
plugins: [
paraglide({
//recommended
project: "./project.inlang",
outdir: "./src/lib/paraglide",
}),
sveltekit(),
],
})
3. Initialise Paraglide-SvelteKit
Create a src/lib/i18n.js file:
// src/lib/i18n.js
import { createI18n } from "@inlang/paraglide-sveltekit"
import * as runtime from "$lib/paraglide/runtime.js"
export const i18n = createI18n(runtime);
createI18n will be your one-stop shop for configuring i18n routing.
4. Add the Language Provider to your Layout
Add the ParaglideJS component to your layout and pass it the i18n instance.
If you're using Svelte 4 do it like so:
<!-- src/routes/+layout.svelte -->
<script>
import { ParaglideJS } from '@inlang/paraglide-sveltekit'
import { i18n } from '$lib/i18n.js'
</script>
<ParaglideJS {i18n}>
<slot />
</ParaglideJS>
or if you're using Svelte 5:
<!-- src/routes/+layout.svelte -->
<script>
import { ParaglideJS } from '@inlang/paraglide-sveltekit'
import { i18n } from '$lib/i18n.js'
const { children } = $props()
</script>
<ParaglideJS {i18n}>
{@render children}
</ParaglideJS>
5. Add the Hooks
In your src/hooks.js file, use the i18n instance to add the reroute hook:
// src/hooks.js
import { i18n } from '$lib/i18n.js'
export const reroute = i18n.reroute()
The reroute hook was added in SvelteKit 2.3.0
In src/hooks.server.js add the handle hook.
// src/hooks.server.js
import { i18n } from '$lib/i18n.js'
export const handle = i18n.handle()
This will make the language and text-direction on event.locals.paraglide.
To set the lang and dir attributes on your <html> tag add placeholders in src/app.html. These placeholders will be replaced by the handle hook.
<!-- src/app.html -->
<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
6. Add Types for event.locals.paraglide
In src/app.d.ts
// src/app.d.ts
import type { AvailableLanguageTag } from "$lib/paraglide/runtime"
import type { ParaglideLocals } from "@inlang/paraglide-sveltekit"
declare global {
namespace App {
interface Locals {
paraglide: ParaglideLocals<AvailableLanguageTag>
}
// ...
}
}
export {}
Go try it out!
Visit / to see your default language, and /{lang} to see other languages. All links should be translated automatically.
