Note
Looking for maintainers. Feel free to contact me if you want to take over the maintanance of this project.
sveltekit-i18n is a tiny library with no external dependencies, built for Svelte and SvelteKit. It glues @sveltekit-i18n/base and @sveltekit-i18n/parser-default together to provide you the most straightforward sveltekit-i18n solution.
✅ 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
Setup translations.js in your lib folder...
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...
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.
<script> import { t } from '$lib/translations'; const pageName = 'This page is Home page!'; </script> <div> <!-- you can use `placeholders` and `modifiers` in your definitions (see docs) --> <h2>{$t('common.page', { pageName })}</h2> <p>{$t('home.content')}</p> </div>