Fix: Invalid Props Options in Vue.js

What Causes This Warning?

This warning occurs when the props option is defined with an invalid format. Props must be either an array of strings or an object with valid prop definitions.

The Problem

// ❌ Invalid formats
export default {
  props: 'name', // String, not array or object
  props: 123,    // Number
  props: null,   // Null
  props: () => ['name'], // Function
}

The Fix

Array Syntax

// ✅ Array of strings
export default {
  props: ['name', 'age', 'email']
}

Object Syntax

// ✅ Object with type definitions
export default {
  props: {
    name: String,
    age: Number,
    isActive: Boolean
  }
}

Full Object Syntax

// ✅ Object with full options
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}

Common Scenarios

Script Setup

<script setup>
// ✅ Using defineProps
const props = defineProps(['name', 'age'])

// ✅ Or with types
const props = defineProps({
  name: String,
  age: Number
})
</script>

TypeScript

<script setup lang="ts">
// ✅ TypeScript interface
interface Props {
  name: string
  age?: number
}

const props = defineProps<Props>()
</script>

Valid Type Values

export default {
  props: {
    // Single type
    propA: String,
    propB: Number,
    propC: Boolean,
    propD: Array,
    propE: Object,
    propF: Function,
    propG: Symbol,

    // Multiple types
    propH: [String, Number],

    // Custom constructor
    propI: Person, // Your custom class

    // Required prop
    propJ: {
      type: String,
      required: true
    },

    // Default value
    propK: {
      type: Number,
      default: 100
    },

    // Factory function for default
    propL: {
      type: Object,
      default: () => ({ message: 'hello' })
    },

    // Validator
    propM: {
      type: String,
      validator: (value) => ['success', 'warning', 'error'].includes(value)
    }
  }
}

Invalid vs Valid

// ❌ Invalid
export default {
  props: {
    name: 'String', // String as value, not constructor
    age: 25,        // Number as value, not constructor
  }
}

// ✅ Valid
export default {
  props: {
    name: String,   // Constructor
    age: Number     // Constructor
  }
}

Quick Checklist

• Props must be array or object, not string/number/null
• Array syntax: only strings ['name', 'age']
• Object syntax: type constructors, not instances
• Use factory functions for object/array defaults
• Validators should return boolean