Cómo traducir con JSON

Traducciones por JSON usando las funciones t , tm de ‘vue-i18n’ en el campo de texto que se quiere que se imprima el texto en diferentes idomas automáticamente y de forma reactiva.

Archivos y funciones necesarias

1. Archivos:
   • JSON: uno por cada idioma.
2. Funciones:
   • t: devuelve un dato en concreto.
   • tm: devuelve estructuras de datos.

Archivos JSON.

Para que se traduzcan las páginas por JSON se necesita crear un archivo JSON por cada idioma que se quiere incluir y cada uno de ellos tiene que tener la misma estructura de datos y con los mismos nombres de campos.

//JSON para el idioma ES
{
  "main_navbar": {
    "main_links": {
      "training": "Formación",
      "training_title": "Formación Cirugía Alebat",
      "live": "Live",
      "live_title": "Live Cirugía Alebat",
      "blog": "Blog",
      "blog_title": "Blog Cirugía Alebat",
      "login": "Iniciar Sesión",
      "login_title": "Iniciar sesión en Cirugía Alebat",
      "cart_title": "Carrito Cirugia Alebat"
    },
    "profile_dropdown": {
      "profile_title": "Mi cuenta Cirugía Alebat",
      "exit_button": "Salir",
      "menu_button": "Menú",
      "profile_links": [
        {
          "title": "Página mi perfil de Alebat Ciguría",
          "text": "Perfil"
        },
        {
          "title": "Página facturación de Alebat Ciguría",
          "text": "Facturación"
        },
        {
          "title": "Página Dirección de Alebat Ciguría",
          "text": "Dirección"
        },
        {
          "title": "Página Historial de Alebat Ciguría",
          "text": "Historial"
        }
      ]
    }
  }
}

//JSON para el idioma EN
{
  "main_navbar": {
    "main_links": {
      "training": "Training",
      "training_title": "Cirugia Alebat training",
      "live": "Live",
      "live_title": "Live Cirugía Alebat",
      "blog": "Blog",
      "blog_title": "Blog Cirugía Alebat",
      "login": "Log in",
      "login_title": "Log in Cirugia Alebat",
      "cart_title": "Cirugia Alebat Cart"
    },
    "profile_dropdown": {
      "profile_title": "My Cirugía Alebat account",
      "exit_button": "Exit",
      "menu_button": "Menu",
      "profile_links": [
        {
          "title": "Alebat Ciguría my profile page",
          "text": "Profile"
        },
        {
          "title": "Alebat Ciguría billing page",
          "text": "Billing"
        },
        {
          "title": "Alebat Ciguría Address page",
          "text": "Address"
        },
        {
          "title": "Alebat Ciguría History Page",
          "text": "History"
        }
      ]
    }
  }
}

Funciones t y tm

Estas funciones sirven para que se muestre la información de los JSON imprimiendo el dato del JSON del idioma que se ha elegido. Estas funciones son reactivas.

Hay dos maneras de usar estas funciones, una es utilizarlas en el bloque del script y en el template. Si se usa en el bloque del script entonces hay que hacer una importación de la función de useI18n de ‘vue-i18n’ y crear la función t con la función importada. Si se va ha usar en el tempalte entonces no hay que importar la función de useI18n de ‘vue-i18n’ y crear la función t, si no que solo hay que utilizar la función con un signo ’$’ delante, es decir $t().

IMPORTANTE: Si se usa la función t o tm en el script entonces se sigue usando t o tm del script en el template y no se usa $t o $tm. Esas funciones solo se usan si no se van a usar en el script.

Función t

Esta función devuelve un dato en concreto y es incapaz de devolver estructuras de datos. Para usar, hay que pasarle a la función como parámetro un string con la ruta del dato al que se quiere acceder (JSONpath). Si la ruta es incorrecta o se produce un error, la función imprime el string de la ruta que se le ha proporcionado.

Usar la función en el script:

<script setup>
  import { useI18n } from "vue-i18n";

  const { t } = useI18n();

  const textButton = ref(t("login_register.login.form.button_next"));
</script>

Usar la función en el template:

<template>
  <NuxtLink :title="$t('main_navbar.main_links.login_title')">
    {{ $t('main_navbar.main_links.login') }}
  </NuxtLink>
</template>

Función tm

Esta función devuelve una estructura de datos. Para usar, hay que pasarle a la función como parámetro un string con la ruta del dato al que se quiere acceder (JSONpath). Si la ruta es incorrecta o se produce un error, la función imprime el string de la ruta que se le ha proporcionado.

Usar la función en el script:

<script setup>
  import { useI18n } from "vue-i18n";

  const { tm } = useI18n();

  const arrayProfileLinks = tm("main_navbar.profile_dropdown.profile_links");
</script>

Usar la función en el template:

<template>
  <li
    v-for="items in $tm('main_navbar.profile_dropdown.profile_links')"
    :key="items.sendData"
  >
    <NuxtLink @click="goToProfile(items.sendData)" :title="items.title">
      {{ items.text }}
    </NuxtLink>
  </li>
</template>