product icon

Paraglide-SvelteKit

App

#Roadmap & Caveats

  • Translated parameters
  • Domain Based routing
  • Fix the Caveats

#Caveats

  1. Links in the same Layout Component as <ParaglideJS> will not be translated. This will also log a warning in development.
  2. Messages are not reactive. Don't use them in server-side module scope.
  3. Side effects triggered by data will run on language changes even if the data didn't change. If the data is language-dependent the side effect will run twice.
  4. The languageTag function cannot be used inside param matchers.

#Using messages in +layout.svelte

The language state gets set when the <ParaglideJS> component is mounted. Since you usually place it inside +layout.svelte using messages in the layout's <script> can cause issues.

<script>
    import { ParaglideJS } from '@inlang/paraglide-sveltekit'
	import { i18n } from '$lib/i18n.js'

	//using messages here can cause hydration issues
</script>

<ParaglideJS {i18n}>
	<!-- Using messages here is fine -->
    <slot />
</ParaglideJS>

#Issues on Vercel

SvelteKit's reroute hook currently doens't play well with Vercel (see sveltejs/kit#11879), which means that we need to slightly adapt the setup to make it work when deployed to Vercel.

  1. Remove the reroute hook from src/hooks.js
  2. Move the routes you want to localize routes into a [[locale]] folder
  3. Don't use translated pathnames

We are working on contributing a fix for sveltejs/kit#11879, so this workaround will hopefully not be needed much longer.