How to give Props Default Values in Vue
📣 Sponsor
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 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>
<p>
Hi
</p>
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
. 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);
}
}
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
});
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"
}
});
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
:
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
name: {
type: String,
required: true
}
});
</script>
More Tips and Tricks for Vue
- Making a Vue To-do List App
- Creating a Reusable Tab Component in Vue
- Globally Registering Vue Components
- How to use Watchers in Vue
- How v-if and v-else work in Vue
- Vue Tips: Dynamic CSS with Vue Reactive Variables
- How to use Teleport in Vue to Move Parts of Templates
- A Guide on How to use Emit in Vue
- The Difference Between the Composition API and Options API in Vue
- The difference between created and mounted in Vue