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":

Vue.js 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:

CategoriesUncategorized