What is the correct way to use imported props in Vue 3 Typescript

Viewed 340

What is the correct way to share props in vue 3 setup script

Im using the following right now:

// sharedProps.ts
import { ComponentObjectPropsOptions } from 'vue';

const sharedProps: ComponentObjectPropsOptions = {
  modelValue: {
    type: String,
    default: '',
  },
  id: {
    type: String,
    default: null,
  },
};
export default sharedProps;

And for the component

// Some component
<script setup lang="ts">
import { defineEmits, defineProps, ref } from 'vue';
import sharedProps from '@/props/sharedProps';

const props = defineProps({
  ...sharedProps,
  label: {
    type: String,
    default: '',
  },
});

...
</script>

And this works fine - But it seems that Rollup, VueDX etc. is not too happy about it. And it is not a type that is found in the documentation. So what is the correct typing for shared props or way to share props?

Example of error msg when running Rollup

Default export of the module has or is using private name 'PropOptions'
0 Answers
Related