\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Opzionale) Passo 6: Configurare il routing\n\nI passaggi seguenti mostrano come configurare il routing basato sulla locale in SvelteKit. Questo permette agli URL di includere il prefisso della locale (es. `/en/about`, `/fr/about`) per migliorare la SEO e l'esperienza utente.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Definisce il tipo di locale\n ├── hooks.server.ts # Gestisce il routing della locale\n ├── lib\n │ └── getLocale.ts # Controlla la locale dall'header, cookie\n ├── params\n │ └── locale.ts # Definisce il parametro locale\n └── routes\n ├── [[locale=locale]] # Raggruppa in un gruppo di route per impostare la locale\n │ ├── +layout.svelte # Layout locale per la route\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Layout radice per i font e gli stili globali\n```\n\n### Passo 7: Gestire il Rilevamento della Locale lato Server (Hooks)\n\nIn SvelteKit, il server deve conoscere la locale dell'utente per renderizzare il contenuto corretto durante il SSR. Usiamo `hooks.server.ts` per rilevare la locale dall'URL o dai cookie.\n\nCrea o modifica `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Controlla se il percorso corrente inizia già con una locale (es. /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Se NON è presente una locale nell'URL (es. l'utente visita \"/\"), reindirizzalo\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Reindirizzamento temporaneo\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nQuindi, crea un helper per ottenere la locale dell'utente dall'evento della richiesta:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Ottieni la locale dell'utente dall'evento di richiesta.\n * Questa funzione è utilizzata nel hook `handle` in `src/hooks.server.ts`.\n *\n * Prima tenta di ottenere la locale dallo storage di Intlayer (cookie o header personalizzati).\n * Se la locale non viene trovata, ricorre alla negoziazione \"Accept-Language\" del browser.\n *\n * @param event - L'evento di richiesta da SvelteKit\n * @returns La locale dell'utente\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Prova a ottenere la locale dallo storage di Intlayer (cookie o header)\n const storedLocale = getLocaleFromStorage({\n // Accesso ai cookie di SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Accesso alle intestazioni di SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Ripiego sulla negoziazione \"Accept-Language\" del browser\n const negotiatorHeaders: Record<string, string> = {};\n\n // Conversione dell'oggetto Headers di SvelteKit in un semplice Record<string, string>\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Controlla la locale dall'intestazione `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Restituisce la locale di default se non viene trovata una corrispondenza\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` controllerà la locale dall'header o dal cookie a seconda della tua configurazione. Vedi [Configurazione](https://intlayer.org/doc/configuration) per maggiori dettagli.\n\n> La funzione `localeDetector` gestirà l'header `Accept-Language` e restituirà la corrispondenza migliore.\n\nSe la locale non è configurata, vogliamo restituire un errore 404. Per semplificare, possiamo creare una funzione `match` per verificare se la locale è valida:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Nota:** Assicurati che il tuo file `src/app.d.ts` includa la definizione della locale:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nPer il file `+layout.svelte`, possiamo rimuovere tutto, mantenendo solo contenuti statici, non correlati a i18n:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nSuccessivamente, crea una nuova pagina e layout sotto il gruppo `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Usa il tipo generico Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Inizializza Intlayer con la locale dalla route\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Usa il dizionario dei contenuti del layout\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Usa il dizionario dei contenuti della home\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Opzionale) Passo 8: Link Internazionalizzati\n\nPer la SEO, si consiglia di anteporre alle tue rotte la locale (ad esempio, `/en/about`, `/fr/about`). Questo componente antepone automaticamente qualsiasi link con la locale corrente.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nSe usi `goto` di SvelteKit, puoi usare la stessa logica con `getLocalizedUrl` per navigare all'URL localizzato:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Naviga verso /en/about o /fr/about a seconda della locale\n```\n\n### (Opzionale) Passo 9: Selettore di Lingua\n\nPer permettere agli utenti di cambiare lingua, aggiorna l'URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Imposterà la locale nello store e attiverà onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Opzionale) Passo 10: Aggiungere un proxy backend\n\nPer aggiungere un proxy backend alla tua applicazione SvelteKit, puoi usare la funzione `intlayerProxy` fornita dal plugin `vite-intlayer`. Questo plugin rileverà automaticamente la migliore locale per l'utente basandosi sull'URL, i cookie e le preferenze della lingua del browser.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Opzionale) Passo 11: Configurare l'editor / CMS di intlayer\n\nPer configurare l'editor di intlayer, devi seguire la [documentazione dell'editor di intlayer](/it/doc/concept/editor).\n\nPer configurare il CMS di intlayer, devi seguire la [documentazione del CMS di intlayer](/it/doc/concept/cms).\n\nPer poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configurazione Git\n\nSi consiglia di ignorare i file generati da Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignora i file generati da Intlayer\n.intlayer\n```\n\n---\n\n### Approfondimenti\n\nPer poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configurazione Git\n\nSi consiglia di ignorare i file generati da Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignora i file generati da Intlayer\n.intlayer\n```\n\n---\n\n### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti\n\nSe hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.\n\nPer facilitare questo processo, Intlayer propone un [compilatore](/it/doc/compiler) / [estrattore](/it/doc/concept/cli/extract) per trasformare i tuoi componenti ed estrarre il contenuto.\n\nPer configurarlo, puoi aggiungere una sezione `compiler` nel tuo file `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto della tua configurazione\n compiler: {\n /**\n * Indica se il compilatore deve essere abilitato.\n */\n enabled: true,\n\n /**\n * Definisce il percorso dei file di output\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.\n */\n saveComponents: false,\n\n /**\n * Prefisso chiave dizionario\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nEsegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nAggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Aggiunge il plugin del compilatore\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Oppure npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # O pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # O yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Vai oltre\n\n- **Visual Editor**: integra il [Visual Editor di Intlayer](/it/doc/concept/editor) per modificare le traduzioni direttamente dall'interfaccia utente.\n- **CMS**: esternalizza la gestione dei tuoi contenuti utilizzando il [CMS di Intlayer](/it/doc/concept/cms).\n","about":"Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR).","url":"https://intlayer.org/it/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internazionalizzazione, Documentazione, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}

Creazione:2025-11-20Ultimo aggiornamento:2026-05-06

Visualizza il modello di applicazione su GitHub

Questa pagina ha un modello di applicazione disponibile.

Vedi l'applicazione showcase

Questa pagina collega a una demo dal vivo del modello.

Riferimento a questa documentazione al tuo assistente AI preferito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
v8.9.004/05/2026
"Aggiungi comando init"
v7.5.930/12/2025
"Inizializzazione della cronologia"
v7.1.1020/11/2025

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Traduci il tuo sito SvelteKit usando Intlayer | Internazionalizzazione (i18n)

ide.intlayer.org

Indice

Cos'è Intlayer?

Intlayer è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle moderne applicazioni web. Funziona perfettamente con le capacità di Server-Side Rendering (SSR) di SvelteKit.

Con Intlayer, puoi:

Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
Localizzare dinamicamente i metadata, le rotte e i contenuti.
Garantire il supporto TypeScript con tipi autogenerati.
Sfruttare l'SSR di SvelteKit per un'internazionalizzazione SEO-friendly.

Guida passo-passo per configurare Intlayer in un'applicazione SvelteKit

Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che realizzeremo:

bash

Copiare il codice

Copiare il codice nella clipboard

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Installare le Dipendenze

Installa i pacchetti necessari usando npm:

bash

Copiare il codice

Copiare il codice nella clipboard

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Il pacchetto core per l'internazionalizzazione (i18n).
svelte-intlayer: Fornisce context provider e store per Svelte/SvelteKit.
vite-intlayer: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.

Passo 2: Configurazione del tuo progetto

Crea un file di configurazione nella root del tuo progetto:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integrare Intlayer nella Configurazione di Vite

Aggiorna il tuo vite.config.ts per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

Passo 4: Dichiarare il Tuo Contenuto

Crea i tuoi file di dichiarazione del contenuto in qualsiasi punto della cartella src (ad esempio, src/lib/content o accanto ai tuoi componenti). Questi file definiscono il contenuto traducibile per la tua applicazione utilizzando la funzione t() per ogni locale.

Passo 5: Utilizzare Intlayer nei Tuoi Componenti

Ora puoi usare la funzione useIntlayer in qualsiasi componente Svelte. Essa restituisce uno store reattivo che si aggiorna automaticamente quando cambia la locale. La funzione rispetterà automaticamente la locale corrente (sia durante SSR che nella navigazione lato client).

Nota: useIntlayer restituisce uno store Svelte, quindi devi usare il prefisso `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Come tradurre la tua app SvelteKit – guida i18n 2026 description: Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR). keywords:

Internazionalizzazione
Documentazione
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Inizializzazione della cronologia

Traduci il tuo sito SvelteKit usando Intlayer | Internazionalizzazione (i18n)

Indice

Cos'è Intlayer?

Con Intlayer, puoi:

Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
Localizzare dinamicamente i metadata, le rotte e i contenuti.
Garantire il supporto TypeScript con tipi autogenerati.
Sfruttare l'SSR di SvelteKit per un'internazionalizzazione SEO-friendly.

Guida passo-passo per configurare Intlayer in un'applicazione SvelteKit

Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che realizzeremo:

bash

Copiare il codice

Copiare il codice nella clipboard

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Installare le Dipendenze

Installa i pacchetti necessari usando npm:

bash

Copiare il codice

Copiare il codice nella clipboard

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Il pacchetto core per l'internazionalizzazione (i18n).
svelte-intlayer: Fornisce context provider e store per Svelte/SvelteKit.
vite-intlayer: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.

Passo 2: Configurazione del tuo progetto

Crea un file di configurazione nella root del tuo progetto:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integrare Intlayer nella Configurazione di Vite

Aggiorna il tuo vite.config.ts per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

Passo 4: Dichiarare il Tuo Contenuto

Passo 5: Utilizzare Intlayer nei Tuoi Componenti

per accedere al suo valore reattivo (ad esempio, $content.title).

src/lib/components/Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corrisponde alla chiave definita nel Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizza il contenuto come contenuto semplice  --><h1>{$content.title}</h1><!-- Per rendere il contenuto modificabile usando l'editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Per rendere il contenuto come stringa --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opzionale) Passo 6: Configurare il routing

I passaggi seguenti mostrano come configurare il routing basato sulla locale in SvelteKit. Questo permette agli URL di includere il prefisso della locale (es. /en/about, /fr/about) per migliorare la SEO e l'esperienza utente.

bash

Copiare il codice

Copiare il codice nella clipboard

.└─── src    ├── app.d.ts                  # Definisce il tipo di locale    ├── hooks.server.ts           # Gestisce il routing della locale    ├── lib    │   └── getLocale.ts          # Controlla la locale dall'header, cookie    ├── params    │   └── locale.ts             # Definisce il parametro locale    └── routes        ├── [[locale=locale]]     # Raggruppa in un gruppo di route per impostare la locale        │   ├── +layout.svelte    # Layout locale per la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout radice per i font e gli stili globali

Passo 7: Gestire il Rilevamento della Locale lato Server (Hooks)

In SvelteKit, il server deve conoscere la locale dell'utente per renderizzare il contenuto corretto durante il SSR. Usiamo hooks.server.ts per rilevare la locale dall'URL o dai cookie.

Crea o modifica src/hooks.server.ts:

src/hooks.server.ts

Copiare il codice

Copiare il codice nella clipboard

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Controlla se il percorso corrente inizia già con una locale (es. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NON è presente una locale nell'URL (es. l'utente visita "/"), reindirizzalo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Reindirizzamento temporaneo    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Quindi, crea un helper per ottenere la locale dell'utente dall'evento della richiesta:

src/lib/getLocale.ts

Copiare il codice

Copiare il codice nella clipboard

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ottieni la locale dell'utente dall'evento di richiesta. * Questa funzione è utilizzata nel hook `handle` in `src/hooks.server.ts`. * * Prima tenta di ottenere la locale dallo storage di Intlayer (cookie o header personalizzati). * Se la locale non viene trovata, ricorre alla negoziazione "Accept-Language" del browser. * * @param event - L'evento di richiesta da SvelteKit * @returns La locale dell'utente */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Prova a ottenere la locale dallo storage di Intlayer (cookie o header)  const storedLocale = getLocaleFromStorage({    // Accesso ai cookie di SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accesso alle intestazioni di SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Ripiego sulla negoziazione "Accept-Language" del browser  const negotiatorHeaders: Record<string, string> = {};  // Conversione dell'oggetto Headers di SvelteKit in un semplice Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Controlla la locale dall'intestazione `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Restituisce la locale di default se non viene trovata una corrispondenza  return defaultLocale;};

getLocaleFromStorage controllerà la locale dall'header o dal cookie a seconda della tua configurazione. Vedi Configurazione per maggiori dettagli.

La funzione localeDetector gestirà l'header Accept-Language e restituirà la corrispondenza migliore.

Se la locale non è configurata, vogliamo restituire un errore 404. Per semplificare, possiamo creare una funzione match per verificare se la locale è valida:

/src/params/locale.ts

Copiare il codice

Copiare il codice nella clipboard

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Assicurati che il tuo file src/app.d.ts includa la definizione della locale:
typescript
Copiare il codice
Copiare il codice nella clipboard
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Per il file +layout.svelte, possiamo rimuovere tutto, mantenendo solo contenuti statici, non correlati a i18n:

src/+layout.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Successivamente, crea una nuova pagina e layout sotto il gruppo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiare il codice

Copiare il codice nella clipboard

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa il tipo generico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inizializza Intlayer con la locale dalla route  $effect(() => {      setupIntlayer(data.locale);  });    // Usa il dizionario dei contenuti del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiare il codice

Copiare il codice nella clipboard

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usa il dizionario dei contenuti della home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opzionale) Passo 8: Link Internazionalizzati

Per la SEO, si consiglia di anteporre alle tue rotte la locale (ad esempio, /en/about, /fr/about). Questo componente antepone automaticamente qualsiasi link con la locale corrente.

src/lib/components/LocalizedLink.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Helper per anteporre l'URL con la locale corrente  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Se usi goto di SvelteKit, puoi usare la stessa logica con getLocalizedUrl per navigare all'URL localizzato:

typescript

Copiare il codice

Copiare il codice nella clipboard

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Naviga verso /en/about o /fr/about a seconda della locale

(Opzionale) Passo 9: Selettore di Lingua

Per permettere agli utenti di cambiare lingua, aggiorna l'URL.

src/lib/components/LanguageSwitcher.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Imposterà la locale nello store e attiverà onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opzionale) Passo 10: Aggiungere un proxy backend

Per aggiungere un proxy backend alla tua applicazione SvelteKit, puoi usare la funzione intlayerProxy fornita dal plugin vite-intlayer. Questo plugin rileverà automaticamente la migliore locale per l'utente basandosi sull'URL, i cookie e le preferenze della lingua del browser.

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opzionale) Passo 11: Configurare l'editor / CMS di intlayer

Per configurare l'editor di intlayer, devi seguire la documentazione dell'editor di intlayer.

Per configurare il CMS di intlayer, devi seguire la documentazione del CMS di intlayer.

Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.

Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

Configurazione Git

Si consiglia di ignorare i file generati da Intlayer.

.gitignore

Copiare il codice

Copiare il codice nella clipboard

# Ignora i file generati da Intlayer.intlayer

Approfondimenti

Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.

Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice  -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

Configurazione Git

Si consiglia di ignorare i file generati da Intlayer.

.gitignore

Copiare il codice

Copiare il codice nella clipboard

# Ignora i file generati da Intlayer.intlayer

(Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti

Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.

Per facilitare questo processo, Intlayer propone un compilatore / estrattore per trasformare i tuoi componenti ed estrarre il contenuto.

Per configurarlo, puoi aggiungere una sezione compiler nel tuo file intlayer.config.ts:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto della tua configurazione
  compiler: {
    /**
     * Indica se il compilatore deve essere abilitato.
     */
    enabled: true,

    /**
     * Definisce il percorso dei file di output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.
     */
    saveComponents: false,

    /**
     * Prefisso chiave dizionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto

bash

Copiare il codice

Copiare il codice nella clipboard

npx intlayer extract

Aggiorna il tuo vite.config.ts per includere il plugin intlayerCompiler:

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Aggiunge il plugin del compilatore ],});

bash

Copiare il codice

Copiare il codice nella clipboard

npm run build # Oppure npm run dev

Vai oltre

Visual Editor: integra il Visual Editor di Intlayer per modificare le traduzioni direttamente dall'interfaccia utente.
CMS: esternalizza la gestione dei tuoi contenuti utilizzando il CMS di Intlayer.

Vite e Svelte

Vite e Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Imposterà la locale nello store e attiverà onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configurazione Git\n\nSi consiglia di ignorare i file generati da Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignora i file generati da Intlayer\n.intlayer\n```\n\n---\n\n### Approfondimenti\n\nPer poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configurazione Git\n\nSi consiglia di ignorare i file generati da Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignora i file generati da Intlayer\n.intlayer\n```\n\n---\n\n### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti\n\nSe hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.\n\nPer facilitare questo processo, Intlayer propone un [compilatore](/it/doc/compiler) / [estrattore](/it/doc/concept/cli/extract) per trasformare i tuoi componenti ed estrarre il contenuto.\n\nPer configurarlo, puoi aggiungere una sezione `compiler` nel tuo file `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto della tua configurazione\n compiler: {\n /**\n * Indica se il compilatore deve essere abilitato.\n */\n enabled: true,\n\n /**\n * Definisce il percorso dei file di output\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.\n */\n saveComponents: false,\n\n /**\n * Prefisso chiave dizionario\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nEsegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nAggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Aggiunge il plugin del compilatore\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Oppure npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # O pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # O yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Vai oltre\n\n- **Visual Editor**: integra il [Visual Editor di Intlayer](/it/doc/concept/editor) per modificare le traduzioni direttamente dall'interfaccia utente.\n- **CMS**: esternalizza la gestione dei tuoi contenuti utilizzando il [CMS di Intlayer](/it/doc/concept/cms).\n","about":"Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR).","url":"https://intlayer.org/it/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internazionalizzazione, Documentazione, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}

Creazione:2025-11-20Ultimo aggiornamento:2026-05-06

Visualizza il modello di applicazione su GitHub

Questa pagina ha un modello di applicazione disponibile.

Vedi l'applicazione showcase

Questa pagina collega a una demo dal vivo del modello.

Riferimento a questa documentazione al tuo assistente AI preferito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
v8.9.004/05/2026
"Aggiungi comando init"
v7.5.930/12/2025
"Inizializzazione della cronologia"
v7.1.1020/11/2025

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Traduci il tuo sito SvelteKit usando Intlayer | Internazionalizzazione (i18n)

ide.intlayer.org

Indice

Cos'è Intlayer?

Con Intlayer, puoi:

Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
Localizzare dinamicamente i metadata, le rotte e i contenuti.
Garantire il supporto TypeScript con tipi autogenerati.
Sfruttare l'SSR di SvelteKit per un'internazionalizzazione SEO-friendly.

Guida passo-passo per configurare Intlayer in un'applicazione SvelteKit

Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che realizzeremo:

bash

Copiare il codice

Copiare il codice nella clipboard

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Installare le Dipendenze

Installa i pacchetti necessari usando npm:

bash

Copiare il codice

Copiare il codice nella clipboard

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Il pacchetto core per l'internazionalizzazione (i18n).
svelte-intlayer: Fornisce context provider e store per Svelte/SvelteKit.
vite-intlayer: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.

Passo 2: Configurazione del tuo progetto

Crea un file di configurazione nella root del tuo progetto:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integrare Intlayer nella Configurazione di Vite

Aggiorna il tuo vite.config.ts per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

Passo 4: Dichiarare il Tuo Contenuto

Passo 5: Utilizzare Intlayer nei Tuoi Componenti

Nota: useIntlayer restituisce uno store Svelte, quindi devi usare il prefisso `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Come tradurre la tua app SvelteKit – guida i18n 2026 description: Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR). keywords:

Internazionalizzazione
Documentazione
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Inizializzazione della cronologia

Traduci il tuo sito SvelteKit usando Intlayer | Internazionalizzazione (i18n)

Indice

Cos'è Intlayer?

Con Intlayer, puoi:

Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
Localizzare dinamicamente i metadata, le rotte e i contenuti.
Garantire il supporto TypeScript con tipi autogenerati.
Sfruttare l'SSR di SvelteKit per un'internazionalizzazione SEO-friendly.

Guida passo-passo per configurare Intlayer in un'applicazione SvelteKit

Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che realizzeremo:

bash

Copiare il codice

Copiare il codice nella clipboard

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Installare le Dipendenze

Installa i pacchetti necessari usando npm:

bash

Copiare il codice

Copiare il codice nella clipboard

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Il pacchetto core per l'internazionalizzazione (i18n).
svelte-intlayer: Fornisce context provider e store per Svelte/SvelteKit.
vite-intlayer: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.

Passo 2: Configurazione del tuo progetto

Crea un file di configurazione nella root del tuo progetto:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integrare Intlayer nella Configurazione di Vite

Aggiorna il tuo vite.config.ts per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordine è importante, Intlayer deve essere posizionato prima di SvelteKit});

Passo 4: Dichiarare il Tuo Contenuto

Passo 5: Utilizzare Intlayer nei Tuoi Componenti

per accedere al suo valore reattivo (ad esempio, $content.title).

src/lib/components/Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corrisponde alla chiave definita nel Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizza il contenuto come contenuto semplice  --><h1>{$content.title}</h1><!-- Per rendere il contenuto modificabile usando l'editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Per rendere il contenuto come stringa --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corrisponde alla chiave definita nel Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizza il contenuto come contenuto semplice  --><h1>{$content.title}</h1><!-- Per rendere il contenuto modificabile usando l'editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Per rendere il contenuto come stringa --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opzionale) Passo 6: Configurare il routing

bash

Copiare il codice

Copiare il codice nella clipboard

.└─── src    ├── app.d.ts                  # Definisce il tipo di locale    ├── hooks.server.ts           # Gestisce il routing della locale    ├── lib    │   └── getLocale.ts          # Controlla la locale dall'header, cookie    ├── params    │   └── locale.ts             # Definisce il parametro locale    └── routes        ├── [[locale=locale]]     # Raggruppa in un gruppo di route per impostare la locale        │   ├── +layout.svelte    # Layout locale per la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout radice per i font e gli stili globali

.└─── src    ├── app.d.ts                  # Definisce il tipo di locale    ├── hooks.server.ts           # Gestisce il routing della locale    ├── lib    │   └── getLocale.ts          # Controlla la locale dall'header, cookie    ├── params    │   └── locale.ts             # Definisce il parametro locale    └── routes        ├── [[locale=locale]]     # Raggruppa in un gruppo di route per impostare la locale        │   ├── +layout.svelte    # Layout locale per la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout radice per i font e gli stili globali

Passo 7: Gestire il Rilevamento della Locale lato Server (Hooks)

In SvelteKit, il server deve conoscere la locale dell'utente per renderizzare il contenuto corretto durante il SSR. Usiamo hooks.server.ts per rilevare la locale dall'URL o dai cookie.

Crea o modifica src/hooks.server.ts:

src/hooks.server.ts

Copiare il codice

Copiare il codice nella clipboard

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Controlla se il percorso corrente inizia già con una locale (es. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NON è presente una locale nell'URL (es. l'utente visita "/"), reindirizzalo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Reindirizzamento temporaneo    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Controlla se il percorso corrente inizia già con una locale (es. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NON è presente una locale nell'URL (es. l'utente visita "/"), reindirizzalo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Reindirizzamento temporaneo    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Quindi, crea un helper per ottenere la locale dell'utente dall'evento della richiesta:

src/lib/getLocale.ts

Copiare il codice

Copiare il codice nella clipboard

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ottieni la locale dell'utente dall'evento di richiesta. * Questa funzione è utilizzata nel hook `handle` in `src/hooks.server.ts`. * * Prima tenta di ottenere la locale dallo storage di Intlayer (cookie o header personalizzati). * Se la locale non viene trovata, ricorre alla negoziazione "Accept-Language" del browser. * * @param event - L'evento di richiesta da SvelteKit * @returns La locale dell'utente */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Prova a ottenere la locale dallo storage di Intlayer (cookie o header)  const storedLocale = getLocaleFromStorage({    // Accesso ai cookie di SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accesso alle intestazioni di SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Ripiego sulla negoziazione "Accept-Language" del browser  const negotiatorHeaders: Record<string, string> = {};  // Conversione dell'oggetto Headers di SvelteKit in un semplice Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Controlla la locale dall'intestazione `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Restituisce la locale di default se non viene trovata una corrispondenza  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ottieni la locale dell'utente dall'evento di richiesta. * Questa funzione è utilizzata nel hook `handle` in `src/hooks.server.ts`. * * Prima tenta di ottenere la locale dallo storage di Intlayer (cookie o header personalizzati). * Se la locale non viene trovata, ricorre alla negoziazione "Accept-Language" del browser. * * @param event - L'evento di richiesta da SvelteKit * @returns La locale dell'utente */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Prova a ottenere la locale dallo storage di Intlayer (cookie o header)  const storedLocale = getLocaleFromStorage({    // Accesso ai cookie di SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accesso alle intestazioni di SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Ripiego sulla negoziazione "Accept-Language" del browser  const negotiatorHeaders: Record<string, string> = {};  // Conversione dell'oggetto Headers di SvelteKit in un semplice Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Controlla la locale dall'intestazione `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Restituisce la locale di default se non viene trovata una corrispondenza  return defaultLocale;};

getLocaleFromStorage controllerà la locale dall'header o dal cookie a seconda della tua configurazione. Vedi Configurazione per maggiori dettagli.

La funzione localeDetector gestirà l'header Accept-Language e restituirà la corrispondenza migliore.

Se la locale non è configurata, vogliamo restituire un errore 404. Per semplificare, possiamo creare una funzione match per verificare se la locale è valida:

/src/params/locale.ts

Copiare il codice

Copiare il codice nella clipboard

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Assicurati che il tuo file src/app.d.ts includa la definizione della locale:
typescript
Copiare il codice
Copiare il codice nella clipboard
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Per il file +layout.svelte, possiamo rimuovere tutto, mantenendo solo contenuti statici, non correlati a i18n:

src/+layout.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Successivamente, crea una nuova pagina e layout sotto il gruppo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiare il codice

Copiare il codice nella clipboard

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa il tipo generico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa il tipo generico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inizializza Intlayer con la locale dalla route  $effect(() => {      setupIntlayer(data.locale);  });    // Usa il dizionario dei contenuti del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inizializza Intlayer con la locale dalla route  $effect(() => {      setupIntlayer(data.locale);  });    // Usa il dizionario dei contenuti del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiare il codice

Copiare il codice nella clipboard

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usa il dizionario dei contenuti della home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usa il dizionario dei contenuti della home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opzionale) Passo 8: Link Internazionalizzati

Per la SEO, si consiglia di anteporre alle tue rotte la locale (ad esempio, /en/about, /fr/about). Questo componente antepone automaticamente qualsiasi link con la locale corrente.

src/lib/components/LocalizedLink.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Helper per anteporre l'URL con la locale corrente  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Helper per anteporre l'URL con la locale corrente  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Se usi goto di SvelteKit, puoi usare la stessa logica con getLocalizedUrl per navigare all'URL localizzato:

typescript

Copiare il codice

Copiare il codice nella clipboard

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Naviga verso /en/about o /fr/about a seconda della locale

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Naviga verso /en/about o /fr/about a seconda della locale

(Opzionale) Passo 9: Selettore di Lingua

Per permettere agli utenti di cambiare lingua, aggiorna l'URL.

src/lib/components/LanguageSwitcher.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Imposterà la locale nello store e attiverà onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Imposterà la locale nello store e attiverà onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opzionale) Passo 10: Aggiungere un proxy backend

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opzionale) Passo 11: Configurare l'editor / CMS di intlayer

Per configurare l'editor di intlayer, devi seguire la documentazione dell'editor di intlayer.

Per configurare il CMS di intlayer, devi seguire la documentazione del CMS di intlayer.

Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.

Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

Configurazione Git

Si consiglia di ignorare i file generati da Intlayer.

.gitignore

Copiare il codice

Copiare il codice nella clipboard

# Ignora i file generati da Intlayer.intlayer

# Ignora i file generati da Intlayer.intlayer

Approfondimenti

Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.

Component.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice  -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizza il contenuto come contenuto semplice  -->  <h1>{$content.title}</h1>  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->  {@const Component = $content.component}<Component /></div>

Configurazione Git

Si consiglia di ignorare i file generati da Intlayer.

.gitignore

Copiare il codice

Copiare il codice nella clipboard

# Ignora i file generati da Intlayer.intlayer

# Ignora i file generati da Intlayer.intlayer

(Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti

Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.

Per facilitare questo processo, Intlayer propone un compilatore / estrattore per trasformare i tuoi componenti ed estrarre il contenuto.

Per configurarlo, puoi aggiungere una sezione compiler nel tuo file intlayer.config.ts:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto della tua configurazione
  compiler: {
    /**
     * Indica se il compilatore deve essere abilitato.
     */
    enabled: true,

    /**
     * Definisce il percorso dei file di output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.
     */
    saveComponents: false,

    /**
     * Prefisso chiave dizionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto

bash

Copiare il codice

Copiare il codice nella clipboard

npx intlayer extract

npx intlayer extract

Aggiorna il tuo vite.config.ts per includere il plugin intlayerCompiler:

vite.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Aggiunge il plugin del compilatore ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Aggiunge il plugin del compilatore ],});

bash

Copiare il codice

Copiare il codice nella clipboard

npm run build # Oppure npm run dev

npm run build # Oppure npm run dev

Vai oltre

Visual Editor: integra il Visual Editor di Intlayer per modificare le traduzioni direttamente dall'interfaccia utente.
CMS: esternalizza la gestione dei tuoi contenuti utilizzando il CMS di Intlayer.

Vite e Svelte

Vite e Preact