How to use vue-i18n with Vuetify 3 inside Singlefile components?

[jtuchel]

For the sake of reproduction purposes I will try to describe what I've done:

• Based on the Vuetify installation docs I created a new project via npm create vuetify
• Based on the Vuetify i18n docs I installed the package vue-i18n and changed the plugin setup to

    import { createVuetify } from 'vuetify'
    import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
    import { createI18n, useI18n } from 'vue-i18n'
    
    const messages = { en: { title: "title | en" }, de: { title: "Titel | de" }}
    
    const i18n = new createI18n({
      legacy: false,
      locale: 'en',
      fallbackLocale: 'en',
      messages,
    })
    
    export default createVuetify({
      locale: {
        adapter: createVueI18nAdapter({ i18n, useI18n })
      }
    })

• For testing purposes I changed the content of App.vue to

    <script setup lang="ts">
    import { useLocale } from 'vuetify'
    
    const { t, current } = useLocale()
    
    setTimeout(() => {
      current.value = 'de';
    }, 3000);
    </script>
    
    <template>
      <div>
        <div>content:</div>
        <div>{{ t('title') }}</div>
      </div>
    </template>

This works as expected!

• Instead of managing the messages in a large object I would like to move them to their components as described in the vue-i18n docs. I completely removed the messages field from the i18n variable ( because I don't need the messages object anymore ) and added the following to App.vue

    <i18n>
      {
        "en": {
          "title": "title | en"
        },
        "de": {
          "title": "Titel | de"
        }
      }
    </i18n>

• Since this doesn't work out of the box I installed the package @intlify/unplugin-vue-i18n the from these docs , updated the package @vitejs/plugin-vue to version 3.2.0. and modified the vite.config.ts file to use the plugin

    VueI18nPlugin({
      include: resolve(dirname(fileURLToPath(import.meta.url)), './src/**'),
    }),

Unfortunately I don't know the correct path to use... For now the app does not render the message

Does someone know what's wrong or missing?