@jill64/svelte-i18n NPM

@jill64/svelte-i18n

🌍 i18n toolkit for SvelteKit

Demo

Install

npm i @jill64/svelte-i18n

Quick Example

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'

export const i = init({
  locales: ['en', 'ja'],
  slug: '[locale]',
  defaultLocale: 'en'
})

<!-- src/routes/[locale]/+page.svelte -->
<script>
  import { i } from '$lib/i18n'

  // src/routes/en => 'en'
  // src/routes/ja => 'ja'
  // src/routes/invalid-param => 'en' (defaultLocale)
  console.log(i.locale)
</script>

<h1>
  <!-- src/routes/en => English -->
  <!-- src/routes/ja => 日本語 -->
  {i.translate({
    en: 'English',
    ja: '日本語'
  })}
</h1>

Bind html lang attribute

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>

Attach html lang attribute

SSR uses the attach handler to add the lang attribute to html tags.

// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const { i } = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})

// src/hooks.server.js
import { i as handle } from '$lib/i18n'
export const handle = i.attach

To use with any handle hook, use the sequence function.

// src/hooks.server.js
import { i } from '$lib/i18n'
import { sequence } from '@sveltejs/kit/hooks'

export const handle = sequence(i.attach, () => {
  // ... Your Handler Function
})

Route param matcher

Use param matcher to add type checking for route parameters.

// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const i = init({
  locales: ['en', 'ja'],
  slug: '[locale=locale]',
  defaultLocale: 'en'
})

// src/params/locale.js
import { i } from '$lib/i18n'
export const match = i.match

Switch Language

Quickly create links to different language versions of the current page.

// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const i = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})

<!-- src/routes/[locale](en)/foo/bar/+page.svelte -->
<script>
  import { i } from '$lib/i18n'
</script>

<!-- href="/ja/foo/bar" -->
<a href={i.altered('ja')}> Jump to Japanese Version </a>

Locale Alternates

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)"
/>

RTL

If RTL is required, a Svelte component can be created as follows

<script>
  import { i } from '$lib/i18n'
</script>

<p dir={i.locale === 'ar' ? 'rtl' : 'ltr'}>
  {i.translate({
    en: 'English',
    ar: 'عربي'
  })}
</p>

Web App Mode

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'

// { locale, translate, attach, setting }
export const i = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})

The following features are not available in this mode

route based language switching
route matcher
match
altered
LocaleAlternates

Set Locale

In app mode, language settings can be changed by setting values in the i.setting store.

<script>
  import { i } from '$lib/i18n'

  const changeToJP = () => {
    i.setting = 'ja'
  }
  const changeToEN = () => {
    i.setting = 'en'
  }
</script>

<button onclick={changeToJP}> Change to Japanese </button>
<button onclick={changeToEN}> Change to English </button>