How to use Namespaced Components?

Hi everyone,

is there any body to know how to use namespaced component in Vue3? This is feature announced in Script Setup docs.

https://v3.vuejs.org/api/sfc-script-setup.html#namespaced-components

But I couldn’t find any explanation anywhere.

Thanks
Best regards

I think namspaced component was supposed to extend the access child component feature of Vue.js 2.

<script setup>
import * as Form from './form-components'
</script>

With that, you can treat Form as if a variable

For example, supposed I got 2 component: OutsideComponent and InsideComponent

<template>
<div>
  <div><strong>This is outside component</strong></div>
  <br/>
  <InsideComponent>Inside</InsideComponent>
</div>
</template>
<script>
import InsideComponent from "./InsideComponent.vue"
export default {
  name: "OutsideComponent",
  components: {
    InsideComponent
  }
}
</script>
<template>
<div class="inner">
  <slot></slot>
</div>
</template>
<script>
export default {
  name: "InsideComponent"
}
</script>

Using namespaced component, I can access InsideComponent and OutsideComponent like a normal variable.

<script setup>
import * as Test from './OutsideComponent.vue'
console.log(Test.default.components.InsideComponent)
</script>
<template>
<div>
  <Test.default></Test.default>
  <br/>
  <Test.default.components.InsideComponent>Passed from Call Component</Test.default.components.InsideComponent>
</div>
</template>

Here is the result of above example:
image

If you need to see full repo, here it is: https://github.com/VietTungFizzy/vuejs-namespaced-component-example.git