How to give Props Default Values in Vue

Once we use elements in Vue, we regularly use properties or props to go customized items of information right down to the kid element. For instance, we are able to inform our little one element that for this model of the element, “title” is about to “my-component”:

<Element title="my-component" />
Enter fullscreen mode

Exit fullscreen mode

If we attempt to name this element with no title prop, it returns undefined within the code, or simply as no textual content when rendered in HTML. For instance our Element seems to be like this:

<script>
export default {
    props: {
        title: String
    },
    mounted() {
        console.log(this.title);
    }
}
</script>

<template>
    <p>
        Hello {{ title }}
    </p>
</template>
Enter fullscreen mode

Exit fullscreen mode

All our element does is defines a prop referred to as title of kind String, and console logs this property. It additionally shows it within the type Hello {{ title }}. The one situation right here is that if title is undefined when the element is known as, no default title is given.



Setting Default Prop Values in Vue

Setting defaults prop values in Vue is straightforward. If you’re utilizing the Options API, then it is as straightforward as extending our property into an object. For instance, if we would like our title to have a default worth of “there“, then we replace our prop to appear to be this:

export default {
    props: {
        title: {
            kind: String,
            default: "there"
        }
    },
    mounted() {
        console.log(this.title);
    }
}
Enter fullscreen mode

Exit fullscreen mode

Now if no title is given, the message will merely say ‘Hello there



Setting Default Prop Values in Composition API

Within the composition API, defining props makes use of the defineProps operate. This operate follows the identical syntax as props outlined on the Choices API. Defining a prop with no default seems to be like this:

import { defineProps } from 'vue';

const props = defineProps({
    title: String
});
Enter fullscreen mode

Exit fullscreen mode

After which so as to add a default worth, we lengthen title to have a default property, simply as earlier than:

import { defineProps } from 'vue';

const props = defineProps({
    title: {
        kind: String,
        default: "there"
    }
});
Enter fullscreen mode

Exit fullscreen mode



Setting a Prop as required in Vue

To keep away from the necessity for setting a default worth on a property, we are able to pressure a property to be required through the use of the required subject. For instance, if we would like our title property to be outlined, we might merely set required to true:

&lt;script setup>
import { defineProps } from 'vue';

const props = defineProps({
    title: {
        kind: String,
        required: true
    }
});
</script>
Enter fullscreen mode

Exit fullscreen mode

Add a Comment

Your email address will not be published. Required fields are marked *