#Paraglide-SolidStart

#Example project

Before setting up Paraglide-SolidStart in your own project, you can take a look at the example project to see how it works.

#Getting started

#1. Initialize paraglide-js

If you haven't already, initialize paraglide-js in your project. To do so, follow the getting started guide to get familiar with the basic paraglide concepts.

Then come back here to learn how Paraglide-SolidStart helps you to integrate ParaglideJS into your SolidStart project.

#2. Install Paraglide-SolidStart

npm install @inlang/paraglide-solidstart
# or
pnpm add @inlang/paraglide-solidstart
# or
yarn add @inlang/paraglide-solidstart

#3. Use Paraglide-SolidStart to wrap paraglide

Pass the runtime generated by paraglide to paraglide-solidstart to create SolidStart-bound functions.

// i18n.tsx
import * as paraglide from "./paraglide/runtime.js" // generated by paraglide
import { createI18n } from "@inlang/paraglide-solidstart"

const { LanguageTagProvider, languageTag, setLanguageTag } = createI18n(paraglide)

Take a look at example/src/i18n/index.tsx to see how paraglide-solidstart is used in an example project. With an addition to some convenience functions.

#4. Provide a language tag to your app and the Solid Router.

// entry-server.tsx

import { createHandler, StartServer } from "@solidjs/start/server"
import { useLocationLanguageTag } from "./i18n.js"

export default createHandler(() => {
	const language_tag = useLocationLanguageTag() ?? i18n.sourceLanguageTag

	return (
		<StartServer
			document={(props) => (
				<html lang={language_tag}>
					<head>
						{props.assets}
					</head>
					<body>
						<div id="app">{props.children}</div>
						{props.scripts}
					</body>
				</html>
			)}
		/>
	)
})

// app.tsx

import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { Suspense } from "solid-js"
import { LanguageTagProvider, useLocationLanguageTag, sourceLanguageTag } from "./i18n.js"

export default function App() {
	// get language tag from URL, or use source language tag as fallback
	const url_language_tag = useLocationLanguageTag()
	const language_tag = url_language_tag ?? sourceLanguageTag

	// 1. provide language tag to your app
	// 2. set html lang attribute
	// 3. make sure the routing doesn't treat the language tag as part of the path

	return (
		<main>
			<Router
				base={url_language_tag}
				root={(props) => (
					<LanguageTagProvider value={language_tag}>
						<Suspense>{props.children}</Suspense>
					</LanguageTagProvider>
				)}
			>
				<FileRoutes />
			</Router>
		</main>
	)
}

Take a look at example/src/app.tsx to see how it is used in a example project.

#5. Use message functions

The language tag of the current request is provided by Paraglide-SolidStart via a context. All the message functions used in this context will be renderd with the it's language.

// uses the context's language tag to translate the message
<h1>{m.greeting({ name: "Loris" })}</h1>

// pass language tag explicitly when used outside of the available context
const language_tag = languageTag() // in component body

<button onClick={e => {
	e.preventDefault()
	alert(
		m.greeting({ name: "Loris" }, { languageTag: language_tag })
	)
}}>
	{m.show_greeting()}
</button>

#6. Switch language

You can switch languages by calling the setLanguageTag function provided by Paraglide-Solidstart. This will navigate to the translated variant of the current route.

<select onChange={(e) => setLanguageTag(e.target.value)}>
	{availableLanguageTags.map((tag) => (
		<option value={tag} selected={tag === languageTag()}>
			{tag}
		</option>
	))}
</select>

If you want to navigate to a different route in a specific language, you can use the translateHref function provided by Paraglide-SolidStart to generate the correct href.

<A href={translateHref("/about", "en")}>{m.about()}</A>

⚠️ Don't use the translateHref function on links that point to external websites. It will break the link.

#7. Alternate links

If you want to provide alternate links to the same page in different languages.

const language_tag = languageTag()

<head>
	{availableLanguageTags
		.filter((tag) => tag !== language_tag)
		.map((tag) => (
			<link
				rel="alternate"
				href={translateHref("/", tag)}
				hreflang={tag}
			/>
		))
	}
</head>