N
Nuxt•3d ago
Nawi

NuxtUI props with i18n

How do I use tm or rt in items prop in Nuxt Ui?
3 Replies
kapa.ai
kapa.ai•3d ago
Hi @Nawi. 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>
<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>
<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')
    };
  },  
});
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: ----------------------
kapa.ai
kapa.ai•3d ago
<@969851557954879488> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Nawi
NawiOP•3d ago
For example <UAccordion :items="tm('csCard.ctaList')" /> </UContainer>, where to rt?

Did you find this page helpful?