Как сделать перевод через i18n compile-time?

Question

[Masthead]

Необходимо сделать i18n в проекте через compile-time.

Проблема следующая: Конфиг сделал, связал с vite, пробросил сами jsonки.

// i18n.ts
import { createI18n } from 'vue-i18n'

import messages from '@intlify/unplugin-vue-i18n/messages'

const i18n = createI18n({
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'en',
  availableLocales: ['en', 'ru'],
  messages,
})

export default i18n

// vite.config.ts
 VueI18nPlugin({
      include: [path.resolve(__dirname, './src/locales/**')],
      runtimeOnly: false,
    }),

и сам компонент

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({
  inheritLocale: true,
})

function changeLanguage(lang: string) {
  locale.value = lang
}
</script>

<template>
  <div class="about">
    <p>{{ t('hello') }}</p>
    <p>{{ t('welcome') }}</p>

    <select v-model="locale" @change="changeLanguage(locale)">
      <option value="en">en</option>
      <option value="ru">ru</option>
    </select>
  </div>
</template>

В самом браузере он действительно видит и переводит на русский - но проблема, как только пытаешься переключить (и не только когда переключаешь, а как только компонент рендерится)
пишет вот это

AboutView.vue:43 [intlify] Not found 'hello' key in 'ru' locale messages.
AboutView.vue:43 [intlify] Fall back to translate 'hello' key with 'en' locale.

если написать тот же

<i18n>
{
  "en": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "ja": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>

но локали с файлов он тупо не видит, хотя почему-то на самом сайте виден русский перевод.

Answer 1

[Masthead]

я тупица и в глаза долблюсь.

const { t, locale } = useI18n({
inheritLocale: true,
})
inheritLocale: true - наследует локаль и ломает все, если убрать - все работает.