How to add multiple data types for VueJs Props?

Here is the solution I found.

props: {   value: [Number, String, Array]}

vue.js vuejs2 vue-component

The syntax with a pipe (Number | String), like proposed in the accepted answer, does not actually work. Here is a more detailed solution with examples:

Type-Check, Not Required Prop

Use of the following syntax to type check a prop:

props: {  username: {    type: [ String, Number ]  }}

Here is a live example of a property with type check:

Vue.config.devtools = false;Vue.config.productionTip = false;Vue.component('test-component', {  name: 'TestComponent',  props: {    username: {      type: [ String, Number ]    }  },  template: `<div>username: {{ username }}</div>`});new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script><div id="app">  <!-- valid: String -->  <test-component :username="'user 38'"></test-component>    <!-- valid: Number -->  <test-component :username="59"></test-component>    <!-- valid: null is valid, it is not required -->  <test-component :username="null"></test-component>  <!-- valid: missing property is valid, it is not required -->  <test-component></test-component>  <!-- invalid: Array -->  <test-component :username="['test', 456]"></test-component></div>

Expand snippet