https://github.com/jill64/svelte-i18n

🌍 i18n toolkit for SvelteKit
https://github.com/jill64/svelte-i18n

i18n language localization svelte sveltekit

Last synced: 6 days ago
JSON representation

🌍 i18n toolkit for SvelteKit

• Host: GitHub
• URL: https://github.com/jill64/svelte-i18n
• Owner: jill64
• Created: 2023-10-31T06:00:52.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-18T20:17:44.000Z (11 months ago)
• Last Synced: 2023-12-19T17:17:52.433Z (11 months ago)
• Topics: i18n, language, localization, svelte, sveltekit
• Language: TypeScript
• Homepage: https://svelte-i18n.jill64.dev
• Size: 341 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# @jill64/svelte-i18n

     

🌍 i18n toolkit for SvelteKit

## [Demo](https://svelte-i18n.jill64.dev)

## Install

```sh

npm i @jill64/svelte-i18n

```

## Quick Example

Use a function to translate from the specified locales based on the current route parameters.

```js:src/lib/i18n.js

// src/lib/i18n.js

import { init } from '@jill64/svelte-i18n'

const { locale, translate } = init({

  locales: ['en', 'ja'],

  slug: '[locale]',

  defaultLocale: 'en'

})

```

```svelte

  import { translate, locale } from '$lib/i18n'

  // src/routes/en => 'en'

  // src/routes/ja => 'ja'

  // src/routes/invalid-param => 'en' (defaultLocale)

  $: console.log($locale)



  

  

  {$translate({

    en: 'English',

    ja: '日本語'

  })}



```


## 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`

```svelte

  import { LanguageManager } from '@jill64/svelte-i18n'

```

↓

```html

  

```

## Attach html lang attribute

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

```js:src/lib/i18n.js

// src/lib/i18n.js

import { init } from '@jill64/svelte-i18n'

const { attach } = init({

  locales: ['en', 'ja'],

  defaultLocale: 'en'

})

```

```js:src/hooks.server.js

// src/hooks.server.js

import { attach as handle } from '$lib/i18n'

```

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

```js:src/hooks.server.js

// src/hooks.server.js

import { attach } from '$lib/i18n'

import { sequence } from '@sveltejs/kit/hooks'

export const handle = sequence(attach, () => {

  // ... Your Handler Function

})

```

## Route param matcher

Use param matcher to add type checking for route parameters.

```js:src/lib/i18n.js

// src/lib/i18n.js

import { init } from '@jill64/svelte-i18n'

const { match } = init({

  locales: ['en', 'ja'],

  slug: '[locale=locale]',

  defaultLocale: 'en'

})

```

```js:src/params/locale.js

// src/params/locale.js

export { match } from '$lib/i18n'

```

## Switch Language

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

```js:src/lib/i18n.js

// src/lib/i18n.js

import { init } from '@jill64/svelte-i18n'

const { altered } = init({

  locales: ['en', 'ja'],

  defaultLocale: 'en'

})

```

```svelte

  import { altered } from '$lib/i18n'

 Jump to Japanese Version 

```

## Locale Alternates

Create a link tag in the head element to another language based on the Locales to improve SEO.

```js:src/lib/i18n.js

// src/lib/i18n.js

import { init } from '@jill64/svelte-i18n'

const {

  /* ... */

} = init({

  locales: ['en', 'ja'],

  defaultLocale: 'en'

})

```

```svelte

  import { LocaleAlternates } from '@jill64/svelte-i18n'

```

For example, if you are in `/[locale(en)]/foo/bar`, create the following tag in the `head` element

```html

```

## RTL

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

```svelte

  import { translate, locale } from '$lib/i18n'



  {$translate({

    en: 'English',

    ar: 'عربي'

  })}



```


## 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.

```js:src/lib/i18n.js

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

- `match`

- `altered`

- `LocaleAlternates`

## Set Locale

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

```svelte

  import { setting } from '$lib/i18n'

  const changeToJP = () => {

    $setting = 'ja'

  }

 Change to Japanese 

```

## License

[MIT](LICENSE)