NuxtUI props with i18n

[silent plinth]

Hi @hidden prawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use tm or rt functions from vue-i18n with the items prop in Nuxt UI components, you need to access the i18n instance within your component's setup function. Here's how you can do it:

1. First, import and use the useI18n composable in your component:

<script setup>
import { useI18n } from 'vue-i18n'

const { t, tm, rt } = useI18n()
</script>

2. Then, you can use these functions to create your items array:

<script setup>
import { useI18n } from 'vue-i18n'

const { t, tm, rt } = useI18n()

const items = [
  {
    label: t('some.translation.key'),
    // or for tm:
    // label: tm('some.translation.key')[0],
    // or for rt:
    // label: rt('some.translation.key'),
  },
  // ... other items
]
</script>

<template>
  <UComponent :items="items" />
</template>

However, it's important to note that if you need to use these functions outside of the setup function or in a store, you should use the useNuxtApp().$i18n approach as mentioned in the Stack Overflow answer (https://stackoverflow.com/questions/77594888):

export const useAppStore = defineStore('appStore', {
  state: () => {
    return {
      label: useNuxtApp().$i18n.t('welcome')
    };
  },  
});

Remember that the exact implementation might vary depending on your specific Nuxt UI component and i18n setup. Always refer to the official Nuxt and vue-i18n documentation for the most up-to-date information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hidden prawn Kapa.ai is still learning and improving, please let me know how I did by reacting below.