🌍 i18n toolkit for SvelteKit
npm i @jill64/svelte-i18nUse a function to translate from the specified locales based on the current route parameters.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'
const { locale, translate } = init({
locales: ['en', 'ja'],
slug: '[locale]',
defaultLocale: 'en'
})<!-- src/routes/[locale]/+page.svelte -->
<script>
import { translate, locale } from '$lib/i18n'
// src/routes/en => 'en'
// src/routes/ja => 'ja'
// src/routes/invalid-param => 'en' (defaultLocale)
$: console.log($locale)
</script>
<h1>
<!-- src/routes/en => English -->
<!-- src/routes/ja => 日本語 -->
{$translate({
en: 'English',
ja: '日本語'
})}
</h1>Each time a locale change is detected on the client side, it is reflected in the lang attribute of the html
<!-- src/routes/+layouts.svelte -->
<script>
import { LanguageManager } from '@jill64/svelte-i18n'
</script>
<LanguageManager />↓
<!-- locale = 'en' | 'ja' -->
<html lang="{locale}">
<!-- ... -->
</html>SSR uses the attach handler to add the lang attribute to html tags.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'
const { attach } = init({
locales: ['en', 'ja'],
defaultLocale: 'en'
})// src/hooks.server.js
import { attach as handle } from '$lib/i18n'To use with any handle hook, use the sequence function.
// src/hooks.server.js
import { attach } from '$lib/i18n'
import { sequence } from '@sveltejs/kit/hooks'
export const handle = sequence(attach, () => {
// ... Your Handler Function
})Use param matcher to add type checking for route parameters.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'
const { match } = init({
locales: ['en', 'ja'],
slug: '[locale=locale]',
defaultLocale: 'en'
})// src/params/locale.js
export { match } from '$lib/i18n'Quickly create links to different language versions of the current page.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'
const { altered } = init({
locales: ['en', 'ja'],
defaultLocale: 'en'
})<!-- src/routes/[locale](en)/foo/bar/+page.svelte -->
<script>
import { altered } from '$lib/i18n'
</script>
<!-- href="/ja/foo/bar" -->
<a href={$altered('ja')}> Jump to Japanese Version </a>Create a link tag in the head element to another language based on the Locales to improve SEO.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'
const {
/* ... */
} = init({
locales: ['en', 'ja'],
defaultLocale: 'en'
})<!-- src/routes/+layout.svelte -->
<script>
import { LocaleAlternates } from '@jill64/svelte-i18n'
</script>
<LocaleAlternates xDefaultHref="default-language-href(optional)" />For example, if you are in /[locale(en)]/foo/bar, create the following tag in the head element
<link rel="alternate" hreflang="ja" href="/ja/foo/bar" />
<link
rel="alternate"
hreflang="x-default"
href="default-language-href(optional)"
/>If RTL is required, a Svelte component can be created as follows
<script>
import { translate, locale } from '$lib/i18n'
</script>
<p dir={$locale === 'ar' ? 'rtl' : 'ltr'}>
{$translate({
en: 'English',
ar: 'عربي'
})}
</p>Web applications may not want to include language as a parameter to keep URLs clean. In app mode, language settings are stored using cookies and localStorage.
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n/app'
const { locale, translate, attach, setting } = init({
locales: ['en', 'ja'],
defaultLocale: 'en'
})The following features are not available in this mode
- route based language switching
- route matcher
matchalteredLocaleAlternates
In app mode, language settings can be changed by setting values in the $setting store.
<script>
import { setting } from '$lib/i18n'
const changeToJP = () => {
$setting = 'ja'
}
</script>
<button on:click={changeToJP}> Change to Japanese </button>