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" /> If we try to call this component without a prop, it returns in the code, or just as no text when rendered in HTML. Let's say our looks like this: name undefined Component <script>
export default {
    props: {
        name: String
    },
    mounted() {
        console.log(this.name);
    }
}
</script>

<template>
    <p>
        Hi {{ name }}
    </p>
</template> All our component does is it defines a prop called of type , and console logs this property. It also displays it in the form . The only issue here is that if is undefined when the component is called, no default name is given. name String Hi {{ name }} name How to set default prop values in Vue using the Options API? Setting default 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 to have a default value of " ", then we update our prop to look like this: name there export default {
    props: {
        name: {
            type: String,
            default: "there"
        }
    },
    mounted() {
        console.log(this.name);
    }
} Now if no name is given, the message will simply say ' '. Hi there How to set default prop values in the Composition API? In the composition API, defining props uses the function. This function follows the same syntax as props defined in the Options API. defineProps Defining a prop without a default looks like this: import { defineProps } from 'vue';
  
const props = defineProps({
    name: String
}); And then to add a default value, we extend to having a default property, just as before: name import { defineProps } from 'vue';
  
const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
}); How to set 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 field. required For example, if we want our property to be defined, we'd simply set to : name required true &lt;script setup>
import { defineProps } from 'vue';
  
const props = defineProps({
    name: {
        type: String,
        required: true
    }
});
</script> Also Published Here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Set Default Value of Props in Vue?

How to Set Default Value of Props in Vue?

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

How to Set Default Value of Props in Vue?

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES