a question for all the vue devs

how do you define props? do you use the special typescript syntax:

const props = withDefaults(defineProps<{ active: boolean }>(), {
  active: false,
});

const props = withDefaults(defineProps<{ active: boolean }>(), {
  active: false,
});

or the other way:

defineProps({
  active: {
    type: boolean,
    default: false
  },
})

defineProps({
  active: {
    type: boolean,
    default: false
  },
})

3 Replies

nexxelOP•2y ago

i saw antfu use the first one but another person said that no one uses that in development everyone uses the 2nd way so im very confused what do you guys use and prefer and why?

needmorewood•2y ago

probably a variation of the first one where you declare the props interface above it from the docs

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

pulled it from here https://vuejs.org/guide/typescript/composition-api.html maybe a little zod with validation, would be interesting to try

nexxelOP•2y ago

interesting thanks

Gaming

Programming

a question for all the vue devs