Fix: Props Must Be Strings When Using Array Syntax in Vue.js

What Causes This Warning?

This warning occurs when you use the array syntax for defining props but include non-string values. In the array syntax, all prop names must be strings.

The Problem

// ❌ Non-string values in props array
export default {
  props: [count, message] // Variables instead of strings!
}

// ❌ Numbers in props array
export default {
  props: [123, 'message']
}

// ❌ Objects in props array
export default {
  props: [{ name: 'count' }]
}

The Fix

Use Strings in Array Syntax

// ✅ All strings
export default {
  props: ['count', 'message', 'isActive']
}

Use Object Syntax for Validation

// ✅ Object syntax with type validation
export default {
  props: {
    count: Number,
    message: String,
    isActive: Boolean
  }
}

// ✅ Object syntax with full options
export default {
  props: {
    count: {
      type: Number,
      required: true,
      default: 0
    },
    message: {
      type: String,
      default: 'Hello'
    }
  }
}

With Script Setup

<script setup>
// ✅ Composition API with defineProps
const props = defineProps(['count', 'message', 'isActive'])

// ✅ Or with type validation
const props = defineProps({
  count: Number,
  message: String,
  isActive: Boolean
})

// ✅ TypeScript syntax
const props = defineProps<{
  count: number
  message: string
  isActive: boolean
}>()
</script>

Common Scenarios

Copying from Variables

// ❌ Using variable names without quotes
const COUNT = 'count'
const MESSAGE = 'message'

export default {
  props: [COUNT, MESSAGE] // These are variables!
}

// ✅ Use the actual strings
export default {
  props: ['count', 'message']
}

// Or if you need dynamic names, use object syntax
export default {
  props: {
    [COUNT]: Number,
    [MESSAGE]: String
  }
}

Migrating from Options to Composition API

// Options API (correct)
export default {
  props: ['title', 'content']
}

// ✅ Composition API equivalent
<script setup>
defineProps(['title', 'content'])
</script>

// ✅ With types
<script setup>
defineProps({
  title: String,
  content: String
})
</script>

TypeScript Considerations

// ✅ TypeScript with defineProps
interface Props {
  count: number
  message: string
  items?: string[]
}

const props = defineProps<Props>()

// ✅ With defaults
const props = withDefaults(defineProps<Props>(), {
  message: 'Default message',
  items: () => []
})

Array vs Object Syntax

Array Syntax

• Simple list of prop names
• No validation
• Best for quick prototyping

props: ['name', 'age', 'email']

Object Syntax

• Type validation
• Default values
• Required flags
• Custom validators

props: {
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0
  },
  email: {
    type: String,
    default: ''
  }
}

Multiple Types

// ✅ Prop can be multiple types
props: {
  id: [String, Number], // String or Number
  value: [String, Number, Boolean]
}

Quick Checklist

• Use quoted strings in array syntax: ['prop1', 'prop2']
• Don’t use variables in array syntax
• Consider object syntax for type validation
• Use defineProps in Composition API
• Migrate to TypeScript for better type safety