Is there a way to declare shared props and events between components in Vue 3?

[dlohvinov]

Hi!

I need to declare same props and events for multiple sibling components, which are interchangeable.
For instance, I have
const props = defineProps({ question: { type: Object } })
and
const emit = defineEmits([ 'change:question'])
Which I want to declare in multiple components which should provide the same "interface" for parent.

From this discussion I've learned that composables aren't ment to do it. Mixins are considered as a bad practice. But I cannot find a way to achieve declaring same interface (props + events) for multiple components. Is there any, or should I just copy-paste them between these components?

[dlohvinov]

up :)

[markglattback]

When using the runtime versions of defineProps and defineEmits, you can just import from another file:

// config file
export const sharedProps = {
    question: {
       type: Object
    },
}

export const sharedEmits = ['change:question']

<script setup>
import { sharedProps, sharedEmits } from '../path/to/config/file'

const props = defineProps({ ...sharedProps, customProp: { type: Object } })
const emits = defineEmits([ ...sharedEmits ])
</script>

[JounQin]

const emit = defineEmits<{
  ['update:modelValue']: [wallets: Wallet[]]
}>()

[plugin:vite:vue] [@vue/compiler-sfc] Unsupported computed key in type referenced by a macro

/Users/JounQin/Workspaces/Outsouring/coin/frontend/src/components/WalletSender.vue
25 |  
26 |  const emit = defineEmits<{
27 |    ['update:modelValue']: [wallets: Wallet[]]
   |     ^^^^^^^^^^^^^^^^^^^
28 |  }>()
29 |

@markglattback Any workaround for this use case?

[markglattback]

Yes, you can use the following syntax:

// shared
const sharedEmits = {
    'update:modelValue': (wallets: Wallet[]) => {
        // optionally validate the value or just return true to accept any runtime value
        return true
    }
}

// component
defineEmits({
    ...sharedEmits,
})