@intlayer/docs 7.3.10 → 7.3.12

package/docs/it/intlayer_with_nuxt.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2025-06-29
-title: Come tradurre la tua Nuxt and Vue – guida i18n 2025
+updatedAt: 2025-12-07
+title: Come tradurre la tua app Nuxt e Vue – guida i18n 2025
 description: Scopri come rendere il tuo sito Nuxt e Vue multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo.
 keywords:
   - Internazionalizzazione
@@ -14,33 +14,68 @@ slugs:
   - doc
   - environment
   - nuxt-and-vue
-applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-template
+applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-4-template
+youtubeVideo: https://www.youtube.com/watch?v=IE3XWkZ6a5U
 history:
+  - version: 7.3.11
+    date: 2025-12-07
+    changes: Aggiornamento LocaleSwitcher, SEO, metadata
   - version: 5.5.10
     date: 2025-06-29
-    changes: Inizio cronologia
+    changes: Inizializzazione cronologia
 ---
 
-# Traduci la tua Nuxt and Vue con Intlayer | Internazionalizzazione (i18n)
+# Traduci il tuo sito Nuxt e Vue usando Intlayer | Internazionalizzazione (i18n)
 
-Consulta il [Template Applicazione](https://github.com/aymericzip/intlayer-nuxt-template) su GitHub.
+## Indice
+
+<TOC/>
 
 ## Cos'è Intlayer?
 
-**Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+**Intlayer** è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
 
 Con Intlayer, puoi:
 
 - **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
+- **Localizzare dinamicamente metadata**, rotte e contenuti.
 - **Garantire il supporto a TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della lingua.
+- **Beneficiare di funzionalità avanzate**, come il rilevamento e lo switch dinamico della locale.
 
 ---
 
-## Guida passo passo per configurare Intlayer in un'applicazione Nuxt
+## Guida passo-passo per configurare Intlayer in un'applicazione Nuxt
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-4-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Come internazionalizzare la tua applicazione usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+### Passo 1: Installa le dipendenze
+
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
+<iframe title="Come tradurre la tua app Nuxt e Vue usando Intlayer? Scopri Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/IE3XWkZ6a5U?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+  </TabItem>
+  <TabItem label="Codice" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-4-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Come internazionalizzare la tua applicazione usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
 
-### Passo 1: Installare le dipendenze
+Vedi il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-nuxt-4-template) su GitHub.
 
 Installa i pacchetti necessari usando npm:
 
@@ -61,17 +96,17 @@ yarn add --save-dev nuxt-intlayer
 
 - **intlayer**
 
-  Il pacchetto principale che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md), la traspilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_cli.md).
+  Il pacchetto core che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md), la traspilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md).
 
 - **vue-intlayer**
   Il pacchetto che integra Intlayer con l'applicazione Vue. Fornisce i composables per i componenti Vue.
 
 - **nuxt-intlayer**
-  Il modulo Nuxt che integra Intlayer con le applicazioni Nuxt. Fornisce una configurazione automatica, middleware per il rilevamento della lingua, gestione dei cookie e reindirizzamento degli URL.
+  Il modulo Nuxt che integra Intlayer con le applicazioni Nuxt. Fornisce una configurazione automatica, middleware per il rilevamento della locale, gestione dei cookie e reindirizzamento degli URL.
 
 ### Passo 2: Configurazione del tuo progetto
 
-Crea un file di configurazione per impostare le lingue della tua applicazione:
+Crea un file di configurazione per configurare le lingue della tua applicazione:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -82,13 +117,10 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Le tue altre lingue
+      // Le tue altre localizzazioni
     ],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    contentDir: ["."], // Perché di default Intlayer monitorerà i file di dichiarazione dei contenuti dalla directory `./src`
-  },
 };
 
 export default config;
@@ -98,20 +130,16 @@ export default config;
 import { Locales } from "intlayer";
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Configurazione per Intlayer
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Le tue altre lingue
+      // Le tue altre localizzazioni
     ],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    contentDir: ["."],
-  },
 };
 
 export default config;
@@ -121,20 +149,16 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Configurazione per Intlayer
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Le tue altre lingue
+      // Le tue altre localizzazioni
     ],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    contentDir: ["."],
-  },
 };
 
 module.exports = config;
@@ -155,233 +179,47 @@ export default defineNuxtConfig({
 });
 ```
 
-> Il modulo `nuxt-intlayer` gestisce automaticamente l'integrazione di Intlayer con Nuxt. Configura la costruzione delle dichiarazioni di contenuto, monitora i file in modalità sviluppo, fornisce un middleware per il rilevamento della locale e gestisce il routing localizzato.
+> Il modulo `nuxt-intlayer` gestisce automaticamente l'integrazione di Intlayer con Nuxt. Configura la costruzione delle dichiarazioni di contenuto, monitora i file in modalità sviluppo, fornisce middleware per il rilevamento della locale e gestisce il routing localizzato.
 
-### Passo 4: Dichiara il Tuo Contenuto
+### Passo 4: Dichiara il tuo contenuto
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
-```tsx fileName="components/helloWorld.content.ts" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
+```tsx fileName="content/home-page.content.ts" contentDeclarationFormat="typescript"
+import { type Dictionary, t } from "intlayer";
 
-const helloWorldContent = {
-  key: "helloworld",
+const content = {
+  key: "home-page",
   content: {
-    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
-    edit: t({
-      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-    }),
-    checkOut: t({
-      en: "Check out ",
-      it: "Dai un'occhiata a ",
-      fr: "Vérifiez ",
-      es: "Compruebe ",
-    }),
-    nuxtIntlayer: t({
-      en: "Nuxt Intlayer documentation",
-      it: "Documentazione di Nuxt Intlayer",
-      fr: "Documentation de Nuxt Intlayer",
-      es: "Documentación de Nuxt Intlayer",
-    }),
-    learnMore: t({
-      en: "Learn more about Nuxt in the ",
-      it: "Per saperne di più su Nuxt in ",
-      fr: "En savoir plus sur Nuxt dans la ",
-      es: "Aprenda más sobre Nuxt en la ",
+    title: t({
+      en: "Hello world",
+      fr: "Bonjour le monde",
+      es: "Hola mundo",
     }),
-    nuxtDocs: t({
-      en: "Nuxt Documentation",
-      it: "Documentazione Nuxt",
-      fr: "Documentation Nuxt",
-      es: "Documentación de Nuxt",
+    metaTitle: t({
+      en: "Welcome | My Application",
+      fr: "Bienvenue | Mon Application",
+      es: "Bienvenido | Mi Aplicación",
     }),
-    readTheDocs: t({
-      en: "Click on the Nuxt logo to learn more",
-      it: "Clicca sul logo di Nuxt per saperne di più",
-      fr: "Cliquez sur le logo Nuxt pour en savoir plus",
-      es: "Haga clic en el logotipo de Nuxt para obtener más información",
-      it: "Clicca sul logo di Nuxt per saperne di più",
+    metaDescription: t({
+      en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",
+      it: "Scopri la homepage multilingue della tua app Nuxt alimentata da Intlayer.",
+      fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",
+      es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",
     }),
   },
 } satisfies Dictionary;
 
-export default helloWorldContent;
+export default content;
 ```
 
-```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
+> Le tue dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione purché siano incluse nella directory `contentDir` (di default, `./src`). E corrispondano all'estensione del file di dichiarazione del contenuto (di default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
-/** @type {import('intlayer').Dictionary} */
-const helloWorldContent = {
-  key: "helloworld",
-  content: {
-    count: t({
-      en: "count is ",
-      fr: "le compte est ",
-      es: "el recuento es ",
-      it: "il conteggio è ",
-    }),
-    edit: t({
-      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-      it: "Modifica <code>components/HelloWorld.vue</code> e salva per testare HMR",
-    }),
-    checkOut: t({
-      en: "Check out ",
-      it: "Dai un'occhiata a ",
-      fr: "Vérifiez ",
-      es: "Compruebe ",
-    }),
-    nuxtIntlayer: t({
-      en: "Nuxt Intlayer documentation",
-      it: "Documentazione di Nuxt Intlayer",
-      fr: "Documentation de Nuxt Intlayer",
-      es: "Documentación de Nuxt Intlayer",
-    }),
-    learnMore: t({
-      en: "Learn more about Nuxt in the ",
-      it: "Scopri di più su Nuxt in ",
-      fr: "En savoir plus sur Nuxt dans la ",
-      es: "Aprenda más sobre Nuxt en la ",
-    }),
-    nuxtDocs: t({
-      en: "Nuxt Documentation",
-      it: "Documentazione Nuxt",
-      fr: "Documentation Nuxt",
-      es: "Documentación de Nuxt",
-    }),
-    readTheDocs: t({
-      en: "Click on the Nuxt logo to learn more",
-      it: "Clicca sul logo di Nuxt per saperne di più",
-      fr: "Cliquez sur le logo Nuxt pour en savoir plus",
-      es: "Haga clic en el logotipo de Nuxt para obtener más información",
-    }),
-  },
-};
+> Per maggiori dettagli, consulta la [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-export default helloWorldContent;
-```
+### Passo 5: Utilizza Intlayer nel Tuo Codice
 
-```javascript fileName="components/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const helloWorldContent = {
-  key: "helloworld",
-  content: {
-    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es ", it: "il conteggio è " }),
-    edit: t({
-      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-      it: "Modifica <code>components/HelloWorld.vue</code> e salva per testare HMR",
-    }),
-    checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe ", it: "Dai un'occhiata a " }),
-    nuxtIntlayer: t({
-      en: "Nuxt Intlayer documentation",
-      fr: "Documentation de Nuxt Intlayer",
-      es: "Documentación de Nuxt Intlayer",
-      it: "Documentazione di Nuxt Intlayer",
-    }),
-      es: "Documentación de Nuxt Intlayer",
-    }),
-    learnMore: t({
-      en: "Learn more about Nuxt in the ",
-      it: "Per saperne di più su Nuxt in ",
-      fr: "En savoir plus sur Nuxt dans la ",
-      es: "Aprenda más sobre Nuxt en la ",
-    }),
-    nuxtDocs: t({
-      en: "Nuxt Documentation",
-      it: "Documentazione Nuxt",
-      fr: "Documentation Nuxt",
-      es: "Documentación de Nuxt",
-    }),
-    readTheDocs: t({
-      en: "Click on the Nuxt logo to learn more",
-      it: "Clicca sul logo di Nuxt per saperne di più",
-      fr: "Cliquez sur le logo Nuxt pour en savoir plus",
-      es: "Haga clic en el logotipo de Nuxt para obtener más información",
-    }),
-  },
-};
-
-module.exports = helloWorldContent;
-```
-
-```json fileName="components/helloWorld.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "helloworld",
-  "content": {
-    "count": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "count is ",
-        "fr": "le compte est ",
-        "es": "el recuento es ",
-        "it": "il conteggio è "
-      }
-    },
-    "edit": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-        "fr": "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-        "es": "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-        "it": "Modifica <code>components/HelloWorld.vue</code> e salva per testare HMR"
-      }
-    },
-    "checkOut": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Check out ",
-        "fr": "Vérifiez ",
-        "es": "Compruebe ",
-        "it": "Dai un'occhiata a "
-      }
-    },
-    "nuxtIntlayer": {
-      "nodeType": "translation",
-      "translation": {
-        "it": "Documentazione di Nuxt Intlayer"
-      }
-    },
-    "learnMore": {
-      "nodeType": "translation",
-      "translation": {
-        "it": "Scopri di più su Nuxt in "
-      }
-    },
-    "nuxtDocs": {
-      "nodeType": "translation",
-      "translation": {
-        "it": "Documentazione di Nuxt"
-      }
-    },
-    "readTheDocs": {
-      "nodeType": "translation",
-      "translation": {
-        "it": "Clicca sul logo di Nuxt per saperne di più"
-      }
-    }
-        "es": "Haga clic en el logotipo de Nuxt para obtener más información"
-      }
-    }
-  }
-}
-```
-
-> Le dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione purché siano incluse nella directory `contentDir` (di default, `./src`). E corrispondano all'estensione del file di dichiarazione del contenuto (di default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
-
-> Per maggiori dettagli, consulta la [documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md).
-
-### Passo 5: Utilizza Intlayer nel tuo codice
-
-Accedi ai tuoi dizionari di contenuto in tutta la tua applicazione Nuxt utilizzando il composable `useIntlayer`:
+Accedi ai tuoi dizionari di contenuti in tutta l'applicazione Nuxt utilizzando il composable `useIntlayer`:
 
 ```vue fileName="components/HelloWorld.vue"
 <script setup lang="ts">
@@ -434,82 +272,72 @@ const countRef = ref(0);
 
 Intlayer offre diverse API per accedere ai tuoi contenuti:
 
-- **Sintassi basata su componenti** (consigliata):  
-  Usa la sintassi `<myContent />` o `<Component :is="myContent" />` per rendere il contenuto come un Nodo Intlayer. Questo si integra perfettamente con il [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) e il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+- **Sintassi basata su componenti** (consigliata):
+  Usa la sintassi `<myContent />`, o `<Component :is="myContent" />` per rendere il contenuto come un Nodo Intlayer. Questo si integra perfettamente con il [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) e il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
 
-- **Sintassi basata su stringhe**:  
-  Usa `{{ myContent }}` per rendere il contenuto come testo semplice, senza supporto del Visual Editor.
+- **Sintassi basata su stringhe**:
+  Usa `{{ myContent }}` per rendere il contenuto come testo semplice, senza supporto per il Visual Editor.
 
-- **Sintassi HTML grezzo**:  
-  Usa `<div v-html="myContent" />` per rendere il contenuto come HTML grezzo, senza supporto del Visual Editor.
+- **Sintassi HTML grezzo**:
+  Usa `<div v-html="myContent" />` per rendere il contenuto come HTML grezzo, senza supporto per il Visual Editor.
 
-- **Sintassi di destrutturazione**:  
+- **Sintassi di destrutturazione**:
   Il composable `useIntlayer` restituisce un Proxy con il contenuto. Questo proxy può essere destrutturato per accedere al contenuto mantenendo la reattività.
-- Usa `const content = useIntlayer("myContent");` e `{{ content.myContent }}` / `<content.myContent />`.
-- Oppure usa `const { myContent } = useIntlayer("myContent");` e `{{ myContent}}` / `<myContent/>` per destrutturare il contenuto.
+  - Usa `const content = useIntlayer("myContent");` e `{{ content.myContent }}` / `<content.myContent />`.
+  - Oppure usa `const { myContent } = useIntlayer("myContent");` e `{{ myContent}}` / `<myContent/>` per destrutturare il contenuto.
 
 ### (Opzionale) Passo 6: Cambiare la lingua del tuo contenuto
 
-Per cambiare la lingua del tuo contenuto, puoi usare la funzione `setLocale` fornita dal composable `useLocale`. Questa funzione ti permette di impostare la localizzazione dell'applicazione e aggiornare il contenuto di conseguenza.
+Per cambiare la lingua del tuo contenuto, puoi usare la funzione `setLocale` fornita dal composable `useLocale`. Questa funzione ti permette di impostare la locale dell'applicazione e aggiornare di conseguenza il contenuto.
 
-Crea un componente per cambiare lingua:
+Crea un componente per cambiare lingua usando `NuxtLink`. **Usare link invece di pulsanti per il cambio di locale è una best practice per la SEO e la scoperta delle pagine**, poiché permette ai motori di ricerca di scansionare e indicizzare tutte le versioni localizzate delle tue pagine:
 
 ```vue fileName="components/LocaleSwitcher.vue"
-<template>
-  <div class="locale-switcher">
-    <select v-model="selectedLocale" @change="changeLocale">
-      <option v-for="loc in availableLocales" :key="loc" :value="loc">
-        {{ getLocaleName(loc) }}
-      </option>
-    </select>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { getLocaleName } from "intlayer";
+import { getLocaleName, getLocalizedUrl } from "intlayer";
 import { useLocale } from "vue-intlayer";
 
-// Ottieni le informazioni sulla localizzazione e la funzione setLocale
+// Nuxt importa automaticamente useRoute
+const route = useRoute();
 const { locale, availableLocales, setLocale } = useLocale();
-
-// Tieni traccia della localizzazione selezionata con un ref
-const selectedLocale = ref(locale.value);
-
-// Aggiorna la localizzazione quando la selezione cambia
-const changeLocale = () => setLocale(selectedLocale.value);
-
-// Mantieni selectedLocale sincronizzato con la localizzazione globale
-watch(
-  () => locale.value,
-  (newLocale) => {
-    selectedLocale.value = newLocale;
-  }
-);
 </script>
+
+<template>
+  <nav class="locale-switcher">
+    <NuxtLink
+      v-for="localeEl in availableLocales"
+      :key="localeEl"
+      :to="getLocalizedUrl(route.fullPath, localeEl)"
+      class="locale-link"
+      :class="{ 'active-locale': localeEl === locale }"
+      @click="setLocale(localeEl)"
+    >
+      {{ getLocaleName(localeEl) }}
+    </NuxtLink>
+  </nav>
 </template>
+```
 
-<style scoped>
-.locale-switcher {
-  margin: 1rem 0;
-}
+> L'uso di `NuxtLink` con attributi `href` corretti (tramite `getLocalizedUrl`) garantisce che i motori di ricerca possano scoprire tutte le varianti linguistiche delle tue pagine. Questo è preferibile rispetto al cambio di lingua basato solo su JavaScript, che i crawler dei motori di ricerca potrebbero non seguire.
 
-select {
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  border: 1px solid #ccc;
-}
-</style>
+Quindi, configura il tuo `app.vue` per utilizzare i layout:
+
+```vue fileName="app.vue"
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
 ```
 
-Quindi, usa questo componente nelle tue pagine o nel layout:
+### (Opzionale) Passo 6b: Crea un Layout con Navigazione
 
-```vue fileName="app.vue"
+I layout di Nuxt ti permettono di definire una struttura comune per le tue pagine. Crea un layout di default che includa il selettore di lingua e la navigazione:
+
+```vue fileName="layouts/default.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
+import Links from "~/components/Links.vue";
 import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
-
-const content = useIntlayer("app"); // Crea il file di dichiarazione intlayer correlato
 </script>
 
 <template>
@@ -518,15 +346,20 @@ const content = useIntlayer("app"); // Crea il file di dichiarazione intlayer co
       <LocaleSwitcher />
     </header>
     <main>
-      <NuxtPage />
+      <slot />
     </main>
+
+    <Links href="/">Home</Links>
+    <Links href="/about">About</Links>
   </div>
 </template>
 ```
 
-### (Opzionale) Passo 7: Aggiungi il routing localizzato alla tua applicazione
+Il componente `Links` (mostrato di seguito) garantisce che i link di navigazione interna siano automaticamente localizzati.
 
-Nuxt gestisce automaticamente il routing localizzato quando si utilizza il modulo `nuxt-intlayer`. Questo crea percorsi per ogni lingua automaticamente basandosi sulla struttura della directory delle pagine.
+### (Opzionale) Passo 7: Aggiungi il Routing localizzato alla tua applicazione
+
+Nuxt gestisce automaticamente il routing localizzato quando si utilizza il modulo `nuxt-intlayer`. Questo crea rotte per ogni lingua automaticamente in base alla struttura della directory delle tue pagine.
 
 Esempio:
 
@@ -538,217 +371,290 @@ pages/
     └── index.vue      → /contact, /fr/contact, /es/contact
 ```
 
-Per creare una pagina localizzata, basta creare i tuoi file Vue nella directory `pages/`:
+Per creare pagine localizzate, crea semplicemente i tuoi file Vue nella directory `pages/`. Ecco due esempi di pagine:
+
+**Pagina Home (`pages/index.vue`):**
+
+```vue fileName="pages/index.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("home-page");
+
+useHead({
+  title: content.metaTitle.value,
+  meta: [
+    {
+      name: "description",
+      content: content.metaDescription.value,
+    },
+  ],
+});
+</script>
+
+<template>
+  <h1><content.title /></h1>
+</template>
+```
+
+**Pagina About (`pages/about.vue`):**
 
 ```vue fileName="pages/about.vue"
 <script setup lang="ts">
 import { useIntlayer } from "vue-intlayer";
 
-const content = useIntlayer("about");
+const content = useIntlayer("about-page");
+
+useHead({
+  title: content.metaTitle.raw, // Usa .raw per accedere alla stringa primitiva
+  meta: [
+    {
+      name: "description",
+      content: content.metaDescription.raw, // Usa .raw per accedere alla stringa primitiva
+    },
+  ],
+});
 </script>
 
 <template>
-  <div>
-    <h1>{{ content.title }}</h1>
-    <p>{{ content.description }}</p>
-  </div>
+  <h1><content.title /></h1>
 </template>
 ```
 
-Il modulo `nuxt-intlayer` automaticamente:
+> Nota: `useHead` è importato automaticamente in Nuxt. Puoi accedere ai valori del contenuto usando `.value` (reattivo) o `.raw` (stringa primitiva) a seconda delle tue esigenze.
+
+Il modulo `nuxt-intlayer` farà automaticamente:
 
-- Rilevare la lingua preferita dall'utente
-- Gestire il cambio di lingua tramite URL
+- Rilevare la locale preferita dall'utente
+- Gestire il cambio di locale tramite URL
 - Impostare l'attributo `<html lang="">` appropriato
-- Gestire i cookie della lingua
+- Gestire i cookie della locale
 - Reindirizzare gli utenti all'URL localizzato corretto
 
 ### (Opzionale) Passo 8: Creare un componente Link localizzato
 
-Per assicurarti che la navigazione della tua applicazione rispetti la lingua corrente, puoi creare un componente personalizzato `LocalizedLink`. Questo componente aggiunge automaticamente il prefisso della lingua corrente agli URL interni.
-
-```vue fileName="components/LocalizedLink.vue"
-<template>
-  <NuxtLink :to="localizedHref" v-bind="$attrs">
-    <slot />
-  </NuxtLink>
-</template>
+Per garantire che la navigazione della tua applicazione rispetti la lingua corrente, puoi creare un componente `Links` personalizzato. Questo componente aggiunge automaticamente il prefisso della lingua corrente agli URL interni, cosa essenziale per la **SEO e la scoperta delle pagine**.
 
+```vue fileName="components/Links.vue"
 <script setup lang="ts">
-import { computed } from "vue";
 import { getLocalizedUrl } from "intlayer";
+// Importa il composable per la gestione della lingua corrente
 import { useLocale } from "vue-intlayer";
 
-const props = defineProps({
-  to: {
-    type: String,
-    required: true,
-  },
-});
+interface Props {
+  href: string;
+  locale?: string;
+}
+
+const props = defineProps<Props>();
+
+const { locale: currentLocale } = useLocale();
 
-const { locale } = useLocale();
+// Calcola il percorso finale
+const finalPath = computed(() => {
+  // 1. Verifica se il link è esterno
+  const isExternal = /^https?:\/\//.test(props.href || "");
 
-// Verifica se il link è esterno
-const isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));
+  // 2. Se esterno, restituisci così com'è (NuxtLink gestisce la generazione del tag <a>)
+  if (isExternal) return props.href;
 
-// Crea un href localizzato per i link interni
-const localizedHref = computed(() =>
-  isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value)
-);
+  // 3. Se è interno, localizza l'URL
+  const targetLocale = props.locale || currentLocale.value;
+  return getLocalizedUrl(props.href, targetLocale);
+});
 </script>
+
+<template>
+  <NuxtLink :to="finalPath" v-bind="$attrs">
+    <slot />
+  </NuxtLink>
+</template>
 ```
 
 Quindi usa questo componente in tutta la tua applicazione:
 
-```vue fileName="pages/index.vue"
+```vue fileName="layouts/default.vue"
+<script setup lang="ts">
+import Links from "~/components/Links.vue";
+import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
+</script>
+
 <template>
   <div>
-    <LocalizedLink to="/about">
-      {{ content.aboutLink }}
-    </LocalizedLink>
-    <LocalizedLink to="/contact">
-      {{ content.contactLink }}
-    </LocalizedLink>
+    <header>
+      <LocaleSwitcher />
+    </header>
+    <main>
+      <slot />
+    </main>
+
+    <Links href="/">Home</Links>
+    <Links href="/about">About</Links>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-import LocalizedLink from "~/components/LocalizedLink.vue";
-
-const content = useIntlayer("home");
-</script>
 ```
 
-### (Opzionale) Passo 9: Gestire i Metadati e la SEO
+> Utilizzando `NuxtLink` con percorsi localizzati, si garantisce che:
+>
+> - I motori di ricerca possano eseguire la scansione e indicizzare tutte le versioni linguistiche delle tue pagine
+> - Gli utenti possano condividere direttamente URL localizzati
+> - La cronologia del browser funzioni correttamente con URL prefissati dalla locale
 
-Nuxt offre eccellenti funzionalità SEO. Puoi usare Intlayer per gestire i metadati localizzati:
+### (Opzionale) Passo 9: Gestire Metadata e SEO
+
+Nuxt offre eccellenti funzionalità SEO tramite il composable `useHead` (auto-importato). Puoi utilizzare Intlayer per gestire i metadata localizzati usando l'accessore `.raw` o `.value` per ottenere il valore stringa primitivo:
 
 ```vue fileName="pages/about.vue"
 <script setup lang="ts">
-import { useSeoMeta } from "nuxt/app";
-import { getIntlayer } from "intlayer";
-import { useLocale } from "vue-intlayer";
+import { useIntlayer } from "vue-intlayer";
 
-const { locale } = useLocale();
-const content = getIntlayer("about-meta", locale.value);
+// useHead è auto-importato in Nuxt
+const content = useIntlayer("about-page");
 
-useSeoMeta({
-  title: content.title,
-  description: content.description,
+useHead({
+  title: content.metaTitle.raw, // Usa .raw per accedere al valore stringa primitivo
+  meta: [
+    {
+      name: "description",
+      content: content.metaDescription.raw, // Usa .raw per accedere alla stringa primitiva
+    },
+  ],
 });
 </script>
 
 <template>
-  <div>
-    <h1>{{ content.pageTitle }}</h1>
-    <p>{{ content.pageContent }}</p>
-  </div>
+  <h1><content.title /></h1>
 </template>
 ```
 
+> In alternativa, puoi usare la funzione `import { getIntlayer } from "intlayer"` per ottenere il contenuto senza la reattività di Vue.
+
+> **Accesso ai valori del contenuto:**
+>
+> - Usa `.raw` per ottenere il valore stringa primitivo (non reattivo)
+> - Usa `.value` per ottenere il valore reattivo
+> - Usa la sintassi componente `<content.key />` per il supporto all'Editor Visuale
+
 Crea la dichiarazione di contenuto corrispondente:
 
-```ts fileName="pages/about-meta.content.ts"
+```ts fileName="pages/about-page.content.ts" contentDeclarationFormat="typescript"
 import { t, type Dictionary } from "intlayer";
-import type { useSeoMeta } from "nuxt/app";
 
-const aboutMetaContent = {
-  key: "about-meta",
+const aboutPageContent = {
+  key: "about-page",
   content: {
-    title: t({
+    metaTitle: t({
       en: "About Us - My Company",
       fr: "À Propos - Ma Société",
       es: "Acerca de Nosotros - Mi Empresa",
-      it: "Chi Siamo - La Mia Azienda",
     }),
-    description: t({
+    metaDescription: t({
+      it: "Scopri di più sulla nostra azienda e sulla nostra missione",
       en: "Learn more about our company and our mission",
       fr: "En savoir plus sur notre société et notre mission",
       es: "Conozca más sobre nuestra empresa y nuestra misión",
-      it: "Scopri di più sulla nostra azienda e sulla nostra missione",
+    }),
+    title: t({
+      it: "Chi Siamo",
+      en: "About Us",
+      fr: "À Propos",
+      es: "Acerca de Nosotros",
     }),
   },
-} satisfies Dictionary<Parameters<typeof useSeoMeta>[0]>;
+} satisfies Dictionary;
 
-export default aboutMetaContent;
+export default aboutPageContent;
 ```
 
-```typescript fileName="pages/about-meta.content.mjs" contentDeclarationFormat="esm"
+```javascript fileName="pages/about-page.content.mjs" contentDeclarationFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
-const aboutMetaContent = {
-  key: "about-meta",
+const aboutPageContent = {
+  key: "about-page",
   content: {
-    title: t({
-      zh: "关于我们 - 我的公司",
+    metaTitle: t({
       it: "Chi Siamo - La Mia Azienda",
       en: "About Us - My Company",
       fr: "À Propos - Ma Société",
       es: "Acerca de Nosotros - Mi Empresa",
     }),
-    description: t({
-      zh: "了解更多关于我们公司和我们的使命",
-      it: "Scopri di più sulla nostra azienda e sulla nostra missione",
-      en: "Learn more about our company and our mission",
+    metaDescription: t({
+      en: "Scopri di più sulla nostra azienda e sulla nostra missione",
       fr: "En savoir plus sur notre société et notre mission",
       es: "Conozca más sobre nuestra empresa y nuestra misión",
     }),
+    title: t({
+      en: "Chi Siamo",
+      fr: "À Propos",
+      es: "Acerca de Nosotros",
+    }),
   },
 };
 
-export default aboutMetaContent;
+export default aboutPageContent;
 ```
 
-```typescript fileName="pages/about-meta.content.js" contentDeclarationFormat="cjs"
+```javascript fileName="pages/about-page.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-const aboutMetaContent = {
-  key: "about-meta",
+const aboutPageContent = {
+  key: "about-page",
   content: {
-    title: t({
-      zh: "关于我们 - 我的公司",
-      it: "Chi Siamo - La Mia Azienda",
-      en: "About Us - My Company",
+    metaTitle: t({
+      en: "Chi Siamo - La Mia Azienda",
       fr: "À Propos - Ma Société",
       es: "Acerca de Nosotros - Mi Empresa",
     }),
-    description: t({
-      zh: "了解更多关于我们公司和我们的使命",
+    metaDescription: t({
       en: "Learn more about our company and our mission",
       fr: "En savoir plus sur notre société et notre mission",
       es: "Conozca más sobre nuestra empresa y nuestra misión",
       it: "Scopri di più sulla nostra azienda e sulla nostra missione",
     }),
+    title: t({
+      en: "About Us",
+      fr: "À Propos",
+      es: "Acerca de Nosotros",
+      it: "Chi Siamo",
+    }),
   },
 };
 
-module.exports = aboutMetaContent;
+module.exports = aboutPageContent;
 ```
 
-```json fileName="pages/about-meta.content.json" contentDeclarationFormat="json"
+```json fileName="pages/about-page.content.json" contentDeclarationFormat="json"
 {
-  "key": "about-meta",
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "about-page",
   "content": {
-    "title": {
+    "metaTitle": {
       "nodeType": "translation",
-      "translations": {
-        "zh": "关于我们 - 我的公司",
+      "translation": {
         "en": "About Us - My Company",
         "fr": "À Propos - Ma Société",
         "es": "Acerca de Nosotros - Mi Empresa",
         "it": "Chi Siamo - La Mia Azienda"
       }
     },
-    "description": {
+    "metaDescription": {
       "nodeType": "translation",
-      "translations": {
-        "zh": "了解更多关于我们公司和我们的使命",
+      "translation": {
         "en": "Learn more about our company and our mission",
         "fr": "En savoir plus sur notre société et notre mission",
-        "es": "Conozca más sobre nuestra empresa y nuestra misión"
+        "es": "Conozca más sobre nuestra empresa y nuestra misión",
+        "it": "Scopri di più sulla nostra azienda e sulla nostra missione"
+      }
+    },
+    "title": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "About Us",
+        "fr": "À Propos",
+        "es": "Acerca de Nosotros",
+        "it": "Chi Siamo"
       }
     }
   }
@@ -757,17 +663,17 @@ module.exports = aboutMetaContent;
 
 ### Configurare TypeScript
 
-Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
+Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua codebase più robusta.
 
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+![Autocompletamento](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+![Errore di traduzione](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.
+Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente.
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... Le tue configurazioni esistenti di TypeScript
+  // ... Le tue configurazioni TypeScript esistenti
   "include": [
     // ... Le tue configurazioni TypeScript esistenti
     ".intlayer/**/*.ts", // Includi i tipi generati automaticamente
@@ -779,7 +685,7 @@ Assicurati che la tua configurazione di TypeScript includa i tipi generati autom
 
 Si consiglia di ignorare i file generati da Intlayer. Questo ti permette di evitare di committarli nel tuo repository Git.
 
-Per fare ciò, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
+Per farlo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
 
 ```plaintext fileName=".gitignore"
 # Ignora i file generati da Intlayer
@@ -788,23 +694,21 @@ Per fare ciò, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
 
 ### Estensione VS Code
 
-Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'**Estensione ufficiale Intlayer per VS Code**.
+Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare la **Intlayer VS Code Extension** ufficiale.
 
 [Installa dal VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-Questa estensione fornisce:
+Questa estensione offre:
 
-- **Completamento automatico** per le chiavi di traduzione.
-- **Rilevamento errori in tempo reale** per le traduzioni mancanti.
+- **Autocompletamento** per le chiavi di traduzione.
+- **Rilevamento errori in tempo reale** per traduzioni mancanti.
 - **Anteprime inline** del contenuto tradotto.
 - **Azioni rapide** per creare e aggiornare facilmente le traduzioni.
 
-Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazione dell'estensione Intlayer per VS Code](https://intlayer.org/doc/vs-code-extension).
+Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazione della Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-### Approfondimenti
-
-Per approfondire, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+### Vai oltre
 
----
+Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).