Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sveltekit-i18n/lib
Internationalization library built for SvelteKit.
https://github.com/sveltekit-i18n/lib
i18n i18n-js internationalization l10n localization svelte sveltekit sveltekit-i18n translation
Last synced: 3 months ago
JSON representation
Internationalization library built for SvelteKit.
- Host: GitHub
- URL: https://github.com/sveltekit-i18n/lib
- Owner: sveltekit-i18n
- License: mit
- Created: 2021-12-14T09:34:10.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T22:35:58.000Z (8 months ago)
- Last Synced: 2024-05-21T12:21:36.250Z (6 months ago)
- Topics: i18n, i18n-js, internationalization, l10n, localization, svelte, sveltekit, sveltekit-i18n, translation
- Language: TypeScript
- Homepage:
- Size: 2.1 MB
- Stars: 426
- Watchers: 5
- Forks: 29
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - sveltekit-i18n - For integrating [i18n](https://www.npmjs.com/package/i18n) style localization in SvelteKit. (Utilities / Internationalisation)
README
[](https://badge.fury.io/js/sveltekit-i18n) 
# sveltekit-i18n
`sveltekit-i18n` is a tiny library with no external dependencies, built for [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit). It glues [@sveltekit-i18n/base](https://github.com/sveltekit-i18n/base) and [@sveltekit-i18n/parser-default](https://github.com/sveltekit-i18n/parsers/tree/master/parser-default) together to provide you the most straightforward `sveltekit-i18n` solution.
## Key features
✅ SvelteKit ready\
✅ SSR support\
✅ Custom data sources – no matter if you are using local files or remote API to get your translations\
✅ Module-based – your translations are loaded for visited pages only (and only once!)\
✅ Component-scoped translations – you can create multiple instances with custom definitions\
✅ Custom modifiers – you can modify the input data the way you really need\
✅ TS support\
✅ No external dependencies
## Usage
Setup `translations.js` in your lib folder...
```javascript
import i18n from 'sveltekit-i18n';
/** @type {import('sveltekit-i18n').Config} */
const config = ({
loaders: [
{
locale: 'en',
key: 'common',
loader: async () => (
await import('./en/common.json')
).default,
},
{
locale: 'en',
key: 'home',
routes: ['/'], // you can use regexes as well!
loader: async () => (
await import('./en/home.json')
).default,
},
{
locale: 'en',
key: 'about',
routes: ['/about'],
loader: async () => (
await import('./en/about.json')
).default,
},
{
locale: 'cs',
key: 'common',
loader: async () => (
await import('./cs/common.json')
).default,
},
{
locale: 'cs',
key: 'home',
routes: ['/'],
loader: async () => (
await import('./cs/home.json')
).default,
},
{
locale: 'cs',
key: 'about',
routes: ['/about'],
loader: async () => (
await import('./cs/about.json')
).default,
},
],
});
export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
```
...load your translations in `+layout.js`...
```javascript
import { loadTranslations } from '$lib/translations';
/** @type {import('@sveltejs/kit').Load} */
export const load = async ({ url }) => {
const { pathname } = url;
const initLocale = 'en'; // get from cookie, user session, ...
await loadTranslations(initLocale, pathname); // keep this just before the `return`
return {};
}
```
...and include your translations within pages and components.
```svelte
import { t } from '$lib/translations';
const pageName = 'This page is Home page!';
{$t('common.page', { pageName })}
{$t('home.content')}
```
## More info
[Docs](https://github.com/sveltekit-i18n/lib/tree/master/docs/README.md)\
[Examples](https://github.com/sveltekit-i18n/lib/tree/master/examples)\
[Changelog](https://github.com/sveltekit-i18n/lib/releases)