useLanguageChanger

Important: Es mejor usar UseLocales.

Vigila el idioma actual de la aplicación (guardado en una tienda global) y carga automáticamente las traducciones correspondientes para un componente dado cada vez que el idioma cambia.

Los datos traducidos se guardan en una variable reactiva llamada translateData.

Implementación del Composable:

// Importa el tipo común para componentes que tienen traducciones
import type { CommonComponent } from '@/types/commonComponents'
// Importa la tienda que maneja el estado del idioma de la app
import { useLanguageStore } from '@/stores/language'

/**
 * Hook que cambia automáticamente los datos traducidos de un componente
 * cuando cambia el idioma de la aplicación.
 *
 * @param translation Componente o recurso con las traducciones
 * @returns Un objeto con la traducción reactiva actualizada según el idioma
 */
export function useLanguageChanger<T>(translation: CommonComponent) {
  // Obtiene la referencia reactiva al idioma actual desde la store global
  const { language } = storeToRefs(useLanguageStore())

  // Referencia reactiva para almacenar los datos traducidos del componente
  const translateData = shallowRef<T>()

  // Observa cambios en el idioma seleccionado
  watch(
    language,
    async () => {
      // Cuando el idioma cambia, obtiene las traducciones para ese idioma usando useLocales
      const { data } = await useLocales<T>(translation)
      // Actualiza la referencia reactiva con las nuevas traducciones
      translateData.value = data
    },
    { immediate: true }, // Ejecuta la función inmediatamente al montar el watcher
  )

  // Devuelve la referencia reactiva con los datos traducidos actualizados
  return {
    translateData,
  }
}

Ejemplo de uso:

<script setup lang="ts">
import type { CookiesModalLocales } from "@/interfaces/locales/verticals/shared/cookiesModal";
const { setCookiesAccepted } = useCookies();

const { translateData: cookiesText } =
  useLanguageChanger<CookiesModalLocales>("cookies-modal"); // se usa aqui
</script>
<template>
  <section v-if="cookiesText" class="banner-cookies">
    <span>{{ cookiesText.cookies_text }}</span>
    <div class="banner-cookies__actions">
      <NuxtLinkLocale
        :to="{ name: 'politica-cookies' }"
        class="banner-cookies__info"
      >
        {{ cookiesText.more_info }}
      </NuxtLinkLocale>
      <button class="banner-cookies__accept" @click="setCookiesAccepted">
        {{ cookiesText.accept_cookies }}
      </button>
    </div>
  </section>
</template>

<style scoped lang="scss">
//estilos
</style>