Subscribe on changes!

Support default export in namespaced components syntax

avatar
May 11th 2022

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.

avatar
May 11th 2022

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.