examples

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 use an example

• Clone or download the example you want to use
• Navigate to the downloaded folder using Terminal (e.g. cd ./your/example/destination/)
• Install dependencies using your preferred package manager:
  • npm i sveltekit-i18n@latest (or npm i @sveltekit-i18n/PACKAGE_NAME@latest for parser examples - see related dependencies)
  • pnpm i sveltekit-i18n@latest
  • yarn add sveltekit-i18n@latest
  • Or any other package manager you prefer
• Run the dev server to preview:
  • npm run dev -- --open
  • pnpm run dev -- --open
  • yarn dev --open
  • Or the equivalent command for your package manager