@jill64/svelte-i18n
Advanced tools
🌍 i18n toolkit for SvelteKit
npm i @jill64/svelte-i18n
Use 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
matchalteredLocaleAlternatesIn 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>
FAQs
🌍 i18n toolkit for SvelteKit
The npm package @jill64/svelte-i18n receives a total of 8,351 weekly downloads. As such, @jill64/svelte-i18n popularity was classified as popular.
We found that @jill64/svelte-i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.