mirror of
https://github.com/cupcakearmy/svelte-i18n.git
synced 2024-09-28 23:24:44 +02:00
87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
|
# Usage in Svelte Kit
|
||
|
|
||
|
> The solution is *heavily* inspired by https://github.com/sveltekit-i18n/lib/issues/94#issuecomment-1247942697.
|
||
|
>
|
||
|
> All kudos to @jonsaw.
|
||
|
> This is merely an adaptation to `svelte-i18n`.
|
||
|
|
||
|
- Support for SSR
|
||
|
- Example with user preference set by [`Accept-Language`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language) on the server and [`navigator.language`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages) on the frontend.
|
||
|
|
||
|
## 1. Setup svelte-i18n
|
||
|
|
||
|
The first thing we need to do is to setup regular `svelte-i18n`.
|
||
|
|
||
|
```typescript
|
||
|
// src/lib/i18n/index.ts
|
||
|
import { browser } from '$app/environment'
|
||
|
import { init, register } from 'svelte-i18n'
|
||
|
|
||
|
const defaultLocale = 'en'
|
||
|
|
||
|
register('en', () => import('./locales/en.json'))
|
||
|
register('de', () => import('./locales/de.json'))
|
||
|
|
||
|
init({
|
||
|
fallbackLocale: defaultLocale,
|
||
|
initialLocale: browser ? window.navigator.language : defaultLocale,
|
||
|
})
|
||
|
```
|
||
|
|
||
|
## 2. Setup the hook
|
||
|
|
||
|
For SSR we need to tell the the server what language is being used. This could use cookies or the accept-language header for example.
|
||
|
The easiest way to set the locale in the [server hook](https://kit.svelte.dev/docs/hooks#server-hooks)
|
||
|
|
||
|
```typescript
|
||
|
// hooks.server.ts
|
||
|
import type { Handle } from '@sveltejs/kit'
|
||
|
import { locale } from 'svelte-i18n'
|
||
|
|
||
|
export const handle: Handle = async ({ event, resolve }) => {
|
||
|
const lang = event.request.headers.get('accept-language')?.split(',')[0]
|
||
|
if (lang) {
|
||
|
locale.set(lang)
|
||
|
}
|
||
|
return resolve(event)
|
||
|
}
|
||
|
```
|
||
|
|
||
|
## 3. Setup the layout
|
||
|
|
||
|
On the frontend we need to set the language too, for this we could again use cookies, or in this example: `window.navigator.language`.
|
||
|
|
||
|
|
||
|
```typescript
|
||
|
// +layout.ts
|
||
|
import { browser } from '$app/environment'
|
||
|
import '$lib/i18n' // Import to initialize. Important :)
|
||
|
import { locale, waitLocale } from 'svelte-i18n'
|
||
|
import type { LayoutLoad } from './$types'
|
||
|
|
||
|
export const load: LayoutLoad = async () => {
|
||
|
if (browser) {
|
||
|
locale.set(window.navigator.language)
|
||
|
}
|
||
|
await waitLocale()
|
||
|
}
|
||
|
```
|
||
|
|
||
|
```svelte
|
||
|
<!-- +layout.svelte -->
|
||
|
<slot />
|
||
|
```
|
||
|
|
||
|
# 4. Use the library as normal
|
||
|
|
||
|
```svelte
|
||
|
<script lang="ts">
|
||
|
import { _ } from 'svelte-i18n'
|
||
|
</script>
|
||
|
|
||
|
<h1>Welcome to SvelteKit</h1>
|
||
|
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||
|
|
||
|
{$_('my.translation.key')}
|
||
|
```
|