t does not work in script setup

[torbentschechne]

Hey there,

I have a Vue3 application with Composition API and I use $t in the <template> tag all the time. That works. Now I need to use it within my script setup and $t is not recognized. I did the following:

I added the allowComposition: true, to the createI18n options:

const i18n = createI18n({
    allowComposition: true,
    locale: 'en',
    fallbackLocale: 'en',
    messages: loadLocaleMessages(),
});

And within my <script setup> I did :

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const navigation = [
    { name: t('navigation.dashboard')
]

But the name remains empty, so this does not work. When I use the same tag in the template with {{ $t('navigation.dashboard') }} it works.

Now I have two questions:

1. What am I doing wrong?
2. Can't I use t or $t in script setup without importing it in every single component? I looked into the docs, but this is not clear to me currently.

[torbentschechne]

Update:

It works when setting legacy to false.

const i18n = createI18n({
    allowComposition: true,
    legacy: false,

Still I wonder if I need to declare t in every component?

[torbentschechne]

I thought maybe I can do it like this to prevent defining the t variable in every component:

 import { createI18n, useI18n } from 'vue-i18n';
 
 const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: loadLocaleMessages(),
});

return createApp({
            render: () => h(App, props),
            setup() {
                const { t } = useI18n()
                return { t }
            }
        })
        .use(i18n)

But this does not work. Within my component, it states then that t is not defined when used in script setup