i18n with NuxtUI component
Hey everyone, i work on a multilanguage project, i'd like to use i18n and nuxtui.
I have a problem because when i try to change the langauge on nuxtui component definition, the language doesn't change, all the localized string into the template is changing but the title of the UTable defined in the item const is not changing
<script setup lang="ts">
const { t } = useI18n()
import type { Contract } from '~/types'
const props = defineProps({
contract: {
type: Object as PropType<Contract>,
required: true
},
selected: {
type: Boolean,
default: false
}
})
const items = [{
label: t('ui_contract_details_details'),
icon: 'i-material-symbols-contract-edit-outline',
key: 'contract-data',
}, {
label: t('ui_contract_details_actualSIV'),
icon: 'i-heroicons-check-circle',
key: 'actual-siv',
}, {
label: t('ui_contract_details_action_history'),
icon: 'i-material-symbols-history-rounded',
key: 'history',
}]
const getLetterStartDate = () => {
const month = new Date(props.contract.start_date).toLocaleDateString('fr-FR',{month: 'long'})
const upperCasedMonth = month.charAt(0).toUpperCase() + month.slice(1)
return upperCasedMonth + ' ' + new Date(props.contract.start_date).getFullYear().toString()
}
<UTabs :items="items" :ui="{container:'overflow-x-auto'}">
<template #default="{ item }">
<div class="flex items-center gap-2 relative truncate">
<UIcon :name="item.icon" class="w-4 h-4 flex-shrink-1" />
<span class="truncate">{{ item.label }}</span>
</div>
</template>
<template #item="{ item }">
<ContractDataTable v-if="item.key === 'contract-data'" :contract="contract" />
<SivDetailsTable v-if="item.key === 'actual-siv'" :vehicle="vehicle" />
<VehicleActionsHistory v-if="item.key === 'history'" :vehicle="vehicle" />
</template>
</UTabs>
</script>
<script setup lang="ts">
const { t } = useI18n()
import type { Contract } from '~/types'
const props = defineProps({
contract: {
type: Object as PropType<Contract>,
required: true
},
selected: {
type: Boolean,
default: false
}
})
const items = [{
label: t('ui_contract_details_details'),
icon: 'i-material-symbols-contract-edit-outline',
key: 'contract-data',
}, {
label: t('ui_contract_details_actualSIV'),
icon: 'i-heroicons-check-circle',
key: 'actual-siv',
}, {
label: t('ui_contract_details_action_history'),
icon: 'i-material-symbols-history-rounded',
key: 'history',
}]
const getLetterStartDate = () => {
const month = new Date(props.contract.start_date).toLocaleDateString('fr-FR',{month: 'long'})
const upperCasedMonth = month.charAt(0).toUpperCase() + month.slice(1)
return upperCasedMonth + ' ' + new Date(props.contract.start_date).getFullYear().toString()
}
<UTabs :items="items" :ui="{container:'overflow-x-auto'}">
<template #default="{ item }">
<div class="flex items-center gap-2 relative truncate">
<UIcon :name="item.icon" class="w-4 h-4 flex-shrink-1" />
<span class="truncate">{{ item.label }}</span>
</div>
</template>
<template #item="{ item }">
<ContractDataTable v-if="item.key === 'contract-data'" :contract="contract" />
<SivDetailsTable v-if="item.key === 'actual-siv'" :vehicle="vehicle" />
<VehicleActionsHistory v-if="item.key === 'history'" :vehicle="vehicle" />
</template>
</UTabs>
</script>
1 Reply
Items here is not reactive. You need to make it a computed value