Support default export in namespaced components syntax
What problem does this feature solve?
Since version 3.2.0 Vue supports Namespaced Components syntax. However, it expects all components to be exported as named exports, therefore this example does not work.
What does the proposed API look like?
I would simply like to use the following syntax:
// components/Dropdown.js
export default function Dropdown() {}
export function Toggle() {}
<script setup>
import * as Dropdown from 'components/Dropdown'
</script>
<template>
<Dropdown>
<Dropdown.Toggle>click me</Dropdown.Toggle>
</Dropdown>
</template>
instead of
<template>
<Dropdown.default>...</Dropdown.default>
<Dropdown.Dropdown>...</Dropdown.Dropdown>
</template>
Also, while we're on the subject. Why doesn't this syntax work when components are imported outside of script-setup (in a regular script block). is there any reason for this limitation? Thank you for your consideration.
I think this is not really feasable as it's ambiguous. an non-namespaced Component means "use the value of the variable of this name as the component.
You now want it to mean: "Use the default property on the variable with this name as the component if ...", well, if what?
It could be a runtime check, but then it would break this component:
export default defineComponent({
default: /* something a user validly defined on the component using this key */
})
Also, what's wrong with named exports?
Why doesn't this syntax work when components are imported outside of script-setup (in a regular script block). is there any reason for this limitation? Thank you for your consideration.
Don't see a reason, could be a bug.