Vue 3: Set locale default value in defineProps

Question

I've trying to set the default value of a prop to a locale value using i18n. I'm using vue 3.2 and the script setup tag.

I've tried the following but this gives me an error:

defineProps are referencing locally declared variables.

<script setup>
import { useI18n } from 'vue-i18n';
    
const { t } = useI18n();
    
defineProps({
  type: { type: String, required: true },
  title: { type: String, required: false, default: `${t('oops', 1)} ${t('request_error', 1)}` },
  description: { type: String, required: false, default: '' },
  showReload: { type: Boolean, required: false, default: false },
  error: { type: String, required: true },
});
</script>

What's the best way to handle this?

Answer 1

defineProps is a compiler macro, so you can't use any runtime values within it. I'd suggest to use a local variable for this default:

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

    const props = defineProps({
        type: { type: String, required: true },
        title: { type: String, required: false},
        description: { type: String, required: false, default: '' },
        showReload: { type: Boolean, required: false, default: false },
        error: { type: String, required: true },
    });


    const { t } = useI18n();
    const titleWithDefault = props.title || `${t('oops', 1)} ${t('request_error', 1)}`;
</script>

Also described here in the last bullet point: https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits