How to fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js?

Sometimes, we want to fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js.

In this article, we’ll look at how to fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js.

How to fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js?

To fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js, we should set the default property to a function that returns an object or an array.

For instance, we write

<script>
export default {
  //...
  props: {
    exampleDefaultObject: {
      type: Object,
      default: () => ({}),
    },
    exampleDefaultArray: {
      type: Array,
      default: () => [],
    },
  },
  //...
};
</script>

to register the exampleDefaultObject and exampleDefaultArray props.

And we set the default property to a function that returns an object and an array to use the returned values as default values of the props.

How to fix the “Props with type Object/Array must use a factory function to return the default value.” error with Vue.js?

Conclusion