Defining props inside composables

[j-o-sh]

Hello Vue people

I have to ask this here, since google seems to only give me some questionabe workarounds and the docs don't say much about this.

I was wondering whether (and how) someone could define a new prop within a composable. Meaning that, with using said composable, the component using it may gain one or more props.

I know we cannot use defineProps inside a useBla() function but is there a n equivalent? If not, why?

Pseudo-code

function useFoobar() {
  const myprops = addProps({ foo: String }) 
  
  // do something with the 'foo' prop
}

<script setup>
// in some component

useFoobar()

// ...
</script>

<template>
<some-component foo="I exist now" />
</template>

I was simply confused to not find any clear explanation in the docs either how this may be possible, or why it can't.

[j-o-sh]

anyone?

[LinusBorg]

was wondering whether (and how) someone could define a new prop within a composable

You can't. Composables are meant to be re-usable, so they should not be tied to specific props.

What you can do is provide props definitions alongside your composable:

export const FoobarProps = {
  { foo: String }
}

function useFoobar(props) {
  
  props.foo
}

The advantage of this, in terms of reusability, is that the consumer can choose to actually declare these props and pass the props to the composable, or choose to pass other data into the composable that has the required interface shape.

[j-o-sh]

Thx for the clarification. That makes total sense. 👍

I realise that the compiler makros for defineProps and defineEmits are often something that throws me for a loop. Maybe a bit more precise documentation on what those macros actually do would be a good idea? 🤔

I am still wondering though wether some way of keeping this code dry, could be achieved:

<script setup>
const props = defineProps({
  // ...
  { thing: { type: String, default: 'XXX'  }
  // ...
})

useAThing(props.thing)
</script>

Since, if you use composables to define aspects of components then there is a high chance, the code above will be repeated a lot. Also, you could argue that specific validation of the prop is domain knowledge of the composable and will make the component code fragile if it needs to be defined here.

If there was a function to appendProp(...) which we could use with the composition api, then authors of composables and components could descide within their domain, where and how to create a certain prop. 🤔. ...but I guess that would open a whole different can of worms?

[ginkosen]

In some scenarios, multiple SFCs may have the same props definition. In Vue 2, this can be resolved using mixins, but in Vue 3, it needs to be redefined in each SFC file, which clearly adds complexity and makes props maintenance more cumbersome. Therefore, unifying property definitions in composables becomes a viable option.

[LinusBorg]

but in Vue 3, it needs to be redefined in each SFC file, which clearly adds complexity [...]

you can just import the shared props definition from a separate file. No need for mixins. No added complexity.