How can I use i18n in Nuxt3 composable API type and usestatus?

[jiayuwenn]

Hi, the project is using Vue3.2 + Nuxt3, we use i18n in all over the component files, but there are still some part of the text that are coming from composables, I am wondering is there anyway could use the i18n in composable usexxxx files?

for example:
in composables:

export type Fruits = 'apple' | 'banana' | 'orange'

const useFruits = () =>  {
    const currentFruit = useState<Fruits>('current-fruit', () => 'apple')

    return {
     currentFruit
   }
}

in component:
script:
const { currentFruit } = useFruits
template:
p {{ currentFruit }}

It's there anyway could use the $t(fruit.apple) something like this in composable? So the text will be translated by different locales.

[VikingTristan]

I guess you could try something like

export type Fruits = 'apple' | 'banana' | 'orange'

export const useFruits = () =>  {
    const nuxtApp = useNuxtApp();
    const currentFruit = useState<Fruits>('current-fruit', () => nuxtApp.$i18n.t('apple'))

    return {
     currentFruit
   }
}

or

export type Fruits = 'apple' | 'banana' | 'orange'

export const useFruits = () =>  {
    const { t } = useI18n();
    const currentFruit = useState<Fruits>('current-fruit', () => t('apple'))

    return {
     currentFruit
   }
}

[jiayuwenn]

Thank you @VikingTristan!
const nuxtApp = useNuxtApp() is working in the project, do you also know how to use it in Type? For example:
type Fruits = t('apple') | t('banana') | t('orange')