DEV Community

Cover image for How to give Props Default Values in Vue
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

How to give Props Default Values in Vue

When we use components in Vue, we often use properties or props to pass custom pieces of data down to the child component. For example, we can tell our child component that for this version of the component, "name" is set to "my-component":

<Component name="my-component" />
Enter fullscreen mode Exit fullscreen mode

If we try to call this component without a name prop, it returns undefined in the code, or just as no text when rendered in HTML. Let's say our Component looks like this:

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

<template>
    <p>
        Hi {{ name }}
    </p>
</template>
Enter fullscreen mode Exit fullscreen mode

All our component does is defines a prop called name of type String, and console logs this property. It also displays it in the form Hi {{ name }}. The only issue here is that if name is undefined when the component is called, no default name is given.

Setting Default Prop Values in Vue

Setting defaults prop values in Vue is easy. If you are using the Options API, then it's as easy as extending our property into an object. For example, if we want our name to have a default value of "there", then we update our prop to look like this:

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

Now if no name is given, the message will simply say 'Hi there'

Setting Default Prop Values in Composition API

In the composition API, defining props uses the defineProps function. This function follows the same syntax as props defined on the Options API. Defining a prop without a default looks like this:

import { defineProps } from 'vue';

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

And then to add a default value, we extend name to have a default property, just as before:

import { defineProps } from 'vue';

const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
});
Enter fullscreen mode Exit fullscreen mode

Setting a Prop as required in Vue

To avoid the need for setting a default value on a property, we can force a property to be required by using the required field. For example, if we want our name property to be defined, we'd simply set required to true:

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

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

Discussion (0)