<i18n> tag does not load messages in Vue Component (project with Vite)

[SedueRey]

Reporting a bug?

We are migrating a large multi-language project from Vue 2 on webpack to Vue 3 on Vite and we are encountering a problem when loading the translations for each of the components using the tag in it.

These are the node dependencies for the new project:

"dependencies": {
    "@primevue/themes": "^4.2.4",
    "@vue-a11y/skip-to": "^3.0.3",
    "axios": "^1.7.8",
    "chance": "^1.1.12",
    "jwt-decode": "^4.0.0",
    "pinia": "^2.2.6",
    "pinia-plugin-persistedstate": "^4.1.3",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.4",
    "vue": "^3.5.12",
    "vue-cal": "^4.10.0",
    "vue-i18n": "^10.0.5",
    "vue-router": "^4.4.5",
    "vue3-touch-events": "^4.2.0",
    "vuedraggable": "^2.24.3"
  },
  "devDependencies": {
    "@intlify/unplugin-vue-i18n": "^6.0.0",
    "@testing-library/vue": "^8.1.0",
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.10.1",
    "@vitejs/plugin-basic-ssl": "^1.2.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vitest/eslint-plugin": "1.1.7",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.1.3",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "axe-core": "^4.10.2",
    "cypress": "^13.15.1",
    "eslint": "^9.14.0",
    "eslint-plugin-cypress": "^4.1.0",
    "eslint-plugin-vue": "^9.30.0",
    "jsdom": "^25.0.1",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.3.3",
    "sass-embedded": "^1.81.0",
    "start-server-and-test": "^2.0.8",
    "typescript": "~5.6.3",
    "vite": "^5.4.10",
    "vite-plugin-vue-devtools": "^7.5.4",
    "vitest": "^2.1.4",
    "vue-tsc": "^2.1.10"

Y un ejemplo de componente migrado:

<template>
  <div class="forbidden2FA">
    <div class="forbidden2FA__flexItems">
      <h1 class="forbidden2FA__title">{{ $t('forbidden_title') }}</h1>
      <div class="grid">
        <div class="forbidden2FA__message col-12">
          {{ $t('forbidden_message', { genderText: userTextGender }) }}
        </div>
        <div class="col-12 text-center pt-2">
          <fwjsTimer :timeLimit="redirectTimeout" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import fwjsTimer from '@/app/shared/components/fwjsTimer.vue';
  import { storeToRefs } from 'pinia';
  import { useI18n } from 'vue-i18n';
  import { usePageStore } from '@/app/shared/store/pages';
  
  const { t } = useI18n();
  // More component, unrelevant
  const userTextGender = computed(() => {
    if (user.value && user.value.afiliacion && user.value.afiliacion.sexo) {
      if (user.value.afiliacion.sexo === 'M') {
        return t('female_text');
      }
      if (user.value.afiliacion.sexo === 'V') {
        return t('male_text');
      }
    }
    return t('mix_text');
  });

  // More component, unrelevant
 
 onMounted(() => {
    usePageStore().setTitle(t('forbidden_title_sub'));
    setTimeout(() => {
      loginLoaMedium();
    }, redirectTimeout.value * 1000);
  });
</script>

<i18n src="../locales/auth.i18n.json" />

Expected behavior

The message with name ‘forbidden_title’ should display the string ‘You do not have permission’ in the template but we got [intlify] Not found key 'forbidden_title' in 'es' locale messages.

The same happens if we embed the translation strings inside the i18n tag.

Reproduction

The project in its current initial state is in:

git clone [email protected]:SedueRey/portal-ui-vue3-ongoing.git
npm install
npm run dev

You can take a view in home page src/App.vue because the warn also happens with safariButton message, you don't need to configure the whole project

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
    Memory: 47.23 GB / 63.74 GB
  Binaries:
    Node: 20.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    vite: ^5.4.10 => 5.4.11
    vue: ^3.5.12 => 3.5.13
    vue-i18n: ^10.0.5 => 10.0.5

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[kazupon]

Thank you for your reporting!
I've checked your reproduction repo.
I've noticed that your <i18n src="../locales/auth.i18n.json" /> doesn't specify locale attr.
You need it on i18n custom block.

[SedueRey]

Good morning
I have updated the main branch in the repository with what was commented in the previous comment (my apologies, I thought that as it had both translations it wasn't necessary) but it still can't find the translation key.
I upload, also, two screenshots