Vue 3: Set locale default value in defineProps

January 4, 2022

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?

>Solution :

defineProps is a compiler macro, so you can’s 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>