Name		Name	Last commit message	Last commit date
parent directory ..
component-scoped-csr		component-scoped-csr
component-scoped-ssr		component-scoped-ssr
fallback-locale		fallback-locale
loaders		loaders
locale-param		locale-param
locale-router-advanced		locale-router-advanced
locale-router-static		locale-router-static
locale-router		locale-router
multi-page		multi-page
one-page		one-page
parser-default		parser-default
parser-icu		parser-icu
preprocess		preprocess
single-load		single-load
README.md		README.md
tsconfig.json		tsconfig.json

README.md

Examples

These examples demonstrate how to integrate sveltekit-i18n into your app. Currently, these setups are present:

single-load – Demo

loads all translations for all language mutations during i18n initialization
usually this is not what you are looking for, but it can be useful if you need all your translations in place.

one-page – Demo

this approach is useful for one-page apps
translations are loaded dynamically according to locale

multi-page – Demo

this is the most frequent use-case – application with multiple routes
translations are loaded not only according to the locale, but given routes as well
it prevents duplicit (server and client) translation load on app enter

locale-param – Demo

this multi-page app demonstrates lang routing based on URL parameter (e.g. https://example.com/?lang=en)

locale-router-static – Demo

this multi-page app demonstrates locale-based routing (e.g. https://example.com/en/about)
this approach is great if you care about SEO
optimized for @sveltejs/adapter-static

locale-router – Demo

this multi-page app demonstrates locale-based routing (e.g. https://example.com/en/about)
this approach is great if you care about SEO
optimized for non-static adapters (e.g. @sveltejs/adapter-node)

locale-router-advanced – Demo

this multi-page app demonstrates locale-based routing (e.g. https://example.com/en/about)
this approach is great if you care about SEO
optimized for non-static adapters (e.g. @sveltejs/adapter-node)
default locale routes do not have any lang prefix in path

component-scoped-csr – Demo

this is the most complex approach, which allows you to scope your translations to components, so they can have their own lexicons
app translations are loaded the same way as for multi-page (SSR)
component's translations are loaded in component promise (CSR - SvelteKit does not provide server side load method for components, so translation loaders are triggered on client side only)

component-scoped-ssr – Demo

SvelteKit does not provide server side load method for components.
component's load is replaced by exported init method. This method initializes related language mutation within parent page's load method.
after the load, appropriate props are delegated back to the component instance.

Parsers

parser-default – Demo

this app demonstrates features of the @sveltekit-i18n/parser-default

parser-icu – Demo

this app demonstrates features of the @sveltekit-i18n/parser-icu

Other

loaders – Demo

this app demonstrates different config.loaders configurations

preprocess – Demo

this app demonstrates different config.preprocess configurations

fallback-locale – Demo

this app demonstrates config.fallbackLocale

How to

clone or download example you want to use
navigate to downloaded folder using Terminal (cd ./your/example/destination/)
run npm i sveltekit-i18n@latest to fetch this dependecy from NPM and install all other dependencies
(or npm i @sveltekit-i18n/PACKAGE_NAME@latest for parser examples - see related dependencies)
run npm run dev -- --open to preview