Vue 3 autocomplete props from composables/libs
Hi all,
I'm working with Vue3, and am trying to DRY in a lot of common props and emits from similar components. For this, Vue allows to reuse props definitions and emit names simply by adding them to the defineProps/defineEmits from other files through the spread operator, since they are simple objects/arrays.
That is, something like this:
common-props-lib.js:
export props = {
myProp: String,
myOtherProp: { type: Boolean, default: true }
};
export emits = [ 'myEmit', 'myOtherEmit' ];
--------
TestComponent.vue:
import { props as commonProps, emits as commonEmits } from './common-props-lib.js';
defineProps( {
...commonProps, // <- adding common props from the library
specificProp: String
} );
const emit = defineEmits( [
...commonEmits, // <- adding common emits from the library
'specificEmit'
] );The issue is that those props/emits loaded from another file don't appear in the autocomplete list either in the SFC file or when using the component elsewhere.
Is there any way to make those props/emits appear in the component's autocomplete, even if I have to declare them manually somewhere?
Please sign in to leave a comment.
I tried to create a sample project based on the shared code, but it produced multiple errors in the IDE. See the attached screenshot. However, when I used a slightly different example, completion worked for me. I have attached it here. Could you please modify my project to demonstrate the issue?
Hi,
Tank you for your answer. I'm afraid I might be too new for these forums, but I can't find your attachments.
Sorry, this is my bad. This forum does not support attachments. Since we need them for an efficient investigation, could you please create a new ticket on YouTrack(https://youtrack.jetbrains.com/issues/web) and share a link with me so we can continue the discussion?