Lingua Documentation

Appearance

Svelte Package Documentation ​

This section covers the @cyberwolf.studio/lingua-svelte package.

Svelte Binding (@cyberwolf.studio/lingua-svelte) ​

The @cyberwolf.studio/lingua-svelte package provides a simple way to integrate Lingua translations into your Svelte applications using Svelte stores and a setup function.

Installation ​

The Svelte package is installed automatically when you run php artisan lingua:install and select Svelte as your frontend framework. If you need to install it manually:

bash
npm install @cyberwolf.studio/lingua-svelte @cyberwolf.studio/lingua-core
bash
yarn add @cyberwolf.studio/lingua-svelte @cyberwolf.studio/lingua-core

Setup ​

Import the setLingua function and the Lingua translations data generated by php artisan lingua:generate. Call setLingua with the initial locale and the Lingua data.

javascript
// main.js or a root Svelte component
import { setLingua } from '@cyberwolf.studio/lingua-svelte';
import { Lingua } from './lingua'; // Your generated translations

const initialLocale = 'en'; // This should ideally come from your shared Inertia data
setLingua(initialLocale, Lingua);

Ensure that your Laravel application is sharing the current locale with the frontend, especially if you are using Inertia.js. Refer to the Sharing Locale with Frontend (Inertia.js) section in the Getting Started guide.

Usage ​

Import the trans, transChoice, and currentLocale (a Svelte store) from @cyberwolf.studio/lingua-svelte in your .svelte components.

svelte
<script>
  import { trans, transChoice, currentLocale } from '@cyberwolf.studio/lingua-svelte';
</script>

<p>{trans('your.translation.key')}</p>
<p>{trans('another.key', { name: 'User' })}</p>
<p>{transChoice('item', 1)}</p>
<p>Current locale: {$currentLocale}</p>