How to use enum in defineProps

[qwhatevera]

How to use enum in defineProps

[liulinboyi]

The macro defineProps may not support enum for now, in the future may support.

playground demo

In the demo

enum MSG {
  'msg1',
  'msg2'
}

interface Props {
  msg: MSG,
  name: string
}

defineProps<Props>()

will transform to

...
  props: {
    msg: { type: null, required: true },
    name: { type: String, required: true }
  },
...

I suggest you to use plugin to support enum in the defineProps such as unplugin-vue-macros

[chenxch]

Are you struggling with how to set an attribute type in props as an enum, for example, the following enum:

enum SIZE {
  LARGElarge',
  MEDIUM = 'medium',
  SMALL = 'small',
}

define props:

import { defineProps } from 'vue'

const props = defineProps<{ size: SIZE }>()

pros.size  //  size: SIZE

If you need the default

import { defineProps, withDefaults } from 'vue'

const props = withDefaults(defineProps<{ size: SIZE }>(), { size: SIZE.MEDIUM })

props.size   //  size: SIZE

console.log(props.size)
 //  medium