Home
Softono
typesafe-i18n-demo-sveltekit

typesafe-i18n-demo-sveltekit

Open source TypeScript
Website GitHub
134
Stars
17
Forks
3
Issues
5
Watchers
2 years
Last Commit
Frontend Templates i18n & Localisation

About typesafe-i18n-demo-sveltekit

A demo project showcasing the integration of typesafe-i18n with SvelteKit. It provides a working example of internationalization in a SvelteKit application, featuring basic i18n setup for three locales, automatic language preference detection, full SSR support, SEO optimizations including rel=alternate links and hreflang attributes, locale switching, lazy loading of locale files, and persistent locale state through language routes. The demo also highlights typesafe-i18n's TypeScript typesafety features, plural rules, and locale-specific date formatting. A JavaScript version using JsDoc comments is available separately. A live demo is hosted on Vercel. The project serves as a practical reference for developers implementing type-safe internationalization in SvelteKit applications.

Platforms

Web Self-hosted

Languages

TypeScript

Links

Website Source Code
i
Published by
ivanhofer
Visit View Profile

README.md

View on GitHub

typesafe-i18n demo sveltekit

Here is a video for better context. SvelteKit has undergone some major changes since this video was published. For the most up-to-date way of handling i18n, please refer to the code in this repository.

This example demonstrates a typesafe-i18n-integration with SvelteKit.

[!IMPORTANT]
Make sure you adopt app.d.ts for full TypeScript type inference. More context here

LIVE-DEMO: https://typesafe-i18n-demo-sveltekit.vercel.app

It is a basic example and shows:

  • basic i18n setup of three different locales
  • auto-detecting user language preferences
  • full SSR support
  • SEO optimizations
  • locale switching
  • lazy loading of locales
  • persistent locale state via language routes
  • typesafety features of typesafe-i18n
  • plural rules
  • locale specific date-formatting
  • rel="alternate" links
  • hreflang attribute

What is missing:

  • opinion how to localize slugs\ this highly depends where your data comes from. This will probably differ from project to project.

JavaScript version

You can find the exact same example in a JavaScript only version here.\ It offers the same typesafety features but instead of TypeScript files it is written in JavaScript with JsDoc comments.

learn more

If you want to know more about typesafe-i18n head over to the main repo:

https://github.com/ivanhofer/typesafe-i18n